@font-face {
    font-family: 'Almarai';
    src: url('/fonts/almarai/Almarai-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'Almarai';
    src: url('/fonts/almarai/Almarai-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Almarai';
    src: url('/fonts/almarai/Almarai-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: 'Almarai';
    src: url('/fonts/almarai/Almarai-ExtraBold.ttf') format('truetype');
    font-weight: 800;
    font-style: normal;
}

body {
  font-family: 'Almarai', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  background-color: #020617;
  color: #f8fafc;
  margin: 0;
  overflow-x: hidden;
}

.mesh-gradient {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  overflow: hidden;
}

.blob {
  position: absolute;
  filter: blur(80px);
  opacity: 0.4;
  border-radius: 50%;
  animation: float 20s infinite alternate;
}

@keyframes float {
  from { transform: translate(0, 0) scale(1); }
  to { transform: translate(10%, 10%) scale(1.1); }
}