.header {
  transition: background-color 0.3s;
}
.fixed-header {
  position: fixed !important;
  top: 0;
  background-color: white;
  backdrop-filter: blur(40px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  opacity: 1 !important;
  z-index: 99;
}

/* MatterSQ */
@font-face {
  font-family: "MatterSQ-Bold";
  src: url("../font/MatterSQ/MatterSQ-Bold.ttf");
}

@font-face {
  font-family: "MatterSQ-Light";
  src: url("../font/MatterSQ/MatterSQ-Light.ttf");
}
@font-face {
  font-family: "MatterSQ-Medium";
  src: url("../font/MatterSQ/MatterSQ-Medium.ttf");
}

@font-face {
  font-family: "MatterSQ-Regular";
  src: url("../font/MatterSQ/MatterSQ-Regular.ttf");
}

@font-face {
  font-family: "MatterSQ-SemiBold";
  src: url("../font/MatterSQ/MatterSQ-SemiBold.ttf");
}

@font-face {
  font-family: "fusion-pixel";
  src: url("../font/fusion-pixel/fusion-pixel.ttf");
}