:root {
  --font-display: "Playfair Display", serif;
  --font-body: "Manrope", sans-serif;
  --color-background: #f7f9fb;
  --color-surface: #ffffff;
  --color-primary: #003527;
  --color-secondary: #006c49;
  --color-tertiary: #4f1f19;
  --color-outline: #707974;
  --shadow-soft: 0 4px 20px rgba(0, 0, 0, 0.04);
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-body);
}

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

.progress-ring-circle {
  transition: stroke-dashoffset 0.35s;
  transform: rotate(-90deg);
  transform-origin: 50% 50%;
}

.mobile-mockup {
  position: relative;
  width: 280px;
  /*height: 560px;*/
  height: 600px;
  background: #191c1e;
  border-radius: 32px;
  border: 8px solid #2d3133;
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
}

.mobile-screen {
  width: 100%;
  height: 100%;
  background: #fff;
  overflow-y: auto;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.mobile-screen::-webkit-scrollbar {
  display: none;
}