/* ================================= TUDO ================================= */

html {
  height: 100%;
  overflow-y: scroll;
  scroll-behavior: smooth;
}

body {
  font-family: sans-serif;
  min-height: 100%; /* Mantém o footer colado em baixo */
  margin: 0;
  display: flex;
  flex-direction: column;
  background: var(--bg-page);
/* Efeito de transição entre as páginas */
  opacity: 0;
  transition: opacity 0.3s ease;
}

.dark-mode body {
  background: var(--bg-page);
}

.pagina-servico {
  background: var(--bg-servico);
}

.darkmode .pagina-servico {
  background: var(--bg-servico);
}

body.loaded {
  opacity: 1;
}
/* Efeito de transição entre as páginas */

/* Mantém o footer colado em baixo */
main {
  flex: 1;
  padding-top: 10px;
  padding-bottom: 10px;
}

footer {
  margin-top: 0;
}
/* /Mantém o footer colado em baixo */

ul {
  list-style: none;
  text-align: center;
  padding-left: 0 !important;
  margin-left: 0 !important;
  list-style-position: inside;
}

img {
  max-width: 100%;
  height: auto;
}

a {
  text-decoration: none;
}

a,
button,
img {
  user-select: none;
  -webkit-user-drag: none;
}

a:focus-visible {
  outline: 2px solid var(--bg-theme-two);
  outline-offset: 2px;
}

button {
  color: inherit
}

button:focus,
button:active,
button:focus-visible {
  outline: none;
  box-shadow: none;
}

/* Botão Dark Mode */
.btn-darkmode {
  background-color: var(--bg-darkmode-btn);
  position: fixed;
  top: 7px;
  right: 7px;
  z-index: 1050;
  border-radius: 50%;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  /*transition: transform 0.2s ease, background-color 0.2s ease;*/
  border: 1px solid white;
}

.btn-darkmode:hover {
  background-color: var(--btn-bg-darkmode-hover);
  /*transition: scale(1.08);*/
}



/* ========================== BARRA DE NAVEGAÇÃO ========================== */

.navbar-brand {
  margin-left: 16px; /* Mexer aqui caso necessário */
}

.navbar-nav {
  margin: 0 auto;
}

.navbar {
  position: relative;
  z-index: 1030;
}

header .navbar {
  z-index: 1050;
}

/* Também afeta o dropdown da segunda coluna */
.dropdown-menu {
  border-radius: 5px;
  overflow: hidden;
  padding: 0;
  text-align: center;
  user-select: none;

  color: #000;
  border: 1px solid #000;
}

/* Também afeta o dropdown da segunda coluna */
.dropdown-item {
  padding: 8px 12px;
  border-radius: 0;
  user-select: none;
  -webkit-user-drag: none;
  /*transition: background-color 0.15s ease, color 0.15s ease;*/

  color: #000;
}

/* Também afeta o dropdown da segunda coluna */
.dropdown-menu li:first-child .dropdown-item {
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
}

/* Também afeta o dropdown da segunda coluna */
.dropdown-menu li:last-child .dropdown-item {
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
}

/******************************************/

/* Menu Inicio, Serviços... */

.navbar .nav-link {
  color: var(--text-muted);
}

.navbar .nav-link:hover,
.navbar .nav-link:focus {
  color: var(--text-btn-hover-nav);
}

.navbar .nav-link:active,
.navbar .nav-link.active {
  color: var(--text-btn-active-nav);
}

.nav-link.active {
  cursor: default;
  /*pointer-events: none; //Tira a possibilidade de clicar em links ativos */
}

.logo-formatacao,
.logo-formatacao:link,
.logo-formatacao:visited,
.logo-formatacao:hover,
.logo-formatacao:active,
.logo-formatacao:focus {
  color: var(--text-re);
  text-decoration: none;
}

/******************************************/

/* Menu Dropdown Compras */

.navbar .dropdown-item {
  color: var(--text-btn-nav-drop);
  background-color: var(--btn-bg-nav);
}

.navbar .dropdown-item:hover,
.navbar .dropdown-item:focus {
  color: var(--text-btn-hover-nav-drop);
  background-color: var(--btn-bg-hover-nav);
  font-weight: bold;
}

.navbar .dropdown-item:active,
.navbar .dropdown-item.active  {
  color: var(--text-btn-active-nav-drop);
  background-color: var(--btn-bg-active-nav);
  /*font-weight: bold;*/
}

/******************************************/

/* Remove a seta de Compras */
.dropdown-toggle::after {
  display: none;
}

