@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,100..700;1,100..700&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap");
@import url("home.css");
@import url("main.css");
@import url("testimonials.css");
@import url("footer.css");
@import url("buttons.css");
@import url("card.css");
@import url("scroll.css");
@import url("projects.css");
@import url("sobre-mim.css");
@import url("services.css");
@import url("faixa.css");
@import url("quality.css");
@import url("contact.css");
@import url("header.css");
@import url("pricing.css");
@import url("faq.css");
@import url('design-social-media.css');
@import url('ui-ux-design.css');


:root {
  --title: var(--font-h1) var(--color-gradiente) var(--weight-bold);
  --color-primary-1: #de85d9;
  --color-primary-2: #784875;
  --color-primary-3: #635766;
  --color-primary-4: #9e9e9e;
  --color-primary-5: #878686;
  --color-gradiente: var(
    --Gradiente,
    linear-gradient(90deg, #de85d9 0%, #ee61b3 100%)
  );

  --color-neutral-0: #fff;
  --color-neutral-1: #211a24;

  /* ===== Font Sizes ===== */
  --font-sm: 14px;
  --font-p: 16px;
  --font-h5: 18px;
  --font-h4: 24px;
  --font-h3: 28px;
  --font-h2: 34px;
  --font-h1: 39px;

  /* ===== Font Weights ===== */
  --weight-regular: 400;
  --weight-bold: 700;

  /* Declarando as variáveis de fonte */
  --fonte-principal: "Roboto", sans-serif;
  --fonte-mono: "Roboto Mono", monospace;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html,
body {
  margin: 0;
  padding: 0;
  overflow-x: hidden; /* A MÁGICA ACONTECE AQUI! */
}

html {
  scroll-behavior: smooth;
}

body {
  background-color: var(--color-neutral-1);
  font-family: var(--fonte-principal);
}

section {
  padding: 28px 8%;
}

img {
  max-width: 100%;
}

.title {
  font-size: 2.6rem;
  font-weight: 500;
  background-image: linear-gradient(90deg, #de85d9 0%, #9e0fbb 100%);
  /* 2. O fundo é recortado para o formato do texto */
  -webkit-background-clip: text; /* Prefixo para compatibilidade com Chrome/Safari */
  background-clip: text;

  /* 3. A cor da fonte fica transparente para revelar o fundo */
  color: transparent;
  font-family: var(--font-family);
  padding: 80px 0 80px 0px;
}

p {
  color: #878686;
}

a {
  text-decoration: none;
}

.description {
  background-image: radial-gradient(
    circle at top left,
    #edebeb,
    /* Lilás claro */ #818181
  );
  /* 2. O fundo é recortado para o formato do texto */
  -webkit-background-clip: text; /* Prefixo para compatibilidade com Chrome/Safari */
  background-clip: text;

  /* 3. A cor da fonte fica transparente para revelar o fundo */
  color: transparent;
  text-align: center;
  font-family: Poppins;
  font-size: 1.3rem;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}

#sub-title {
  background-image: linear-gradient(90deg, #de85d9 0%, #ee61b3 100%);
  /* 2. O fundo é recortado para o formato do texto */
  -webkit-background-clip: text; /* Prefixo para compatibilidade com Chrome/Safari */
  background-clip: text;

  /* 3. A cor da fonte fica transparente para revelar o fundo */
  color: transparent;
  text-align: start;
  font-weight: 400;
}

#text {
  color: var(--color-neutral-0);
  font-size: 0.9rem;
  font-weight: 400;
}

@media screen and (max-width: 768px) {
  #services .description {
    text-align: start;
  }
}