/* Import Google Fonts */
@import url('https://fonts.googleapis.com/css2?display=swap&family=Noto+Sans:wght@400;500;700;900&family=Space+Grotesk:wght@400;500;700');
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined');

/* Define root variables and base styles */
:root {
  --primary-color: #0d7ff2;
  --background-dark: #101a23;
  --background-light: #18232f;
  --border-color: #223649;
  --text-white: #ffffff;
  --text-gray-300: #d1d5db;
  --text-gray-400: #9ca3af;
}

body {
  background-color: var(--background-dark);
  font-family: "Space Grotesk", "Noto Sans", sans-serif;
  color: var(--text-white);
  overflow-x: hidden;
}

.bg-grid {
    background-image:
        linear-gradient(rgba(34, 54, 73, 0.05) 1px, transparent 1px),
        linear-gradient(to right, rgba(34, 54, 73, 0.05) 1px, transparent 1px);
    background-size: 2rem 2rem;
    background-position: center center;
}

/* Glow effect for hero elements */
.glow {
  box-shadow: 0 0 10px 2px var(--primary-color), 0 0 20px 5px var(--primary-color), 0 0 40px 10px var(--primary-color);
}