.navbar-nav .nav-item.dropdown {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Maneira correta de aplicar o gradient */
.navbar-color {
  background-image: var(--gradient);
  background-color: #2d3436;
}

/* Tira a cor escura ao clicar fora de compras com dropdown aberto */
.navbar .dropdown-toggle.show {
  color: var(--text-btn-hover-nav);
}

/* =============================== SERVIÇOS =============================== */

.titulo-servico {
	font-size: clamp(1.6em, calc(1.4em + 0.8vw), 2em);
	text-align: justify;
	font-weight: bold;
  color: var(--text-service-title);
}

.subtitulo-servico {
	font-size: clamp(1em, calc(0.85em + 1vw), 1.4em);
	text-align: justify;
  color: var(--text-service-subtitle);
}

.texto-servico {
	font-size: clamp(0.9em, calc(0.75em + 0.8vw), 1.3em);
	text-align: justify;
  color: var(--text-service-content);
}

.service-card {
  background-color: var(--service-card);
  margin-bottom: 30px;
  border-radius: 10px;
  padding: 20px;
  margin-left: -10px;
}

.btn-subir {
  position: fixed;
  right: 24px;
  bottom: 60px;
  top: auto;
  transform: none;
}

.btn-cor a {
  color: var(--service-btn-text);
  background-color: var(--service-btn-bg);
}

.btn-cor a:hover {
  color: var(--service-btn-text-hover);
  background-color: var(--service-btn-bg-hover);
}

.btn-cor a:active {
  color: var(--service-btn-text-active);
  background-color: var(--service-btn-bg-active);
}

.btn-formatacao {
  padding: 6px 7px;
  border-radius: 5px;
}

.main-bottom {
  margin-bottom: 10px;
}

/* =============================== COMPRAS =============================== */

.nav-tabs {
  border-bottom: 1px solid var(--border-bottom);
}

/* Abas não ativas */
.nav-tabs .nav-link {
	color: var(--tab-text);
	background-color: var(--tab-bg);
	border: 1px solid var(--tab-border);
	margin: 0 3px;
	padding: 6px 10px;
	border-radius: 6px;
	transition: all 0.2 ease;
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
	border-bottom: none;
}

.nav-tabs .nav-link:hover {
	color: var(--tab-text-hover);
	background-color: var(--tab-bg-hover);
}

.nav-tabs .nav-link.active {
	color: var(--tab-text-active);
	background-color: var(--tab-bg-active);
	border-radius: 0.375rem;
	text-shadow: 0 0 0.5px currentColor;
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
	border-bottom: none;
}

/******************************************/

.computadores-formatacao {
	background: #FFF;
	padding: 10px 10px;
}

.computadores-formatacao a:hover {
	background-color: rgba(109, 152, 135, 1);
}

.imagem-link {
	width: 200px;
	height: 200px;
}

#body-centralizado {
	display: grid;
	place-items: center;
	height: 100vh;
	margin: 0;
}

.container-centralizado {
	display: grid;
	align-self: center;
}

.espaco-link {
	margin-top: 10px;
}

.tab-pane a:hover {
	background-color: rgba(0, 0, 0, 0.1);
}

.titulo-computador {
	font-weight: bold;
	border: 1px solid var(--text-title);
	border-inline: none;
	margin-top: 15px;
	text-align: center;
	font-size: 2.5em;
	padding: 5px;
	color: var(--text-title);
}

.marca-monitor {
  font-weight: bold;
  border: 1px solid var(--text-title);
  border-inline: none;
  text-align: center;
  font-size: 2.5em;
  padding: 5px;
  color: var(--text-title);
}

.titulo-monitor {
  font-weight: 700;
  text-align: center;
  font-size: 3.2em;
  margin-bottom: 6px;
  letter-spacing: 5px;
  color: var(--text-title);
}

.titulo-processador > div > p {
  font-size: 1em;
  color: var(--text-subtitle);
}

.btn-items div a {
  color: var(--text-btn);
  background-color: var(--bg-btn);
  border: 1px solid var(--btn-border);
  transition: none;
}

.btn-items div a:hover {
  color: var(--text-btn-hover);
  background-color: var(--bg-btn-hover);
  border: 1px solid var(--btn-border);
}

.btn-items div a:active { 
  color: var(--text-btn-hover);
  background-color: var(--bg-btn-hover);
  border: 1px solid var(--btn-border);
}

/* Evita que o botão fique escuro ao clicar, arrastar e soltar */
.btn-items div a:hover,
.btn-items div a:focus:active {
  color: var(--text-btn-hover);
  background-color: var(--bg-btn-hover);
  border: 1px solid var(--btn-border);
  box-shadow: none; /* remove foco bootstrap */
  outline: none;
}

/******************************************/

/* Botão All-in-One */

