/* Basic Reset & Body Styles */
body {
  margin: 0;
  font-family: sans-serif;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.flex-container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background-color: #0a0a0a; /* bg-gray-950 */
  color: #ffffff; /* text-white */
}

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

/* Header */
.header {
  padding-left: 1rem; /* px-4 */
  padding-right: 1rem; /* px-4 */
  height: 5rem; /* h-20 */
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #000000; /* bg-black */
}

@media (min-width: 1024px) {
  /* lg */
  .header {
    padding-left: 1.5rem; /* lg:px-6 */
    padding-right: 1.5rem; /* lg:px-6 */
  }
}

.header-logo-link {
  display: flex;
  align-items: center;
  justify-content: center;
}

.header-logo-img {
  height: auto;
  width: auto;
  object-fit: contain;
}

/* Main Content */
.main-content {
  flex: 1; /* flex-1 */
}

/* Hero Section */
.hero-section {
  width: 100%; /* w-full */
  padding-top: 3rem; /* py-12 */
  padding-bottom: 3rem; /* py-12 */
  background: linear-gradient(to bottom, #0a0a0a, #171717); /* bg-gradient-to-b from-gray-950 to-gray-900 */
  text-align: center; /* text-center */
}

@media (min-width: 768px) {
  /* md */
  .hero-section {
    padding-top: 6rem; /* md:py-24 */
    padding-bottom: 6rem; /* md:py-24 */
  }
}

@media (min-width: 1024px) {
  /* lg */
  .hero-section {
    padding-top: 8rem; /* lg:py-32 */
    padding-bottom: 8rem; /* lg:py-32 */
  }
}

@media (min-width: 1280px) {
  /* xl */
  .hero-section {
    padding-top: 12rem; /* xl:py-48 */
    padding-bottom: 12rem; /* xl:py-48 */
  }
}

.container {
  padding-left: 1rem; /* px-4 */
  padding-right: 1rem; /* px-4 */
  margin-left: auto;
  margin-right: auto;
  max-width: 1280px; /* Equivalent to container in Next.js */
}

@media (min-width: 768px) {
  /* md */
  .container {
    padding-left: 1.5rem; /* md:px-6 */
    padding-right: 1.5rem; /* md:px-6 */
  }
}

.hero-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem; /* space-y-6 */
}

.hero-title {
  font-size: 2.25rem; /* text-4xl */
  font-weight: 700; /* font-bold */
  letter-spacing: -0.05em; /* tracking-tighter */
  color: #facc15; /* text-yellow-400 */
  filter: drop-shadow(0 4px 3px rgba(0, 0, 0, 0.07)) drop-shadow(0 2px 2px rgba(0, 0, 0, 0.06)); /* drop-shadow-lg */
}

@media (min-width: 640px) {
  /* sm */
  .hero-title {
    font-size: 3rem; /* sm:text-5xl */
  }
}

@media (min-width: 768px) {
  /* md */
  .hero-title {
    font-size: 3.75rem; /* md:text-6xl */
  }
}

@media (min-width: 1024px) {
  /* lg */
  .hero-title {
    font-size: 4.5rem; /* lg:text-7xl/none */
    line-height: 1; /* lg:text-7xl/none */
  }
}

.hero-description {
  margin-left: auto;
  margin-right: auto;
  max-width: 50rem; /* max-w-[800px] */
  font-size: 1.125rem; /* text-lg */
  color: #d1d5db; /* text-gray-300 */
}

@media (min-width: 768px) {
  /* md */
  .hero-description {
    font-size: 1.25rem; /* md:text-xl */
  }
}

.hero-buttons {
  display: flex;
  gap: 1rem; /* space-x-4 */
}

.button {
  display: inline-flex;
  height: 3rem; /* h-12 */
  align-items: center;
  justify-content: center;
  border-radius: 0.375rem; /* rounded-md */
  padding-left: 2rem; /* px-8 */
  padding-right: 2rem; /* px-8 */
  font-size: 1rem; /* text-base */
  font-weight: 500; /* font-medium */
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06); /* shadow */
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow,
    transform, filter, backdrop-filter; /* transition-colors */
  transition-duration: 150ms;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  text-decoration: none; /* Remove underline from links */
  cursor: pointer;
}

.primary-button {
  background-color: #f59e0b; /* bg-yellow-500 */
  color: #0a0a0a; /* text-gray-950 */
}

.primary-button:hover {
  background-color: #eab308; /* hover:bg-yellow-600 */
}

.primary-button:focus-visible {
  outline: 2px solid transparent;
  outline-offset: 2px;
  box-shadow: 0 0 0 2px #f59e0b, 0 0 0 4px #0a0a0a; /* focus-visible:ring-2 focus-visible:ring-yellow-500 focus-visible:ring-offset-2 focus-visible:ring-offset-gray-950 */
}

