/* Reset */

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

html {
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

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

ul,
ol {
  list-style: none;
}

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

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
  height: auto;
}

body {
  display: flex;
  flex-direction: column;
  list-style-type: none;
  font-family: "Formative Trial", sans-serif;
  font-weight: 400;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-color: var(--white);
  width: 100%;
}

/* Fonts Import  */

/* Light - 300 */
@font-face {
  font-family: "Formative Trial";
  src: url("/assets/fonts/Formative Trial Light/Formative Trial Light.woff2")
    format("woff2");
  font-weight: 300;
  font-style: normal;
}

/* Regular - 400 */
@font-face {
  font-family: "Formative Trial";
  src: url("/assets/fonts/Formative Trial Book/Formative Trial Book.woff2")
    format("woff2");
  font-weight: 400;
  font-style: normal;
}

/* Medium - 500 */
@font-face {
  font-family: "Formative Trial";
  src: url("/assets/fonts/Formative Trial Medium/Formative Trial Medium.woff2")
    format("woff2");
  font-weight: 500;
  font-style: normal;
}

/* Semi-Bold - 600 */
@font-face {
  font-family: "Formative Trial";
  src: url("/assets/fonts/Formative Trial Semi-Bold/Formative Trial Semi-Bold.woff2")
    format("woff2");
  font-weight: 600;
  font-style: normal;
}

/* Bold - 700 */
@font-face {
  font-family: "Formative Trial";
  src: url("/assets/fonts/Formative Trial Bold/Formative Trial Bold.woff2")
    format("woff2");
  font-weight: 700;
  font-style: normal;
}

/* Variáveis de cores */

:root {
  /* Cores de Texto */
  --text-primary: #101828;
  --text-secondary: #667085;
  --text-tertiary: #cecece;
  --text-quaternary: #f4f4f4;
  --text-white: #ffffff;
  --text-black: #000000;
  --text-label: #344054;
  --text-link: #003049;

  /* Cores de Fundo */
  --background-primary: #ffffff;
  --background-secondary: #f5f5f5;
  --background-tertiary: #101828;
  --background-quaternary: #01254d;
  --background-button: linear-gradient(62deg, #101828 0%, #233250 100%);
  --background-button-hover: #1e293b;
  --background-overlay: rgba(16, 24, 40, 0.54);
  --background-newsletter-input: #dedede;
  --background-newsletter-button-hover: #f3f4f6;

  /* Cores de Borda */
  --border-primary: #d0d5dd;
  --border-secondary: #243961;
  --border-tertiary: rgba(16, 24, 40, 0.151);
  --border-focus: #3b82f6;
  --border-blog: #2d37481a;
  --border-footer: #2d3748b6;

  /* Cores de Sombra */
  --box-shadow-primary: 5px 4px 4px rgba(0, 0, 0, 0.25);
  --box-shadow-inset: 0 0 8px 4px rgba(0, 0, 0, 0.25) inset;
  --box-shadow-focus: 0 0 0 3px rgba(59, 130, 246, 0.2);

  /* Outras Cores */
  --transparent: transparent;
  --black-transparent-10: rgba(0, 0, 0, 0.1);
  --black-transparent-50: rgba(0, 0, 0, 0.5);
  --black-transparent-70: rgba(0, 0, 0, 0.7);
  --secondary-transparent: #10182880;
  --footer-nav-link: #e0e0e0;
}

/* ============================ */
/* COMPONENT: Section Header */
/* ============================ */

.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-direction: row;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border-tertiary);
}

.title-container {
  display: flex;
  justify-content: start;
  gap: 15px;
}

.icon-dog {
  width: 24px;
  height: 24px;
}