#dropdownTabButton {
  color: var(--text-btn-top);
  background-color: var(--bg-btn-top);
  border: 1px solid var(--btn-border);
}

#dropdownTabButton:hover {
  color: var(--text-btn-top-hover);
  background-color: var(--bg-btn-top-hover);
  font-weight: bold;
  transform: scale(1.01);
  transition: transform 0.25s ease, box-shadow 0.2s ease;
}

#dropdownTabButton:active,
#dropdownTabButton.show {
  color: var(--text-btn-top-active);
  background-color: var(--bg-btn-top-active);
}

/******************************************/

/* Dropdown do Botão All-in-One */

.dropdown-tabs-mobile {
	width: 60%;
	max-width: 320px;
	border-radius: 12px;
	margin-top: 50px;
}

.dropdown-tabs-mobile .dropdown-item {
  color: var(--text-btn-dropdown);
  background-color: var(--bg-btn-dropdown);
  text-align: center;
}

.dropdown-tabs-mobile .dropdown-item:hover,
.dropdown-tabs-mobile .dropdown-item:focus {
  color: var(--text-btn-dropdown-hover);
  background-color: var(--bg-btn-dropdown-hover);
  font-weight: bold;
}

.dropdown-tabs-mobile .dropdown-item:active,
.dropdown-tabs-mobile .dropdown-item.active {
  color: var(--text-btn-dropdown-active);
  background-color: var(--bg-btn-dropdown-active);
}

/******************************************/

.arredondar-botao {
	border-radius: 20px !important;
}

#myTabContent div a {
	border-radius: 25px;
}

.tamanho-botoes .btn {
	font-size: 1em;
}

/* ================================ ITENS ================================ */

.bottom-item {
	padding-bottom: 0 !important;
	padding-right: 0 !important;
	padding-left: 0 !important;
	margin-bottom: 0 !important;
}

.titulo-item {
	font-weight: bold;
	border: 1px solid var(--text-border);
	border-inline: none;
	color: var(--text-items-title);
}

.texto-item {
 	font-size: 1.1em;
  color: var(--text-items-content);
}

.texto-item-dois {
  font-size: 1.1em;
  color: var(--text-items-content);
}

.texto-preco {
 	font-weight: bold;
 	margin: 0; /* Remove o margin-bottom padrão */
 	border-top: 1px solid var(--text-border);
	border-inline: none;
  color: var(--text-items-price);
}

.botao-link {
  width: 75%;
  margin: 0 auto;
	border: 1px solid #3a3a3a;
	padding: 10px;
	border-radius: 25px;
	text-decoration: none;
  text-align: center;
  color: var(--text-items-btn);
  background-color: var(--bg-items-btn);
}

.botao-hover a:hover {
  text-decoration: none;
  color: var(--text-items-btn-hover);
  background-color: var(--bg-items-btn-hover);
}

.botao-hover-link a:hover {
  text-decoration: none;
  color: var(--text-items-btn-hover);
  background-color: var(--bg-items-btn-hover);
  font-weight: bold;
  transform: scale(1.01);
  transition: transform 0.25s ease, box-shadow 0.2s ease;
}

.botao-hover-link a:active {
  text-decoration: none;
  color: var(--text-items-btn-active);
  background-color: var(--bg-items-btn-active);
}

.item-slide {
	border: 1px solid var(--img-border);
}

.seta-hover a:hover {
  background-color: rgba(109, 152, 135, 0.1);
}

/* Pode gerar conflito com o Bootstrap, ficar de olho */
.carousel-item {
	transition: transform 1s ease-in-out;
}

.item-card {
  border-top: none;
  border-right: 1px solid var(--text-border);
  border-bottom: 1px solid var(--text-border);
  border-left: none;
}

/* ======================= PRODUTO NÃO ENCONTRADO ======================== */

.titulo-nao-encontrado {
  font-size: 2.5em;
  color: var(--title-404);
}

.texto-nao-encontrado {
  font-size: 1.5em;
  color: var(--text-404);
}

.botao-nao-encontrado a {
  color: var(--btn-text-404);
  background-color: var(--btn-bg-404);
  padding: 10px;
  border-radius: 5px;
}

.botao-nao-encontrado a:hover {
  color: var(--btn-text-404-hover);
  background-color: var(--btn-bg-404-hover);
}

.botao-nao-encontrado a:active {
  color: var(--btn-text-404-active);
  background-color: var(--btn-bg-404-active);
}

/* =============================== SIDEBAR =============================== */

/* ================================== *
    CONFIGURAÇÕES GERAIS DE SERVIÇOS
 * ================================== */

/* Variáveis */
:root {
  --sidebar-w: 230px;
  --navbar-h: 0px;
  --gap: 15px;
}

