/* COLORS AND SECTIONS */
@import url(./colors.css);
@import url(./sec-1.css);
@import url(./sec-2.css);
@import url(./sec-3.css);
@import url(./sec-4.css);
@import url(./sec-5.css);
@import url(./sec-6.css);
@import url(./sec-7.css);

/* GLOBAL RESETS */
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box; /*RESETAR PADDING E MARGIN DE OUTROS ELEMENTOS HTML*/
  text-decoration: none; /*RESETAR ESTILO DOS LINKS <A> (TAG ÂNCORA)*/
  list-style: none; /*RESETAR ESTILO DAS LISTAS (TIRAR MARCADORES)*/
  outline: none; /*RESETAR BORDA PADRÃO DOS INPUTS AO CLICAR (TOGGLE)*/
  font-family: "Montserrat", Arial, Helvetica, sans-serif; /*MODO PARA INSERIR FONTE IMPORTADA COMO PADRÃO*/
  border: none;
}

a {
  color: inherit;
}

html {
  scroll-behavior: smooth;
}

a,
button {
  cursor: pointer;
}

/* COLORS */
.light {
  color: var(--MAIN-COLORS-LIGHT);
}

.white {
  color: var(--LIGHT-COLORS-FOREGROUND);
}

.dark {
  color: var(--MAIN-COLORS-DARK);
}

.green {
  color: var(--MAIN-COLORS-MAIN);
}

.form-green {
  color: var(--MAIN-COLORS-LIGHTMAIN);
}

/* ALIGN CENTER */
.align-center {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-bottom: 4rem;
}

/* CONTENT */
.content {
  display: flex;
  align-items: center;

  max-width: 87.5rem;
  gap: 3.75rem;
  width: 100%;
  justify-content: space-between;
}

/* ALIGN LEFT */
.align-left {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

/* TITLE */

.title {
  font-size: 2.875rem;
  font-weight: 700;
  line-height: 110%;
}

.small-title {
  font-size: 2.875rem;
  font-weight: 700;
  line-height: 110%;
}

/* TEXT */

.text {
  font-size: 1.25rem;
  font-weight: 400;
  line-height: 140%; /* 28px */
}

/* BUTTON */
.cta-white {
  /* FONT */
  font-size: 1.375rem;
  font-weight: 700;
  line-height: 140%; /* 30.8px */
  background-color: var(--LIGHT-COLORS-FOREGROUND);
  color: var(--MAIN-COLORS-MAIN);

  /* BUTTON */
  margin-top: 1.25rem;
  display: flex;
  padding: 1.25rem;
  justify-content: center;
  align-items: center;
  width: fit-content;
  border-radius: 0.8125rem;

  transition: all 0.2s ease-in-out;
}

.cta-white:hover {
  background-color: var(--MAIN-COLORS-LIGHTMAIN);
  color: var(--LIGHT-COLORS-FOREGROUND);
  transform: scale(1.02);
}

@media (max-width: 1000px) {
  .small-title {
    text-align: center;
  }
}