/* ----------------------------------------------------
   Global Styles
   ---------------------------------------------------- */

  @font-face {
  font-family: 'CenturyGothic'; /* You can name this whatever you want */
  src: url('../fonts/centurygothic.woff2') format('woff2'), /* Path to your font */
       url('../fonts/centurygothic.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

/* Import Google Fonts */

@import url('https://fonts.googleapis.com/css2?family=Syncopate:wght@400;700&display=swap');



html {
  font-size: 16px; /* Base size for Tailwind (1rem = 16px) */
  scroll-behavior: smooth;
}

body {
  background-color: #ffffff; /* White background */
  color: #000000; /* Default text color */
  font-family: 'CenturyGothic', sans-serif;
  font-weight: 400;
  line-height: 1.6;
}


/* Headings - keep cleaner look */
h1:not(.banner-text),
h2:not(.banner-text),
h3:not(.banner-text),
h4:not(.banner-text),
h5:not(.banner-text),
h6:not(.banner-text),
p:not(.banner-text) {
  font-family: 'CenturyGothic', sans-serif;
  font-weight: 400;
  line-height: 1.2;
}



/* Anchor links */
a {
  text-decoration: none;
  color: inherit;
  transition: color 0.2s ease-in-out;
}

a:hover {
  color: #444; /* Subtle hover */
}

.nav-active {
  @apply bg-black text-white px-4 py-1 rounded-full; 
}