/* ============================
   SIDEBAR 
===============================*/
#sidebar {
  position: sticky;
  top: var(--navbar-h);
  width: var(--sidebar-w);
  min-height: calc(100vh - var(--navbar-h));
  overflow-y: auto;
  background: var(--gradient);
  left: 0;
  padding: 5px 10px;
  z-index: 1000;
}

/* Links da Sidebar */
#sidebar a {
  color: #fff;
  padding: 12px;
  text-decoration: none;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 5px;
  transition: 0.2s;
}

/* Hover mais escuro */
#sidebar a:hover {
  background: rgba(255, 255, 255, 0.15);
  transform: translateX(3px);
  font-weight: bold; 
}

/* Conteúdo da sidebar (onde os botões realmente ficam) */
#sidebar .sidebar-inner {
  display: flex;
  flex-direction: column;
  gap: 5px;
  justify-content: flex-start;
	margin-top: 10px;
	height: 100%;*/
}

#page-wrapper {
  display: flex;
  gap: var(--gap);
  align-items: flex-start;
}

/* ============================
   FOOTER AJUSTADO
===============================*/

#footer {
  width: 100%;
  position: relative; /* evita sobreposição */
  margin-left: 0;
  background: #222;
  color: #eee;
  padding: 0px;
  text-align: center;
  border-top: 2px solid #00000033;
  z-index: 1100;
}

#content {
  flex: 1;
  padding: 20px;
}

/* ============================
   RESPONSIVIDADE
===============================*/

@media (max-width: 991.98px) {
  #sidebar {
    display: none;
  }

  #content {
    margin-left: 0;
  }

  #footer {
    width: 100%;
    margin-left: 0;
  }
}

section {
  scroll-margin-top: 30px;
}

/* ================================ FOOTER ================================ */

#footer {
  display: grid;
  border-top: 1px solid transparent;
}

.footer-color {
  background: var(--gradient-three);
}

.rodape-formatacao {
  position: relative;
  padding: 5px;
  text-align: center;
  font-size: 1.1em;
  color: var(--text-footer);
}

.rodape-formatacao a {
  text-decoration: none;
}

.rodape-escrita-formatacao {
  margin: 0;
  line-height: 1.4;
  padding: 10px;
}

.link-footer {
  color: var(--link-footer);
}

.link-footer:hover,
.link-footer:active,
.link-footer:focus,
.link-footer:focus-visible {
  color: var(--link-hover);
}

/* ============================== DARK MODE =============================== */

/* ============================== MODO CLARO ============================== */

:root {

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

  --bg-page: #f5f7fa;
  --bg-servico: #d5e6df;
  --gradient: linear-gradient(
    270deg, 
    #2d3436 68%,
    #6d9887 150%
  );
  --gradient-three: linear-gradient(
    270deg, 
    #2d3436 70%,
    #6d9887 150%
  );

  /* Botão Dark Mode */
  --bg-darkmode-btn: #212529;
  --btn-bg-darkmode-hover: #3a3a3a;

  /* ================ NAVBAR ================ */

  --text-muted: #858585;
  --text-btn-nav: #121212;
  --text-btn-hover-nav: #fff;
  --text-btn-active-nav: #fff;
  --text-re: #f5f7fa;

  --text-btn-nav-drop: #121212;
  --btn-bg-nav: #fff;
  --text-btn-hover-nav-drop: #f5f7fa;
  --btn-bg-hover-nav: #383e45;
  --text-btn-active-nav-drop: #fff;
  --btn-bg-active-nav: #121212;

  --bg-dropdown: #f5f7fa;

  /* =============== COMPRAS ================ */

  /* Botão All-In-One */
  --text-btn-top: #121212;
  --bg-btn-top: #fff;
  --text-btn-top-hover: #f5f7fa;
  --bg-btn-top-hover: #383e45;
  --text-btn-top-active: #f5f7fa;
  --bg-btn-top-active: #121212;

  /* Dropdown Opções */
  --text-btn-dropdown: #121212;
  --bg-btn-dropdown: #f5f7fa;
  --text-btn-dropdown-hover: #f5f7fa;
  --bg-btn-dropdown-hover: #383e45;
  --text-btn-dropdown-active: #f5f7fa;
  --bg-btn-dropdown-active: #121212;

  /* Abas */
  --tab-text: #121212;
  --tab-bg: #fff;
  --tab-text-hover: #f5f7fa;
  --tab-bg-hover: #383e45;
  --tab-text-active: #f5f7fa;
  --tab-bg-active: #121212;
  --tab-border: #121212;
  --border-bottom: #212529;

  /* Marca */
  --text-title: #121212;
  /* Processador */
  --text-subtitle: #121212;
  /* Botões */
  --text-btn: #121212;
  --bg-btn: #fff;
  --text-btn-hover: #f5f7fa;
  --bg-btn-hover: #383e45;
  --text-btn-active: #f5f7fa;
  --bg-btn-active: #121212;
  --btn-border: #121212;

  /* =============== SERVICO ================ */

  --text-service-title: #121212;
  --text-service-subtitle: #121212;
  --text-service-content: #121212;
  --service-card: #f5f7fa;

  /* Botão Subir */
  --service-btn-text: #f5f7fa;
  --service-btn-bg: #383e45;
  --service-btn-text-hover: #f5f7fa;
  --service-btn-bg-hover: #212529;
  --service-btn-text-active: #f5f7fa;
  --service-btn-bg-active: #121212;

  /* ================ ITENS ================= */

  --text-items-title: #000;
  --text-items-content: #121212;
  --text-items-price: #000;

  --text-items-btn: #121212;
  --bg-items-btn: #fff;
  --text-items-btn-hover: #f5f7fa;
  --bg-items-btn-hover: #212529;
  --text-items-btn-active: #f5f7fa;
  --bg-items-btn-active: #121212;

  --img-border: #212529;
  --text-border: #212529;

  /* ======== PRODUTO NÃO ENCONTRADO ======== */

  --title-404: #121212;
  --text-404: #121212;
  --btn-text-404: #f5f7fa;
  --btn-bg-404: #383e45;
  --btn-text-404-hover: #f5f7fa;
  --btn-bg-404-hover: #212529;
  --btn-text-404-active: #f5f7fa;
  --btn-bg-404-active: #121212;

  /* ================ FOOTER ================ */

  --text-footer: #f5f7fa;
  --link-footer: #0d6efd;
  --link-hover: #0a58ca;

  /* ================ TESTE ================ */

  --text-white: #fff;
  --text-black: #000;
  --text-red: #f00;
  --text-green: #0f0;
  --text-blue: #00f;
  --text-yellow: #ff0;
  --text-pink: #f0f;
  --text-cyan: #0ff;

}


