html {
  scroll-behavior: smooth;
  scroll-padding-top: 90px;
}
body {
  font-family: "DM Sans", sans-serif;
}
.display {
  font-family: "Manrope", sans-serif;
  letter-spacing: -0.045em;
}
.sina-overlay {
    position: absolute;
    background-color: #0000006b;
    width: 100%;
    height: 100%;
}
.hero-overlay {
  background: linear-gradient(
    90deg,
    rgba(24, 25, 22, 0.86) 0%,
    rgba(24, 25, 22, 0.64) 48%,
    rgba(24, 25, 22, 0.12) 100%
  );
}
.grid-pattern {
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.055) 1px, transparent 1px);
  background-size: 42px 42px;
}
.project-card img,
.product-card img {
  transition: transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.project-card:hover img,
.product-card:hover img {
  transform: scale(1.055);
}
.focus-ring:focus-visible {
  outline: 3px solid #b85c38;
  outline-offset: 4px;
}