:root {
  /* Colors */
  --color-black: #000000;
  --color-white: #ffffff;

  /* Fonts */
  --font-primary: 'Sofia Pro', system-ui, -apple-system,
    BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  --font-weight-ultralight: 100;
  --font-weight-extralight: 200;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  /* --font-weight-semibold: 600; */
  --font-weight-bold: 700;

  /* --font-primary: 'Sofia Pro ExtraLight', system-ui, -apple-system,
    BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  --font-secondary: 'Sofia Pro Medium', system-ui, -apple-system,
    BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; */

  /* Borders */
  --border-radius-pill: 30px;
  --border-default: 1px solid var(--color-black);

  /* Scale */
  --font-xs: 0.75rem;   /* 12px */
  --font-sm: 0.875rem;  /* 14px */
  --font-md: 1rem;      /* 16px */
  --font-lg: 1.125rem;  /* 18px */ 
  --font-1xl: 1.5rem;   /* 24px */
  --font-2xl: 2rem;     /* 32px */
  --font-3xl: 2.5rem;   /* 40px */
  --font-4xl: 3rem;     /* 48px */
  --font-5xl: 3.5rem;   /* 56px */

  /* Spacing */
  --space-sm: 10px;
  --space-lg: 30px;

  /* Letter Spacing */
  --letter-spacing-base: 2px;
}

html {
    scroll-behavior: smooth;
}

body {
  background-position: center;
  background-repeat: repeat;
  background-size: cover;
}

@media (max-width: 768px) {
    body {
        background-image: var(--bg-mobile);
    }
}

@media (min-width: 769px) {
    body {
        background-image: var(--bg-desktop);
    }
}

/* Remove o espaço acima das seções ao usar anchor */
section[id] {
    scroll-margin-top: 0;
}

.what-we-do-section,
.our-tools-section,
.why-choose-us-section,
.technology-solutions-section {
    margin-top: 0;
}

.btn {
  border: var(--border-default);
  padding: var(--space-sm) var(--space-lg);
  border-radius: var(--border-radius-pill);
  font-family: var(--font-primary);
  font-weight: var(--font-weight-regular);
  font-size: var(--font-sm);
  letter-spacing: var(--letter-spacing-base);
  color: var(--color-black);
  display: table;
  cursor: pointer;
  text-transform: uppercase;
}

.btn:hover{
    background-color: var(--color-black);
    color: var(--color-white);
    transition: 0.2s; 
}