/* ============================== MODO ESCURO ============================== */


.dark-mode {

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

  --bg-page: #121212;
  --bg-servico: #121212;
  --gradient: linear-gradient(
    270deg, 
    #0f2027 68%,
    #5a8f7b 150%
  );
  --gradient-three: linear-gradient(
    270deg, 
    #0f2027 70%,
    #5a8f7b 150%
  );

  /* Botão Dark Mode */
  --bg-darkmode-btn: #f5f7fa;
  --btn-bg-darkmode-hover: #fff;

  /* ================ NAVBAR ================ */

  --text-muted: #b0b0b0;
  --text-btn-nav: #f5f7fa;
  --text-btn-hover-nav: #f5f7fa;
  --text-btn-active-nav: #f5f7fa;
  --text-re: #f5f7fa;

  --text-btn-nav-drop: #f5f7fa;
  --btn-bg-nav: #212529;
  --text-btn-hover-nav-drop: #121212;
  --btn-bg-hover-nav: #cfd2d4;
  --text-btn-active-nav-drop: #121212;
  --btn-bg-active-nav: #f5f7fa;

  --bg-dropdown: #121212;

  /* =============== COMPRAS ================ */


  /* Botão All-in-One */
  --text-btn-top: #f5f7fa;
  --bg-btn-top: #212529;
  --text-btn-top-hover: #121212;
  --bg-btn-top-hover: #f5f7fa;
  --text-btn-top-active: #121212;
  --bg-btn-top-active: #fff;

  /* Dropdown Opções */
  --text-btn-dropdown: #f5f7fa;
  --bg-btn-dropdown: #212529;
  --text-btn-dropdown-hover: #121212;
  --bg-btn-dropdown-hover: #cfd2d4;
  --text-btn-dropdown-active: #121212;
  --bg-btn-dropdown-active: #fff;

  /* Abas */
  --tab-text: #f5f7fa;
  --tab-bg: #212529;
  --tab-text-hover: #121212;
  --tab-bg-hover: #cfd2d4;
  --tab-text-active: #121212;
  --tab-bg-active: #f5f7fa;
  --tab-border: #f5f7fa;
  --border-bottom: #f5f7fa;

  /* Marca */
  --text-title: #f5f7fa;
  /* Processador */
  --text-subtitle: #f5f7fa;
  /* Botões */
  --text-btn: #f5f7fa;
  --bg-btn: #212529;
  --text-btn-hover: #121212;
  --bg-btn-hover: #cfd2d4;
  --text-btn-active: #f5f7fa;
  --bg-btn-active: #3a3a3a;
  --btn-border: #f5f7fa;

  /* =============== SERVICO ================ */

  --text-service-title: #f5f7fa;
  --text-service-subtitle: #f5f7fa;
  --text-service-content: #f5f7fa;
  --service-card: #212529;

  /* Botão Subir */
  --service-btn-text: #212529;
  --service-btn-bg: #cfd2d4;
  --service-btn-text-hover: #212529;
  --service-btn-bg-hover: #f5f7fa;
  --service-btn-text-active: #212529;
  --service-btn-bg-active: #fff;

  /* ================ ITENS ================= */

  --text-items-title: #fff;
  --text-items-content: #f5f7fa;
  --text-items-price: #fff;

  --text-items-btn: #f5f7fa;
  --bg-items-btn: #3a3a3a;
  --text-items-btn-hover: #212529;
  --bg-items-btn-hover: #f5f7fa;
  --text-items-btn-active: #212529;
  --bg-items-btn-active: #fff;

  --img-border: #e6e6e6;
  --text-border: #e6e6e6;

  /* ======== PRODUTO NÃO ENCONTRADO ======== */

  --title-404: #f5f7fa;
  --text-404: #f5f7fa;
  --btn-text-404: #212529;
  --btn-bg-404: #cfd2d4;
  --btn-text-404-hover: #212529;
  --btn-bg-404-hover: #f5f7fa;
  --btn-text-404-active: #212529;
  --btn-bg-404-active: #fff;

  /* ================ FOOTER ================ */

  --text-footer: #e0e0e0;
  --link-footer: #4da3ff;
  --link-hover: #7ab8ff;

  /* ================ TESTE ================ */

  --text-white: #fff;
  --text-black: #000;
  --text-red: #f00;
  --text-green: #0f0;
  --text-blue: #00f;
  --text-yellow: #ff0;
  --text-pink: #f0f;
  --text-cyan: #0ff;

}

