@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); */
}

/* --- Animations --- */
@keyframes pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}
.animate-pulse {
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
@keyframes blink-caret {
  from,
  to {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
}
.animated-cursor {
  opacity: 0;
  animation: blink-caret 1s step-end infinite;
}

/* --- Section: Hero Section --- */
.hero-section {
  min-height: 100vh;
  background: linear-gradient(to bottom right, #0f172a, #1e293b, #0f172a);
  position: relative;
  overflow: hidden;
}

.hero-bg-effects {
  position: absolute;
  inset: 0; /* top: 0; right: 0; bottom: 0; left: 0; */
}
.hero-bg-circle {
  position: absolute;
  width: 24rem; /* w-96 */
  height: 24rem; /* h-96 */
  border-radius: 9999px; /* rounded-full */
  filter: blur(64px); /* blur-3xl */
}
.hero-bg-circle.emerald {
  top: 25%;
  left: 25%;
  background-color: rgba(16, 185, 129, 0.1);
}
.hero-bg-circle.blue {
  bottom: 25%;
  right: 25%;
  background-color: rgba(59, 130, 246, 0.1);
}

.hero-content-wrapper {
  position: relative;
  max-width: 80rem; /* max-w-7xl */
  margin: 0 auto; /* mx-auto */
  padding: 5rem 1rem 4rem; /* pt-20 pb-16 px-4 */
}

/* --- Hero Content Grid --- */
.hero-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem; /* gap-12 */
  align-items: center; /* items-center */
}

/* Content Block (Left side) */
.hero-text-content {
  display: flex;
  flex-direction: column;
}
.hero-text-content > *:not(:first-child) {
  margin-top: 2rem;
} /* space-y-8 */

/* Heading Group within Content Block */
.hero-heading-group {
  display: flex;
  flex-direction: column;
}
.hero-heading-group > *:not(:first-child) {
  margin-top: 1rem;
} /* space-y-4 */

/* Tag Pill */
.tag-pill {
  display: inline-flex;
  align-items: center;
  padding: 0.5rem 1rem; /* py-2 px-4 */
  background-color: rgba(16, 185, 129, 0.1);
  border: 1px solid rgba(16, 185, 129, 0.2);
  border-radius: 9999px; /* rounded-full */
  color: #34d399; /* text-emerald-400 */
  font-size: 0.875rem; /* text-sm */
  line-height: 1.25rem; /* text-sm */
  font-weight: 500; /* font-medium */
  align-self: flex-start;
}
.tag-pill-dot {
  width: 0.5rem; /* w-2 */
  height: 0.5rem; /* h-2 */
  background-color: #34d399; /* bg-emerald-400 */
  border-radius: 9999px; /* rounded-full */
  margin-right: 0.5rem; /* mr-2 */
}

/* Main Heading */
.main-heading {
  font-size: 3rem; /* text-5xl */
  line-height: 1; /* leading-tight */
  font-weight: 700; /* font-bold */
  color: #ffffff; /* text-white */
  font-family: "Anta", sans-serif;
}
.main-heading-gradient {
  font-family: "Anta", sans-serif;
  background: linear-gradient(to right, #34d399, #60a5fa);
  -webkit-background-clip: text; /* bg-clip-text */
  background-clip: text; /* bg-clip-text */
  color: transparent; /* text-transparent */
}

/* Hero Paragraph */
.hero-paragraph {
  font-size: 1.25rem; /* text-xl */
  line-height: 1.625; /* leading-relaxed */
  color: #d1d5db; /* text-gray-300 */
  max-width: 36rem; /* max-w-xl */
}

/* Button Group */
.hero-button-group {
  flex-direction: column;
  display: flex; /* flex */
  gap: 1rem; /* gap-4 */
}

/* Buttons */
.btn {
  padding: 1rem 2rem; /* py-4 px-8 */
  border-radius: 0.5rem; /* rounded-lg */
  font-weight: 600; /* font-semibold */
  display: flex; /* flex */
  align-items: center; /* items-center */
  justify-content: center; /* justify-center */
  text-decoration: none; /* remove underline for links */
  border: none;
  cursor: pointer;
  transition-property: all; /* transition-all */
  transition-duration: 200ms; /* duration-200 */
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); /* ease-in-out */
}

.btn--primary {
  background: linear-gradient(to right, #10b981, #059669);
  color: #ffffff;
}

.btn--primary:hover {
  background: linear-gradient(to right, #059669, #047857);
  transform: scale(1.05); /* hover:scale-105 */
}

.btn--secondary {
  border: 1px solid #4b5563; /* border border-gray-600 */
  color: #ffffff; /* text-white */
  background-color: transparent;
}

.btn--secondary:hover {
  border-color: #34d399; /* hover:border-emerald-400 */
  color: #34d399; /* hover:text-emerald-400 */
}

/* Icon Effects in Buttons */
.btn .btn-icon-effect {
  transition-property: transform; /* transition-transform */
  transition-duration: 200ms;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.btn--primary:hover .btn-icon-effect.arrow {
  transform: translateX(0.25rem);
} /* group-hover:translate-x-1 */
.btn--primary .btn-icon-effect.arrow {
  margin-left: 0.5rem;
} /* ml-2 */

.btn--secondary .btn-icon-effect.play {
  margin-right: 0.5rem;
} /* mr-2 */
.btn--secondary:hover .btn-icon-effect.play {
  transform: scale(1.1);
} /* group-hover:scale-110 */

/* Stats Grid */
.stats-grid {
  display: grid; /* grid */
  grid-template-columns: repeat(3, minmax(0, 1fr)); /* grid-cols-3 */
  gap: 2rem; /* gap-8 */
  padding-top: 2rem; /* pt-8 */
}
.stat-item-value {
  font-size: 1.875rem; /* text-3xl */
  line-height: 2.25rem; /* line-height for 3xl */
  font-weight: 700; /* font-bold */
  color: #ffffff; /* text-white */
}
.stat-item-label {
  color: #9ca3af; /* text-gray-400 */
  font-size: 0.875rem; /* text-sm */
  line-height: 1.25rem; /* text-sm */
}

/* --- Visual Box (Terminal) --- */
.visual-container {
  position: relative;
}
.visual-box {
  position: relative;
  z-index: 10;
  background: linear-gradient(to bottom right, #1e293b, #0f172a);
  border-radius: 1rem; /* rounded-2xl */
  padding: 2rem; /* p-8 */
  border: 1px solid #334155; /* border-slate-700 */
}
.visual-box-content {
  display: flex;
  flex-direction: column;
}
.visual-box-content > *:not(:first-child) {
  margin-top: 1rem;
} /* space-y-4 */

.terminal-header {
  display: flex;
  align-items: center;
}
.terminal-header > *:not(:first-child) {
  margin-left: 0.5rem;
} /* space-x-2 */
.terminal-header-label {
  margin-left: 1rem;
  color: rgb(156, 163, 175);
} /* ml-4 */
.terminal-dot {
  width: 0.75rem; /* w-3 */
  height: 0.75rem; /* h-3 */
  border-radius: 9999px; /* rounded-full */
}
.terminal-dot.red {
  background-color: #ef4444;
}
.terminal-dot.yellow {
  background-color: #f59e0b;
}
.terminal-dot.green {
  background-color: #22c55e;
}

.terminal-code-block {
  background-color: #0f172a; /* bg-slate-900 */
  border-radius: 0.5rem; /* rounded-lg */
  padding: 1rem; /* p-4 */
  font-family: "Space Mono", monospace; /* font-mono */
  font-size: 0.875rem; /* text-sm */
  line-height: 1.25rem; /* text-sm */
}
.terminal-code-line.command {
  color: #34d399;
} /* text-emerald-400 */
.terminal-code-line.output {
  color: #9ca3af;
} /* text-gray-400 */
.terminal-code-line + .terminal-code-line {
  margin-top: 0.5rem;
} /* mt-2 for subsequent lines */
.terminal-code-line.output.mt-4 {
  margin-top: 1rem;
} /* Override for specific line */

.visual-box-blob {
  position: absolute;
  top: -1rem;
  right: -1rem; /* -top-4 -right-4 */
  width: 8rem; /* w-32 */
  height: 8rem; /* h-32 */
  background: linear-gradient(to right, #34d399, #60a5fa);
  border-radius: 9999px; /* rounded-full */
  filter: blur(48px); /* blur-2xl */
  opacity: 0.2; /* opacity-20 */
}

/* --- Section: Services --- */
.services-section {
  padding-top: 5rem; /* py-20 */
  padding-bottom: 5rem; /* py-20 */
  background-color: rgba(30, 41, 59, 0.5); /* bg-slate-800/50 */
}

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

.section-header {
  text-align: center; /* text-center */
  margin-bottom: 4rem; /* mb-16 */
}

.section-title {
  font-size: 2.25rem; /* text-4xl */
  line-height: 2.5rem; /* Adjusted for 4xl */
  font-weight: 700; /* font-bold */
  color: #ffffff; /* text-white */
  margin-bottom: 1rem; /* mb-4 */
  font-family: "Anta", sans-serif;
}

.section-description {
  font-size: 1.25rem; /* text-xl */
  line-height: 1.75rem; /* Adjusted for xl */
  color: #9ca3af; /* text-gray-400 */
  max-width: 48rem; /* max-w-3xl */
  margin-left: auto; /* mx-auto */
  margin-right: auto; /* mx-auto */
}

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

/* --- Service Card --- */
.service-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 */
  padding: 2rem; /* p-8 */
  transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1); /* transition-all duration-300 */
  transform: scale(1); /* Initial scale */
}

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

.service-icon-wrapper {
  width: 4rem; /* w-16 */
  height: 4rem; /* h-16 */
  background: linear-gradient(
    to right,
    #10b981,
    #059669
  ); /* bg-gradient-to-r from-emerald-500 to-emerald-600 */
  border-radius: 0.5rem; /* rounded-lg */
  display: flex; /* flex */
  align-items: center; /* items-center */
  justify-content: center; /* justify-center */
  margin-bottom: 1.5rem; /* mb-6 */
  transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1); /* transition-transform duration-300 */
  transform: scale(1); /* Initial scale */
}

.service-card:hover .service-icon-wrapper {
  transform: scale(1.1); /* group-hover:scale-110 */
}

.service-icon-wrapper svg {
  color: #ffffff; /* text-white */
  width: 2rem; /* size={32} in px, so 2rem */
  height: 2rem; /* size={32} in px, so 2rem */
}

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

.service-description {
  color: #9ca3af; /* text-gray-400 */
  margin-bottom: 1.5rem; /* mb-6 */
}

.service-features {
  display: flex; /* flex */
  flex-direction: column; /* flex-col */
}
.service-features > *:not(:first-child) {
  margin-top: 0.5rem; /* space-y-2 */
}

.service-feature-item {
  display: flex; /* flex */
  align-items: center; /* items-center */
  font-size: 0.875rem; /* text-sm */
  line-height: 1.25rem;
}

.feature-dot {
  width: 0.5rem; /* w-2 */
  height: 0.5rem; /* h-2 */
  background-color: #34d399; /* bg-emerald-400 */
  border-radius: 9999px; /* rounded-full */
  margin-right: 0.75rem; /* mr-3 */
}

.feature-text {
  color: #d1d5db; /* text-gray-300 */
}

.tech-dot {
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
.tech-dot-animate-1 {
  animation-delay: 0s;
}
.tech-dot-animate-2 {
  animation-delay: 0.2s;
}
.tech-dot-animate-3 {
  animation-delay: 0.4s;
}

/* --- Section: Technologies --- */
.technologies-section {
  padding-top: 5rem; /* py-20 */
  padding-bottom: 5rem; /* py-20 */
  background-color: #0f172a; /* bg-slate-900 */
}

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

.tech-header {
  text-align: center; /* text-center */
  margin-bottom: 4rem; /* mb-16 */
}

.tech-section-title {
  font-size: 2.25rem; /* text-4xl */
  line-height: 2.5rem; /* Adjusted for 4xl */
  font-weight: 700; /* font-bold */
  color: #ffffff; /* text-white */
  margin-bottom: 1rem; /* mb-4 */
  font-family: "Anta", sans-serif;
}

.tech-section-description {
  font-size: 1.25rem; /* text-xl */
  line-height: 1.75rem; /* Adjusted for xl */
  color: #9ca3af; /* text-gray-400 */
  max-width: 48rem; /* max-w-3xl */
  margin-left: auto; /* mx-auto */
  margin-right: auto; /* mx-auto */
}

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

/* --- Technology Card --- */
.tech-card {
  background-color: rgba(30, 41, 59, 0.5); /* bg-slate-800/50 */
  border: 1px solid #334155; /* border border-slate-700 */
  border-radius: 0.5rem; /* rounded-lg */
  padding: 1.5rem; /* p-6 */
  text-align: center; /* text-center */
  transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1); /* transition-all duration-300 */
  transform: scale(1); /* Initial scale */
}

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

.tech-icon-wrapper {
  width: 3rem; /* w-12 */
  height: 3rem; /* h-12 */
  border-radius: 0.5rem; /* rounded-lg */
  display: flex; /* flex */
  align-items: center; /* items-center */
  justify-content: center; /* justify-center */
  margin-left: auto; /* mx-auto */
  margin-right: auto; /* mx-auto */
  margin-bottom: 1rem; /* mb-4 */
  transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1); /* transition-transform duration-300 */
  transform: scale(1); /* Initial scale */
}

.tech-card:hover .tech-icon-wrapper {
  transform: scale(1.1); /* group-hover:scale-110 */
}

/* Specific Gradient Backgrounds for Categories */
.tech-icon--frontend {
  background: linear-gradient(to right, #3b82f6, #2563eb);
} /* from-blue-500 to-blue-600 */
.tech-icon--language {
  background: linear-gradient(to right, #6366f1, #4f46e5);
} /* from-indigo-500 to-indigo-600 */
.tech-icon--backend {
  background: linear-gradient(to right, #22c55e, #16a34a);
} /* from-green-500 to-green-600 */
.tech-icon--ai-ml {
  background: linear-gradient(to right, #8b5cf6, #7c3aed);
} /* from-purple-500 to-purple-600 */
.tech-icon--cloud {
  background: linear-gradient(to right, #f97316, #ea580c);
} /* from-orange-500 to-orange-600 */
.tech-icon--devops {
  background: linear-gradient(to right, #ef4444, #dc2626);
} /* from-red-500 to-red-600 */
.tech-icon--database {
  background: linear-gradient(to right, #f59e0b, #d97706);
} /* from-yellow-500 to-yellow-600 */
.tech-icon--api {
  background: linear-gradient(to right, #06b6d4, #0891b2);
} /* from-cyan-500 to-cyan-600 */
.tech-icon--framework {
  background: linear-gradient(to right, #ec4899, #db2777);
} /* from-pink-500 to-pink-600 */
.tech-icon--orchestration {
  background: linear-gradient(to right, #14b8a6, #0d9488);
} /* from-teal-500 to-teal-600 */
.tech-icon--default {
  background: linear-gradient(to right, #6b7280, #4b5563);
} /* from-gray-500 to-gray-600 */

.tech-icon-text {
  color: #ffffff; /* text-white */
  font-weight: 700; /* font-bold */
  font-size: 1.125rem; /* text-lg */
  line-height: 1.75rem; /* line-height for lg */
}

.tech-name {
  color: #ffffff; /* text-white */
  font-weight: 600; /* font-semibold */
  margin-bottom: 0.5rem; /* mb-2 */
}

.tech-category {
  color: #9ca3af; /* text-gray-400 */
  font-size: 0.875rem; /* text-sm */
  line-height: 1.25rem; /* line-height for sm */
}

/* --- Footer Section for Technologies --- */
.tech-footer {
  margin-top: 4rem; /* mt-16 */
  text-align: center; /* text-center */
}

.tech-more-info {
  display: inline-flex; /* inline-flex */
  align-items: center; /* items-center */
  padding: 0.75rem 1.5rem; /* px-6 py-3 */
  background-color: rgba(30, 41, 59, 0.5); /* bg-slate-800/50 */
  border: 1px solid #334155; /* border border-slate-700 */
  border-radius: 9999px; /* rounded-full */
}

.tech-more-text {
  color: #9ca3af; /* text-gray-400 */
  margin-right: 0.5rem; /* mr-2 */
}

.tech-dots-wrapper {
  display: flex; /* flex */
}
.tech-dots-wrapper > *:not(:first-child) {
  margin-left: 0.25rem; /* space-x-1 */
}

.tech-dot {
  width: 0.5rem; /* w-2 */
  height: 0.5rem; /* h-2 */
  background-color: #34d399; /* bg-emerald-400 */
  border-radius: 9999px; /* rounded-full */
}

/* --- Section: Portfolio --- */
.portfolio-section {
  padding-top: 5rem; /* py-20 */
  padding-bottom: 5rem; /* py-20 */
  background-color: rgba(30, 41, 59, 0.3); /* bg-slate-800/30 */
}

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

.section-header {
  text-align: center; /* text-center */
  margin-bottom: 4rem; /* mb-16 */
}

.section-title {
  font-size: 2.25rem; /* text-4xl */
  line-height: 2.5rem; /* Adjusted for 4xl */
  font-weight: 700; /* font-bold */
  color: #ffffff; /* text-white */
  margin-bottom: 1rem; /* mb-4 */
  font-family: "Anta", sans-serif;
}

.section-description {
  font-size: 1.25rem; /* text-xl */
  line-height: 1.75rem; /* Adjusted for xl */
  color: #9ca3af; /* text-gray-400 */
  max-width: 48rem; /* max-w-3xl */
  margin-left: auto; /* mx-auto */
  margin-right: auto; /* mx-auto */
}

.project-grid {
  display: grid; /* grid */
  grid-template-columns: repeat(1, minmax(0, 1fr)); /* grid-cols-1 */
  gap: 2rem; /* gap-8 */
  margin-bottom: 3rem; /* mb-12 */
}

/* --- Project Card --- */
.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 */
  transform: scale(1); /* Initial scale */
  position: relative; /* acts as group */
}

.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-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 */
  transform: scale(1); /* Initial scale */
}

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

.project-category-tag {
  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 */
  line-height: 1rem; /* line-height for xs */
  font-weight: 600; /* font-semibold */
  border-radius: 9999px; /* rounded-full */
}

.project-link-button-wrapper {
  position: absolute; /* absolute */
  top: 1rem; /* top-4 */
  right: 1rem; /* right-4 */
  opacity: 0; /* opacity-0 */
  transition: opacity 300ms cubic-bezier(0.4, 0, 0.2, 1); /* transition-opacity duration-300 */
}

.project-card:hover .project-link-button-wrapper {
  opacity: 1; /* group-hover:opacity-100 */
}

.project-link-button {
  width: 2rem; /* w-8 */
  height: 2rem; /* h-8 */
  background-color: rgba(255, 255, 255, 0.2); /* bg-white/20 */
  backdrop-filter: blur(4px); /* backdrop-blur-sm */
  border-radius: 9999px; /* rounded-full */
  display: flex; /* flex */
  align-items: center; /* items-center */
  justify-content: center; /* justify-center */
  transition: background-color 200ms cubic-bezier(0.4, 0, 0.2, 1); /* transition-colors */
  border: none; /* remove default button border */
  cursor: pointer;
}

.project-link-button:hover {
  background-color: rgba(255, 255, 255, 0.3); /* hover:bg-white/30 */
}

.project-link-button svg {
  color: #ffffff; /* text-white */
  width: 1rem; /* size={16} */
  height: 1rem; /* size={16} */
}

.project-content-area {
  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 */
  display: -webkit-box; /* for line-clamp */
  -webkit-line-clamp: 2; /* line-clamp-2 */
  -webkit-box-orient: vertical; /* for line-clamp */
  overflow: hidden; /* for line-clamp */
  text-overflow: ellipsis; /* for line-clamp */
}

.project-tech-list {
  display: flex; /* flex */
  flex-wrap: wrap; /* flex-wrap */
  gap: 0.5rem; /* gap-2 */
  margin-bottom: 1rem; /* mb-4 */
}

.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 */
  line-height: 1rem; /* line-height for xs */
  border-radius: 0.375rem; /* rounded-md */
}

.project-view-button {
  color: #34d399; /* text-emerald-400 */
  font-weight: 600; /* font-semibold */
  font-size: 0.875rem; /* text-sm */
  line-height: 1.25rem; /* line-height for sm */
  display: flex; /* flex */
  align-items: center; /* items-center */
  transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1); /* transition-transform duration-200 */
  text-decoration: none; /* remove underline for links */
  border: none; /* remove default button border */
  background: none; /* remove default button background */
  cursor: pointer;
  transform: translateX(0); /* Initial position */
}

.project-card:hover .project-view-button {
  transform: translateX(0.25rem); /* group-hover:translate-x-1 */
}

.project-view-button:hover {
  color: #6ee7b7; /* hover:text-emerald-300 */
}

.project-view-button svg {
  margin-left: 0.25rem; /* ml-1 */
  width: 1rem; /* size={16} */
  height: 1rem; /* size={16} */
  transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1); /* transition-transform */
}

/* --- View All Projects Button --- */
.all-projects-button-wrapper {
  text-align: center; /* text-center */
}

.all-projects-button {
  display: inline-flex; /* inline-flex */
  align-items: center; /* items-center */
  padding-left: 2rem; /* px-8 */
  padding-right: 2rem; /* px-8 */
  padding-top: 0.75rem; /* py-3 */
  padding-bottom: 0.75rem; /* py-3 */
  background-color: #1e293b; /* bg-slate-800 */
  border: 1px solid #4b5563; /* border border-slate-600 */
  color: #ffffff; /* text-white */
  border-radius: 0.5rem; /* rounded-lg */
  transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); /* transition-all duration-200 */
  text-decoration: none; /* remove underline for links */
  transform: translateX(0); /* Initial position */
}

.all-projects-button:hover {
  border-color: #10b981; /* hover:border-emerald-500 */
  color: #34d399; /* hover:text-emerald-400 */
}

.all-projects-button svg {
  margin-left: 0.5rem; /* ml-2 */
  width: 1.25rem; /* size={20} */
  height: 1.25rem; /* size={20} */
  transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1); /* transition-transform */
  transform: translateX(0); /* Initial position */
}

.all-projects-button:hover svg {
  transform: translateX(0.25rem); /* group-hover:translate-x-1 */
}

/* --- Section: Testimonials --- */
.testimonials-section {
  padding-top: 5rem; /* py-20 */
  padding-bottom: 5rem; /* py-20 */
  background-color: rgba(15, 23, 42, 0.5); /* bg-slate-900/50 */
}

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

/* --- Testimonials Header --- */
.testimonials-header {
  text-align: center; /* text-center */
  margin-bottom: 4rem; /* mb-16 */
}

.testimonials-title {
  font-size: 2.25rem; /* text-4xl */
  line-height: 2.5rem; /* Adjusted for 4xl */
  font-weight: 700; /* font-bold */
  color: #ffffff; /* text-white */
  margin-bottom: 1rem; /* mb-4 */
  font-family: "Anta", sans-serif;
}

.testimonials-description {
  font-size: 1.25rem; /* text-xl */
  line-height: 1.75rem; /* Adjusted for xl */
  color: #9ca3af; /* text-gray-400 */
  max-width: 48rem; /* max-w-3xl */
  margin-left: auto; /* mx-auto */
  margin-right: auto; /* mx-auto */
}

/* --- Testimonials Grid/Slider Layout (Static) --- */
.testimonials-grid {
  /* display: grid; 
  grid-template-columns: repeat(1, minmax(0, 1fr)); 
  gap: 2rem;  */
  width: 100%;
  overflow: hidden;
  height: fit-content;
}

/* --- Testimonial Card --- */
.testimonial-card {
  background-color: rgba(30, 41, 59, 0.5); /* bg-slate-800/50 */
  border: 1px solid #334155; /* border border-slate-700 */
  border-radius: 0.75rem; /* rounded-xl */
  padding: 2rem; /* p-8 */
  transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1); /* transition-all duration-300 */
}

.testimonial-card:hover {
  border-color: rgba(16, 185, 129, 0.5); /* hover:border-emerald-500/50 */
}

.testimonial-content-wrapper {
  display: flex; /* flex */
  align-items: flex-start; /* items-start */
  margin-bottom: 1.5rem; /* mb-6 */
  gap: 1rem; /* space-x-4 (replaced with gap for modern flexbox) */
}

.quote-icon {
  color: #34d399; /* text-emerald-400 */
  flex-shrink: 0; /* flex-shrink-0 */
  width: 1.5rem; /* size={24} */
  height: 1.5rem; /* size={24} */
}

.quote-text {
  color: #d1d5db; /* text-gray-300 */
  font-style: italic; /* italic */
  line-height: 1.625; /* leading-relaxed (approx) */
}

.testimonial-footer {
  display: flex; /* flex */
  align-items: center; /* items-center */
  justify-content: space-between; /* justify-between */
}

.reviewer-info-wrapper {
  display: flex; /* flex */
  align-items: center; /* items-center */
  gap: 1rem; /* space-x-4 (replaced with gap) */
}

.reviewer-image {
  width: 3rem; /* w-12 */
  height: 3rem; /* h-12 */
  border-radius: 9999px; /* rounded-full */
  object-fit: cover; /* object-cover */
}

.reviewer-name {
  color: #ffffff; /* text-white */
  font-weight: 600; /* font-semibold */
}

.reviewer-position {
  color: #9ca3af; /* text-gray-400 */
  font-size: 0.875rem; /* text-sm */
  line-height: 1.25rem; /* line-height for sm */
}

.reviewer-company {
  color: #34d399; /* text-emerald-400 */
  font-size: 0.875rem; /* text-sm */
  line-height: 1.25rem; /* line-height for sm */
}

.star-rating {
  display: flex; /* flex */
  gap: 0.25rem; /* space-x-1 */
}

.star-icon {
  color: #fbbf24; /* text-yellow-400 */
  fill: currentColor; /* fill-current */
  width: 1rem; /* size={16} */
  height: 1rem; /* size={16} */
}

.call-to-action-section {
  padding-top: 5rem; /* py-20 */
  padding-bottom: 5rem; /* py-20 */
  background-image: linear-gradient(
    to right,
    #0f172a,
    #1e293b,
    #0f172a
  ); /* bg-gradient-to-r from-slate-900 via-slate-800 to-slate-900 */
  position: relative; /* relative */
  overflow: hidden; /* overflow-hidden */
}

/* --- Background Effects --- */
.background-effects-wrapper {
  position: absolute; /* absolute */
  inset: 0; /* inset-0 */
}

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

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

.content-container {
  position: relative; /* relative */
  max-width: 56rem; /* max-w-4xl (768px) */
  margin-left: auto; /* mx-auto */
  margin-right: auto; /* mx-auto */
  padding-left: 1rem; /* px-4 */
  padding-right: 1rem; /* px-4 */
  text-align: center; /* text-center */
  z-index: 10; /* ensure content is above blobs */
}

.content-spacing {
  display: flex;
  flex-direction: column;
  gap: 2rem; /* space-y-8 */
}

/* --- Ready to Launch Badge --- */
.launch-badge {
  display: inline-flex; /* inline-flex */
  align-items: center; /* items-center */
  align-self: center; /* self-center */
  padding-left: 1rem; /* px-4 */
  padding-right: 1rem; /* px-4 */
  padding-top: 0.5rem; /* py-2 */
  padding-bottom: 0.5rem; /* py-2 */
  background-color: rgba(16, 185, 129, 0.1); /* bg-emerald-500/10 */
  border: 1px solid rgba(16, 185, 129, 0.2); /* border border-emerald-500/20 */
  border-radius: 9999px; /* rounded-full */
  color: #34d399; /* text-emerald-400 */
  font-size: 0.875rem; /* text-sm */
  line-height: 1.25rem; /* line-height for sm */
  font-weight: 500; /* font-medium */
}

.launch-badge svg {
  margin-right: 0.5rem; /* mr-2 */
  width: 1rem; /* size={16} */
  height: 1rem; /* size={16} */
}

/* --- Main Title --- */
.main-title {
  font-size: 2.25rem; /* text-4xl */
  line-height: 2.5rem; /* leading-tight */
  font-weight: 700; /* font-bold */
  color: #ffffff; /* text-white */
  font-family: "Anta", sans-serif;
}

.main-title-gradient {
  background-image: linear-gradient(
    to right,
    #34d399,
    #60a5fa
  ); /* bg-gradient-to-r from-emerald-400 to-blue-400 */
  -webkit-background-clip: text; /* bg-clip-text */
  -webkit-text-fill-color: transparent; /* text-transparent */
  background-clip: text; /* Fallback for non-webkit browsers */
  color: transparent; /* Fallback for non-webkit browsers */
  font-family: "Anta", sans-serif;
}

/* --- Description Paragraph --- */
.description-paragraph {
  font-size: 1.25rem; /* text-xl */
  line-height: 1.75rem; /* leading-relaxed */
  color: #d1d5db; /* text-gray-300 */
  max-width: 42rem; /* max-w-2xl (672px) */
  margin-left: auto; /* mx-auto */
  margin-right: auto; /* mx-auto */
}

/* --- Call to Action Buttons --- */
.button-group {
  display: flex; /* flex */
  flex-direction: column; /* flex-col */
  gap: 1rem; /* gap-4 */
  justify-content: center; /* justify-center */
}

.button-primary {
  background-image: linear-gradient(
    to right,
    #10b981,
    #059669
  ); /* from-emerald-500 to-emerald-600 */
  color: #ffffff; /* text-white */
  padding-left: 2rem; /* px-8 */
  padding-right: 2rem; /* px-8 */
  padding-top: 1rem; /* py-4 */
  padding-bottom: 1rem; /* py-4 */
  border-radius: 0.5rem; /* rounded-lg */
  font-weight: 600; /* font-semibold */
  display: flex; /* flex */
  align-items: center; /* items-center */
  justify-content: center; /* justify-center */
  text-decoration: none; /* remove underline for links */
  transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); /* transition-all duration-200 */
  transform: scale(1); /* Initial scale */
  position: relative; /* acts as group for hover */
}

.button-primary:hover {
  background-image: linear-gradient(
    to right,
    #059669,
    #047857
  ); /* hover:from-emerald-600 hover:to-emerald-700 */
  transform: scale(1.05); /* hover:scale-105 */
}

.button-primary svg {
  margin-left: 0.5rem; /* ml-2 */
  width: 1.25rem; /* size={20} */
  height: 1.25rem; /* size={20} */
  transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1); /* transition-transform */
  transform: translateX(0); /* Initial position */
}

.button-primary:hover svg {
  transform: translateX(0.25rem); /* group-hover:translate-x-1 */
}

.button-secondary {
  border: 1px solid #4b5563; /* border border-gray-600 */
  color: #ffffff; /* text-white */
  padding-left: 2rem; /* px-8 */
  padding-right: 2rem; /* px-8 */
  padding-top: 1rem; /* py-4 */
  padding-bottom: 1rem; /* py-4 */
  border-radius: 0.5rem; /* rounded-lg */
  font-weight: 600; /* font-semibold */
  text-decoration: none; /* remove underline for links */
  transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); /* transition-all duration-200 */
}

.button-secondary:hover {
  border-color: #34d399; /* hover:border-emerald-400 */
  color: #34d399; /* hover:text-emerald-400 */
}

/* --- Features Grid --- */
.features-grid {
  display: grid; /* grid */
  grid-template-columns: repeat(1, minmax(0, 1fr)); /* grid-cols-1 */
  gap: 2rem; /* gap-8 */
  padding-top: 2rem; /* pt-8 */
}

.feature-item {
  text-align: center; /* text-center */
  display: flex; /* flex */
  align-items: center; /* items-center */
  flex-direction: column;
}

.feature-title {
  font-size: 1.5rem; /* text-2xl */
  line-height: 2rem; /* line-height for 2xl */
  font-weight: 700; /* font-bold */
  color: #ffffff; /* text-white */
  margin-bottom: 0.5rem; /* mb-2 */
}

.feature-description {
  color: #9ca3af; /* text-gray-400 */
}

/* --- Responsive Adjustments --- */
@media (min-width: 640px) {
  /* sm breakpoint */
  .hero-content-wrapper {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  } /* sm:px-6 */
  .hero-button-group {
    flex-direction: row;
  } /* sm:flex-row */

  .button-group {
    flex-direction: row;
  } /* sm:flex-row */

  .services-container {
    padding-left: 1.5rem; /* sm:px-6 */
    padding-right: 1.5rem; /* sm:px-6 */
  }

  .tech-main-container {
    padding-left: 1.5rem; /* sm:px-6 */
    padding-right: 1.5rem; /* sm:px-6 */
  }

  .portfolio-container {
    padding-left: 1.5rem; /* sm:px-6 */
    padding-right: 1.5rem; /* sm:px-6 */
  }
  .testimonials-container {
    padding-left: 1.5rem; /* sm:px-6 */
    padding-right: 1.5rem; /* sm:px-6 */
  }

  .content-container {
    padding-left: 1.5rem; /* sm:px-6 */
    padding-right: 1.5rem; /* sm:px-6 */
  }
  .hero-button-group {
    flex-direction: row; /* sm:flex-row */
  }

  .button-group {
    flex-direction: row; /* sm:flex-row */
  }
  .features-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)); /* sm:grid-cols-3 */
  }
}

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

  .services-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)); /* md:grid-cols-2 */
  }

  .tech-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)); /* md:grid-cols-3 */
  }
  /* .testimonials-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)); 
  } */
}

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

  .services-container {
    padding-left: 2rem; /* lg:px-8 */
    padding-right: 2rem; /* lg:px-8 */
  }
  .services-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)); /* lg:grid-cols-3 */
  }
  .section-title {
    font-size: 2.25rem; /* Ensure consistent heading size */
  }

  .tech-main-container {
    padding-left: 2rem; /* lg:px-8 */
    padding-right: 2rem; /* lg:px-8 */
  }
  .tech-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)); /* lg:grid-cols-4 */
  }

  .portfolio-container {
    padding-left: 2rem; /* lg:px-8 */
    padding-right: 2rem; /* lg:px-8 */
  }
  .project-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)); /* lg:grid-cols-3 */
  }
  .testimonials-container {
    padding-left: 2rem; /* lg:px-8 */
    padding-right: 2rem; /* lg:px-8 */
  }

  .content-container {
    padding-left: 2rem; /* lg:px-8 */
    padding-right: 2rem; /* lg:px-8 */
  }
  .main-title {
    font-size: 3.75rem; /* lg:text-6xl */
    line-height: 1; /* reset line-height for 6xl usually is 1 */
  }
}

/* Swiper */

.swiper-slide {
  height: fit-content;
}