@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,700;1,400;1,700&family=Manrope:wght@400;500;600;700;800&display=swap');

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  background-color: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img {
  display: block;
  max-width: 100%;
}

a {
  text-decoration: none;
  color: inherit;
}

ul, ol {
  list-style: none;
}

button {
  border: none;
  background: none;
  cursor: pointer;
  font: inherit;
}

input, select, textarea {
  border: none;
  outline: none;
  font: inherit;
}

:root {
  --color-bg:           #fafaf7;
  --color-bg-light:     #f5f4f0;
  --color-bg-card:      #fafaf8;
  --color-dark:         #0a0a0a;
  --color-text:         #0a0a0a;
  --color-text-muted:   #8a8a8a;
  --color-text-80:      rgba(10, 10, 10, 0.80);
  --color-primary:      #3e64ff;
  --color-primary-light:#e1e7ff;
  --color-primary-bg:   #eff2ff;
  --color-primary-border:#cdd7ff;
  --color-primary-mid:  #6f8bff;
  --color-border:       #e8e8e4;
  --color-border-light: #ddd;
  --color-white:        #fff;
  --color-white-fafaf8: #fafaf8;

  --font-body:    'Manrope', sans-serif;
  --font-display: 'Playfair Display', serif;

  --container-max:  1320px;
  --section-padding-x: 60px;
  --section-padding-y: 128px;

  --radius-sm:   8px;
  --radius-md:   14px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-2xl:  32px;
  --radius-pill: 27px;
  --radius-full: 9999px;

  --transition: 0.25s ease;
}

.container {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--section-padding-x);
}

[id] {
  scroll-margin-top: 80px;
}

@media (max-width: 1199px) {
  :root {
    --section-padding-x: 40px;
    --section-padding-y: 80px;
  }
}

@media (max-width: 767px) {
  :root {
    --section-padding-x: 20px;
    --section-padding-y: 60px;
  }
}