@font-face {
  font-family: 'Katibeh'; /* Use a custom name for the local file */
  src: url('../fonts/Katibeh/Katibeh-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap; /* Best practice for loading */
}

@font-face {
  font-family: 'Inter'; /* Use a custom name for the local file */
  src: url('../fonts/Inter/static/Inter_28pt-SemiBold.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap; /* Best practice for loading */
}

@font-face {
  font-family: 'Roboto'; /* Use a custom name for the local file */
  src: url('../fonts/Roboto/static/Roboto-ExtraLight.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap; /* Best practice for loading */
}

@tailwind base;
@tailwind components;
@tailwind utilities;

/* Base body font */
body {
  @apply font-body bg-background text-text-primary antialiased;
}

/* Navigation Links */
.nav-link {
  @apply relative font-nav font-medium text-nav-text transition-colors duration-300;
}

.nav-link::after {
  content: '';
  @apply absolute -bottom-1 left-0 w-0 h-0.5 bg-accent transition-all duration-300;
}

.nav-link:hover::after,
.nav-active::after {
  @apply w-full;
}

.nav-link:hover,
.nav-active {
  @apply text-nav-text-hover;
}

/* Order Button */
.order-btn {
  @apply bg-accent text-white px-6 py-2 rounded-full font-medium hover:bg-primary transition-colors duration-300;
}

/* Hover Effects */
.card-hover {
  @apply transition-all duration-300 ease-in-out;
}
.card-hover:hover {
  @apply shadow-lg -translate-y-1;
}

.image-scale {
  @apply transition-transform duration-500 ease-in-out;
}
.image-scale:hover {
  @apply scale-105;
}

.overlay {
  @apply opacity-0 transition-opacity duration-300 flex items-center justify-center bg-black/50 text-white font-semibold;
}
.gallery-item:hover .overlay {
  @apply opacity-100;
}

/* Hero Title Spacing */
.hero-title span {
  display: inline-block;
  margin: 0 0.03em;
}

.hero-title span:nth-child(2) {
  /*margin-right: 0.4em;*/
}

/* Footer Social Icons */
footer .social-link {
  @apply transition-colors duration-300;
}

footer .social-link:hover {
  @apply text-accent;
}