/* ---------------------------------------------------
   FONT FACE
--------------------------------------------------- */

@font-face {
  font-family: "Familjen Grotesk";
  src:
    url("../fonts/familjen-grotesk/familjen-grotesk-latin-400-normal.woff2") format("woff2"),
    url("../fonts/familjen-grotesk/familjen-grotesk-latin-400-normal.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Familjen Grotesk";
  src:
    url("../fonts/familjen-grotesk/familjen-grotesk-latin-500-normal.woff2") format("woff2"),
    url("../fonts/familjen-grotesk/familjen-grotesk-latin-500-normal.woff") format("woff");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Familjen Grotesk";
  src:
    url("../fonts/familjen-grotesk/familjen-grotesk-latin-600-normal.woff2") format("woff2"),
    url("../fonts/familjen-grotesk/familjen-grotesk-latin-600-normal.woff") format("woff");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Familjen Grotesk";
  src:
    url("../fonts/familjen-grotesk/familjen-grotesk-latin-700-normal.woff2") format("woff2"),
    url("../fonts/familjen-grotesk/familjen-grotesk-latin-700-normal.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ---------------------------------------------------
   GLOBAL
--------------------------------------------------- */

html {
  scroll-behavior: smooth;
}

body,
p {
  font-family: "Familjen Grotesk", sans-serif;
}

/* ---------------------------------------------------
   SCROLLBAR
--------------------------------------------------- */

/* Chrome, Edge, Safari */
::-webkit-scrollbar {
  width: 4px;
}

::-webkit-scrollbar-track {
  background: #f5f7fb;
}

::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 999px;
  transition: background 0.3s ease;
}

::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}

/* Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: #cbd5e1 #f5f7fb;
}

/* ---------------------------------------------------
   HERO OVERLAY
--------------------------------------------------- */

.hero-overlay {
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.35),
    rgba(0, 0, 0, 0.55)
  );
}