:root {
  --bg-primary: #1e1e21;
  --bg-secondary: #222225;
}

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

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg-primary);
  font-family: 'Satoshi', sans-serif;
  width: 100%;
  overflow-x: hidden;
}

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


.container {
  width: 100%;
  max-width: 1632px;
  margin: 0 auto;
  padding: 0 20px;
}

.font-18 {
   font-size: clamp(14px, calc(0.347vw + 11.33px), 18px);
   line-height: 1.55;
}

.font-48 {
  font-size: clamp(24px, calc(1.538vw + 18.46px), 48px);
line-height: 1.08;
}

.bottom-site {
   position: relative;
  background-color: #1d1d20; /* sua base escura */
  background-image: 
    linear-gradient(
      to bottom,
      #222225 0%,
      rgba(34, 34, 37, 0.95) 10%,
      rgba(34, 34, 37, 0.8) 20%,
      rgba(34, 34, 37, 0.4) 35%,
      rgba(34, 34, 37, 0) 50%
    ),
    url('../assets/bottom.jpeg');

  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

@media (max-width: 768px) {
  .container {
    padding: 0 40px;
  }
}

@media (max-width: 520px) {
  .container {
    padding: 0 20px;
  }
}