/* ============================ MEDIA QUERIES ============================= */

/*********** Extra large devices (large desktops, 1200px and up) ************/

@media (min-width: 1200px) {

	.nav-tabs .nav-link { /* Controla o tamanho das abas de subtítulo */
		margin: 0 2.5px;
		padding: 6px 8px;
		font-size: 16px;
	}

	.nav-text .nav-link {
		font-size: 1.05em;
	}

	.nav-text .dropdown-item {
		font-size: 1.05em;
	}



  .service-card {
    background-color: var(--service-card);
    border-radius: 10px;
    margin-bottom: 38px;
    margin-left: -8px;
    margin-right: 4px;
    padding: 30px;
  }

  .main-bottom {
    margin-bottom: 9px;
  }



	.titulo-computador {
		font-size: 2.3em;
	}

  .marca-monitor {
    font-size: 2.3em;
  }

  .titulo-monitor {
    font-size: 3.3em;
    letter-spacing: 4px;
    margin-bottom: 10px;
  }



	.tamanho-botoes .btn {
		font-size: 1.05em;
	}

	.titulo-processador > div > p {
		font-size: 1.2em;
	}



	.titulo-item {
		font-size: 2.5rem;
		padding-top: 7px;
		padding-bottom: 7px;
		border-radius: 0 12px 0 0;
		margin: 0px;
	}

	.texto-item {
		font-size: 1.4rem;
		margin: 12px;
	}

  .texto-item-dois {
    font-size: 1.4rem;
    margin: 12px;
  }

	.texto-preco {
		font-size: 2.4rem;
		padding-top: 7px;
		padding-bottom: 7px;
	}

	.botao-link {
		margin-top: 16px;
		padding: 12px;
		font-size: 1.2rem;
	}



  .titulo-nao-encontrado {
    font-size: 2em;
  }

  .texto-nao-encontrado {
    font-size: 1.5em;
  }

  .botao-nao-encontrado a {
    padding: 10px;
    border-radius: 5px;
    font-size: 1em;
  }



  .item-slide {
    border-radius: 14px;
  }

	.item-card {
		border-radius: 0 14px 14px 0;
	}


	.btn-baixo {
		font-size: 1.05em;
	}


	.rodape-formatacao {
		padding: 5px;
		font-size: 1em;
	}

	.logo-formatacao {
		font-size: 1.3em;
	}

}

/****************** Large devices (desktops, 992px and up) ******************/

