/* ========================================
   RESET GLOBAL
======================================== */

*,
*::before,
*::after {

  margin: 0;
  padding: 0;
  box-sizing: border-box;

}

/* ========================================
   HTML
======================================== */

html {

  scroll-behavior: smooth;

}

/* ========================================
   BODY
======================================== */

body {

  background: var(--bg-primary);

  color: var(--text-primary);

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

  overflow-x: hidden;

}

/* ========================================
   IMAGENS
======================================== */

img {

  display: block;

  max-width: 100%;

  height: auto;

}

/* ========================================
   LINKS
======================================== */

a {

  text-decoration: none;

  color: inherit;

}

/* ========================================
   LISTAS
======================================== */

ul,
ol {

  list-style: none;

}

/* ========================================
   CONTAINER GLOBAL
======================================== */

.container {

  width: var(--container);

  margin-inline: auto;

}

/* ========================================
   SEÇÕES
======================================== */

.section {

  padding:
    var(--section-spacing) 0;

}

/* ========================================
   BOTÕES
======================================== */

.btn {

  display: inline-block;

  padding: 1rem 2rem;

  border-radius: 999px;

  transition:
    var(--transition-normal);

}

.btn-primary {

  background:
    var(--accent-color);

  color: black;

}

.btn-primary:hover {

  transform:
    translateY(-2px);

}

.btn-outline {

  border:
    1px solid rgba(255,255,255,.20);

}

.btn-secondary {

  background: transparent;

  color: var(--accent-color);

  border: 2px solid var(--accent-color);

}

.btn-secondary:hover {

  background: var(--accent-color);

  color: #000;

}

/* ========================================
   UTILITÁRIOS
======================================== */

.text-center {

  text-align: center;

}

.hidden {

  display: none;

}