.material-symbols-outlined {
  font-variation-settings:
    'FILL' 0,
    'wght' 400,
    'GRAD' 0,
    'opsz' 24
}

:root {
  --bg: #F6F8FA;
  --surface: #FFFFFF;
  --tech-dark: #071A2B;
  --tech-accent: #0FB3FF;
  --teal: #0AB7D7;
  --gold: #C9A44A;
  --muted: #6B7885;
  --clear: #d7dbdf;
  --radius: 10px;
  --shadow: 0 10px 30px rgba(2, 6, 23, 0.12);
  --maxw: 1200px;
}

* {
  box-sizing: border-box;
  scroll-behavior: smooth;
}

html,
body {
  min-height: 100%;
  margin: 0;
}

body {
  margin: 0;
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  background: white;
  color: var(--tech-dark);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.wrap {
  max-width: var(--maxw);
  margin: auto;
  padding: 0 20px;
}

@media (max-width:900px) {

            nav.main-nav {
                display: none
            }
            .mobile-only {
                display: inline-flex
            }
        }

        @media (min-width:901px) {
            .mobile-only {
                display: none
            }
        }