@media (min-width: 992px) and (max-width: 1199.98px) {

	.nav-tabs .nav-link { /* Controla o tamanho das abas de subtítulo */
		margin: 0 2px;
		padding: 6px 7px;
		font-size: 15px;
	}

	.nav-text .nav-link { /* Controla o tamanho da aba principal */
		font-size: 1em;
	}

	.nav-text .dropdown-item {
		font-size: 1em;
	}



  .service-card {
    background-color: var(--service-card);
    border-radius: 10px;
    margin-bottom: 33px;
    margin-left: -8px;
    margin-right: 4px;
    padding: 25px;
  }

  .main-bottom {
    margin-bottom: 12px;
  }



	.titulo-computador {
		font-size: 2em;
	}

  .marca-monitor {
    font-size: 2em;
  }

  .titulo-monitor {
    font-size: 3em;
    letter-spacing: 3px;
    margin-bottom: 6px;
  }



	.tamanho-botoes .btn {
		font-size: 1em;
	}

	.titulo-processador > div > p {
		font-size: 1.1em;
	}



	.titulo-item {
		font-size: 2rem;
		padding-top: 6px;
		padding-bottom: 6px;
		border-radius: 0 10px 0 0;
		margin: 0px;
	}

	.texto-item {
		font-size: 1.2rem;
		margin: 10px;
	}

  .texto-item-dois {
    font-size: 1.2rem;
    margin: 10px;
  }

	.texto-preco {
		font-size: 1.9rem;
		padding-top: 6px;
		padding-bottom: 6px;
	}

	.botao-link {
		margin-top: 12px;
		padding: 10px;
		font-size: 1.1rem;
	}



  .titulo-nao-encontrado {
    font-size: 1.8em;
  }

  .texto-nao-encontrado {
    font-size: 1.3em;
  }

  .botao-nao-encontrado a {
    padding: 8px;
    border-radius: 5px;
    font-size: 0.9em;
  }



  .item-slide {
    border-radius: 10px;
  }

	.item-card {
		border-radius: 0 10px 10px 0;
	}



	.btn-baixo {
		font-size: 1.03em;
	}



	.rodape-formatacao {
		padding: 5px;
		font-size: 0.95em;
	}

	.logo-formatacao {
		font-size: 1.25em;
	}

  .btn-darkmode {
    top: 7px;
    right: 7px;
    width: 42px;
    height: 42px;
  }

}

/******************* Medium devices (tablets, 768 and up) *******************/

@media (min-width: 768px) and (max-width: 991.98px) {

	.nav-tabs .nav-link { /* Controla o tamanho das abas de subtítulo */
		margin: 0 1.5px;
		padding: 6px 10px;
		font-size: 14px;
	}

  .centralizar {
    min-height: 80vh;
    align-items: center;
  }



  .service-card {
    background-color: var(--service-card);
    border-radius: 10px;
    margin-bottom: 28px;
    margin-left: 6px;
    margin-right: 4px;
    padding: 25px;
  }

  .main-bottom {
    margin-bottom: 17px;
  }



	.nav-text .nav-link {
		font-size: 0.9em;
	}

	.nav-text .dropdown-item {
		font-size: 0.9em;
	}



	.titulo-computador {
		font-size: 1.8em;
	}

  .marca-monitor {
    font-size: 1.8em;
  }

  .titulo-monitor {
    font-size: 2.8em;
    letter-spacing: 3px;
  }



	.tamanho-botoes .btn {
		font-size: 0.9em;
	}

	.titulo-processador > div > p {
		font-size: 1.05em;
	}



	.titulo-item {
		font-size: 1.6rem;
		padding-top: 4px;
		padding-bottom: 4px;
		border-radius: 0 8.5px 0 0;
		margin: 0px;
	}

	.texto-item {
		font-size: 0.9rem;
		margin: 6px;
  }

  .texto-item-dois {
    font-size: 0.9rem;
    margin: 6px;
  }

	.texto-preco {
		font-size: 1.6rem;
		padding-top: 4px;
		padding-bottom: 4px;
	}

	.botao-link {
		margin-top: 8px;
		padding: 9px;
		font-size: 0.8rem;
	}



  .titulo-nao-encontrado {
    font-size: 1.2em;
  }

  .texto-nao-encontrado {
    font-size: 0.8em;
  }

  .botao-nao-encontrado a {
    padding: 7px;
    border-radius: 4px;
    font-size: 0.8em;
  }



  .item-slide {
    border-radius: 8.5px;
  }

	.item-card {
		border-radius: 0 8.5px 8.5px 0;
	}



	.btn-baixo {
		font-size: 1em;
	}



	.rodape-formatacao {
		padding: 5px;
		font-size: 0.9em;
	}

	.logo-formatacao {
		font-size: 1.2em;
	}

  .btn-darkmode {
    top: 7px;
    right: 7px;
    width: 41px;
    height: 41px;
  }

}

/************** Small devices (landscape phones, 576px and up) **************/