.outline-button {
  border: 1px solid #f59e0b; /* border border-yellow-500 */
  background-color: transparent; /* bg-transparent */
  color: #f59e0b; /* text-yellow-500 */
}

.outline-button:hover {
  background-color: #f59e0b; /* hover:bg-yellow-500 */
  color: #0a0a0a; /* hover:text-gray-950 */
}

.outline-button:focus-visible {
  outline: 2px solid transparent;
  outline-offset: 2px;
  box-shadow: 0 0 0 2px #f59e0b, 0 0 0 4px #0a0a0a; /* focus-visible:ring-2 focus-visible:ring-yellow-500 focus-visible:ring-offset-2 focus-visible:ring-offset-gray-950 */
}

/* Services Section */
.services-section {
  width: 100%; /* w-full */
  padding-top: 3rem; /* py-12 */
  padding-bottom: 3rem; /* py-12 */
  background-color: #171717; /* bg-gray-900 */
}

@media (min-width: 768px) {
  /* md */
  .services-section {
    padding-top: 6rem; /* md:py-24 */
    padding-bottom: 6rem; /* md:py-24 */
  }
}

@media (min-width: 1024px) {
  /* lg */
  .services-section {
    padding-top: 8rem; /* lg:py-32 */
    padding-bottom: 8rem; /* lg:py-32 */
  }
}

.services-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2rem; /* space-y-8 */
  text-align: center; /* text-center */
}

.services-title {
  font-size: 1.875rem; /* text-3xl */
  font-weight: 700; /* font-bold */
  letter-spacing: -0.05em; /* tracking-tighter */
  color: #facc15; /* text-yellow-400 */
}

@media (min-width: 640px) {
  /* sm */
  .services-title {
    font-size: 2.25rem; /* sm:text-4xl */
  }
}

@media (min-width: 768px) {
  /* md */
  .services-title {
    font-size: 3rem; /* md:text-5xl */
  }
}

.services-grid {
  display: grid;
  width: 100%; /* w-full */
  max-width: 72rem; /* max-w-6xl */
  grid-template-columns: 1fr; /* grid-cols-1 */
  gap: 2rem; /* gap-8 */
  margin-left: auto;
  margin-right: auto;
  margin-top: 2rem; /* Added margin-top for spacing from title */
}

@media (min-width: 768px) {
  /* md */
  .services-grid {
    grid-template-columns: repeat(3, 1fr); /* md:grid-cols-3 */
  }
}

.service-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem; /* space-y-4 */
  padding: 1.5rem; /* p-6 */
  border-radius: 0.5rem; /* rounded-lg */
  background-color: #27272a; /* bg-gray-800 */
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); /* shadow-lg */
}

.service-image {
  height: auto;
  width: 100%; /* w-full */
  object-fit: contain;
}

.service-card-title {
  font-size: 1.25rem; /* text-xl */
  font-weight: 600; /* font-semibold */
  color: #ffffff; /* text-white */
}

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

/* Footer */
.footer {
  display: flex;
  flex-direction: column;
  gap: 0.5rem; /* gap-2 */
  padding-top: 1.5rem; /* py-6 */
  padding-bottom: 1.5rem; /* py-6 */
  width: 100%; /* w-full */
  flex-shrink: 0; /* shrink-0 */
  align-items: center;
  padding-left: 1rem; /* px-4 */
  padding-right: 1rem; /* px-4 */
  border-top: 1px solid #27272a; /* border-t border-gray-800 */
  background-color: #000000; /* bg-black */
  color: #9ca3af; /* text-gray-400 */
}

@media (min-width: 640px) {
  /* sm */
  .footer {
    flex-direction: row; /* sm:flex-row */
  }
}

@media (min-width: 768px) {
  /* md */
  .footer {
    padding-left: 1.5rem; /* md:px-6 */
    padding-right: 1.5rem; /* md:px-6 */
  }
}

.footer-copyright {
  font-size: 0.75rem; /* text-xs */
}

.footer-nav {
  display: flex;
  gap: 1rem; /* gap-4 */
}

@media (min-width: 640px) {
  /* sm */
  .footer-nav {
    margin-left: auto; /* sm:ml-auto */
    gap: 1.5rem; /* sm:gap-6 */
  }
}

.footer-link {
  font-size: 0.75rem; /* text-xs */
  color: #9ca3af; /* text-gray-400 */
  text-decoration: none;
}

.footer-link:hover {
  text-decoration: underline; /* hover:underline */
  text-underline-offset: 4px; /* underline-offset-4 */
}