@media (min-width: 576px) and (max-width: 767.98px) {

  #dropdownTabButton {
    width: 82%;
  }

	.navbar .dropdown-menu {
		position: static;
		width: 100%;
		margin: 0;
		transform: none;
		text-align: center;
	}



  .service-card {
    background-color: var(--service-card);
    border-radius: 10px;
    margin-bottom: 20px;
    margin-left: 6px;
    margin-right: 4px;
    padding: 25px;
  }

  .main-bottom {
    margin-bottom: 23px;
  }

	

	.titulo-computador {
		font-size: 1.6em;
	}

  .marca-monitor {
    font-size: 1.6em;
  }

  .titulo-monitor {
    font-size: 2.6em;
    letter-spacing: 2px;
  }



	.tamanho-botoes .btn {
		font-size: 0.85em;
	}



	.titulo-item {
		font-size: 1.2rem;
		padding-top: 3px;
		padding-bottom: 3px;
		border-radius: 0 7px 0 0;
		margin: 0px;
	}

	.texto-item {
		font-size: 0.8rem;
		margin: 5px;
  }

  .texto-item-dois {
    font-size: 0.8rem;
    margin: 5px;
  }

	.texto-preco {
		font-size: 1.2rem;
		padding-top: 3px;
		padding-bottom: 3px;
	}

	.botao-link {
		margin-top: 6px;
		padding: 8px;
		font-size: 0.8rem;
	}



  .titulo-nao-encontrado {
    font-size: 1.1em;
  }

  .texto-nao-encontrado {
    font-size: 0.9em;
  }

  .botao-nao-encontrado a {
    padding: 7px;
    border-radius: 4px;
    font-size: 0.7em;
  }



  .item-slide {
    border-radius: 7px;
  }

	.item-card {
		border-radius: 0 7px 7px 0;
	}



	.rodape-formatacao {
		padding: 5px;
		font-size: 0.85em;
	}

	.logo-formatacao {
		font-size: 1.15em;
	}

  .btn-darkmode {
    position: static;
    width: 100%;
    border-radius: 8px;
    margin-top: 10px;
  }

}

/********** Extra small devices (portrait phones, less than 576px) **********/

@media (max-width: 575.98px) {

  #dropdownTabButton {
    width: 82%;
  }

	.navbar .dropdown-menu {
		position: static;
		width: 100%;
		margin: 0;
		transform: none;
		text-align: center;
	}



  .service-card {
    background-color: var(--service-card);
    border-radius: 10px;
    margin-bottom: 14px;
    margin-left: 6px;
    margin-right: 4px;
    padding: 20px;
  }

  .main-bottom {
    margin-bottom: 27px;
  }



	.titulo-computador {
		font-size: 1.6em;
	}

  .marca-monitor {
    font-size: 1.6em;
  }

  .titulo-monitor {
    font-size: 2.6em;
    letter-spacing: 2px;
  }



	.tamanho-botoes .btn {
		font-size: 0.85em;
	}

	.titulo-processador > div > p {
		font-size: 1em;
	}



	.titulo-item {
		font-size: 1.7rem;
		padding-top: 5px;
		padding-bottom: 5px;
    border-top: none;
	}

	.texto-item {
		font-size: 1rem;
		margin: 5px;
	}

  .texto-item-dois {
    font-size: 1rem;
  }

	.texto-preco {
		font-size: 1.7rem;
		padding-top: 5px;
		padding-bottom: 5px;
	}

	.botao-link {
		margin-top: 10px;
		padding: 8px;
		font-size: 0.9rem;
    width: 100%;
	}



  .titulo-nao-encontrado {
    font-size: 1.8em;
  }

  .texto-nao-encontrado {
    font-size: 1.2em;
  }

  .botao-nao-encontrado a {
    padding: 10px;
    border-radius: 6px;
    font-size: 0.8em;
  }



	.item-slide {
		/*border-bottom: none;*/
		border-left: 1px solid var(--img-border);
    border-radius: 10px 10px 0 0;
	}

	.item-card {
    border-left: 1px solid var(--text-border);
		border-radius: 0 0 10px 10px;
	}

  .espaco-top {
    padding-top: 18px;
  }



  .btn-baixo {
    font-size: 1.3em;
  }



	.rodape-formatacao {
		padding: 5px;
		font-size: 0.8em;
	}

	.logo-formatacao {
		font-size: 1.15em;
	}

  .btn-darkmode {
    position: static;
    width: 100%;
    border-radius: 8px;
    /*margin-top: 10px;*/
  }

}

/* col-md/acima */
@media (min-width: 768px) {

  .centralizar {
      min-height: 80vh;
      align-items: center;
    }

  .navbar-center {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
  }

}

/* col-sm/abaixo */
@media (max-width: 767.98px) {

  .centralizar {
    align-items: flex-start;
  }

}