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

:root {
  --cor-primaria: #583003;
  --cor-secundaria:#3e2202;
  --cor-terciaria: #eeeeee;
  --cor-verde-musgo: #3e2202;
  --cor-fonte: #4e525a;
  --cor-fonte-2:#24262f;
}

#hero,
#sobre,
#skills,
.projetos,
#contato {
  padding: 3rem 0;

  p,
  li {
    font-size: large;
  }

  h2 {
    color: var(--cor-primaria);
    font-size: 3.5rem;
    font-weight: bolder;
    line-height: 3rem;
    margin-bottom: 2rem;
  }
}

ul,
li {
  margin: 0;
  padding: 0;
}

body {
  /*background: linear-gradient(135deg, #000000 0%, #1a1a1a 50%, #333333 100%);*/
  background-image: url(/assets/img/fundo/light-brown-aesthetic-brown-marble-eo3dgimks3qblx72.jpg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;

  color: var(--cor-fonte);
  font-family: "Roboto Flex", sans-serif;
  font-weight: 400;
  
}

main{
  margin: 10rem 6.25rem 0 6.25rem;
  

}




/* Estilo base para botões e links estilo botão */
button,
a.btn {
  display: inline-block; /* para os <a> se comportarem como botões */
  border: 0.063rem solid transparent;
  border-radius: 0.5rem;
  cursor: pointer;
  font-size: 1rem;
  font-weight: 500;
  padding: 0.75rem 1.25rem;
  transition: background-color 0.3s ease, color 0.3s ease,
    border-color 0.3s ease;
  text-decoration: none;
}
  
.container-btn{
  display: flex;
  justify-content: start;
  gap: 0.625rem;
  align-items: end;
}

/* Botão "Contato" */
a.btn.contato {
  background-color: var(--cor-primaria);
  color: var(--cor-fonte-2);
  font-weight: bold;
}

a.btn.contato:hover {
  background-color: color-mix(in srgb, var(--cor-secundaria) 40%, black);
  border-color: var(--cor-fonte-2);
  color: var(--cor-primaria);
}

/* Botão "Projetos" */

a.btn.btnProjetos {
  background-color: transparent;
  border: 1px solid var(--cor-primaria);
  color: var(--cor-secundaria);
  font-weight: bold;
}

a.btn.btnProjetos:hover {
  background-color: var(--cor-verde-musgo);
  border-color: var(--cor-primaria);
  color: var(--cor-fonte);
}

header {
  /*border: 1px solid white;*/
  display: flex;
  align-items: center;
  justify-content: space-between;

  /*logo*/
  img {
    width: 5%;
    margin-right: 1rem;
  }
}

nav {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  font-size: 1.125rem;
  margin-top: 5rem;
  width: 100%;
  padding: 3rem 1rem 1.5rem 3rem;
  backdrop-filter: blur(0.625rem) brightness(1) saturate(150%); /* aplica o embaçamento atrás */
  -webkit-backdrop-filter: blur(20px) brightness(1) saturate(150%); /* navegador Safari */

  position: fixed;
  z-index: 1;

  .assina { font-family: "Tangerine", cursive;
      font-weight: 700;
      font-style: normal;
      font-size: 3.5rem;
      color: var(--cor-secundaria);
  };

  ul {
    display: flex;
    justify-content: center;
    margin: 0;
    padding: 0;
    gap: 2rem;
    cursor: pointer;
    list-style: none;
  }

  li,
  a {
    font-weight: 500;
    text-decoration: none;
    color: var(--cor-terciaria);

    &:hover {
      color: var(--cor-secundaria);
    }
  }
}

#hero {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  align-items: flex-start;
  justify-items: flex-end;
  margin-top: 6.25rem;

  /*border: 1px solid purple;*/

  article {
    display: flex;
    flex: 1;
    flex-direction: column;
    justify-content: center;
    gap: 2rem;

    /*border: 1px solid orange;*/



    > p {
      font-size: 1.5rem;
      line-height: 1.8rem; /*padroniza tamanho da linha*/
    }

    .destaque {
      font-family: "Tangerine", cursive;
      font-weight: 700;
      font-style: normal;
      font-size: 3.5rem;
      color: var(--cor-secundaria);
    }

    .titulo {
      font-family: "Bungee Outline", sans-serif;
      font-weight: 400;
      font-style: normal;
      font-size: 5.5rem;
      color: var(--cor-primaria);
      line-height: 3.5rem;

      .enfase {
        color: var(--cor-secundaria);
      }
    }
  }

  .foto-container {
    align-items: center;
    border: 1px solid var(--cor-primaria);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    width: 420px;
    height: 420px;
    margin-right: 3rem;

    img {
      width: 80%;
      aspect-ratio: 1/1; /*mantem uma proporção fixa entre a largura e altura da img*/
      object-fit: cover;
      border-radius: 50%;
      object-fit: cover;
      display: block;
    }
  }
}

#sobre {
  margin-top: 4rem;
  article {
    line-height: 1.5rem;

    p {
      margin-bottom: 1rem;
    }
  }

  h4 {
    color: var(--cor-primaria);
    font-size: 1.5rem;
    margin-bottom: 1rem;
  }

  ul {
    display: flex;
    flex-direction: column;

    li {
      list-style: disc;
      margin-left: 1rem;
    }
  }

  .enfase {
    color: var(--cor-secundaria);
  }

  .material-symbols-outlined {
    font-size: 1.8rem;
  }
}

#skills {
  p {
    margin-bottom: 3rem;
  }

  .container-icones {
    display: flex;
    flex-wrap: wrap;
    overflow: hidden;
    white-space: nowrap;
    /*background: #000;*/
    padding: 20px 0;
    margin-inline: auto;
    mask: linear-gradient(
      to right,
      transparent,
      black 15%,
      black 85%,
      transparent
    );
  }

  .scroll__container {
    display: flex;
    justify-content: space-between;
    gap: 3rem;
    width: max-content;
    animation: scrollInfinito 10s linear infinite;
  }

  i {
    color: var(--cor-terciaria);
    cursor: pointer;
    transition: transform 0.3s ease, color 0.3s ease;
  }

  i:hover {
    transform: scale(1.1);
    color: var(--cor-secundaria);
  }

  .container-icones:hover .scroll__container {
    animation-play-state: paused;
  }
}

@keyframes scrollInfinito {
  to {
    translate: calc(
      -50% - 24px
    ); /*24px metade de 3rem q é o gap entre os icones*/
  }
}

#contato {

  p{
    color: var(--cor-fonte);
  }

  li,
  a {
    display: inline;
    list-style: none;
    text-decoration: none;
    margin-bottom: 0.5rem;

  }

  a:link,
  a:visited {
    color: var(--cor-terciaria);
    text-decoration: none;
  }

  a:hover,
  a:active {
    color: var(--cor-secundaria);
  }

  .social-network {
    margin-top: 2rem;
    /* justify-content: space-evenly; */
    gap: 2rem;
  }
}

footer {
  display: flex;
  justify-content: center;
  padding: 1.25rem;

  p {
    margin-top: 0.5rem;
    align-items: center;
    color: var(--cor-primaria);
  }
}

/*****************************
  RESPONSIVIDADE PAG INICIAL
******************************/

@media (max-width: 1133px){
  .foto-container {
    margin-left: 3rem;
  }

  .logo{
      width: 1.5rem !important;
      height: auto;
    }
}

@media (max-width: 1132px) and (min-width: 992px){
  .logo{
      width: 2.5rem !important;
      height: auto;
    }
}

@media(max-width:993px) and (min-width:439px){
  .logo{
      width: 2rem !important;
      height: auto;
    }
}

@media (max-width: 993px) {
  html,
  body {
    overflow-x: hidden;
  }

  article{
    margin-top: 3rem;
  }
    
  body {
    display: flex;
    flex-direction: column;
    padding: 0;
  }

  section {
    width: auto;
    margin: 0;
  }

  #hero {
    display: flex;
    flex-direction: column;
    gap: 4rem;
    margin-right: 0;
    margin-top: 3rem;
  }

  #sobre {
    margin-top: 0;
  }

  #skills {
    margin: 0;
  }

  footer {
    margin: 0;
  }
}

@media (max-width: 670px) and (min-width:629px){

  main{
   margin: 0 4.25rem 0 4.25rem;
  }

  #hero {
    display: flex;
    flex-direction: column;
    align-items: center;
     gap: 4rem;
  }
}

@media (max-width: 630px){
  html,
  body {
    overflow-x: hidden;
  }

  main{
   margin: 0 4.25rem 0 4.25rem;
  }

  nav ul, li{
    font-size: larger;
  }

  #hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4rem;

    article{
      margin-top: 5rem;
    }

    .foto-container {
      display: flex;
      align-items: center;
      justify-content: center;
      border: 1px solid var(--cor-primaria);
      border-radius: 50%;
      width: min(800px, 70vw); /* ajusta conforme o espaço */
      height: min(800px, 70vw);
      /*width: fit-content;*/
      padding: 0.5rem;
      margin: 0;
    }

    img {
      aspect-ratio: 1/1;
      object-fit: cover;
      border-radius: 50%;
      object-fit: cover;
      display: block;
    }

    article {
      display: flex;
      flex-direction: column !important;
      flex-wrap: wrap !important; /* permite quebra se necessário */

      span.destaque{
        font-size: 2rem;
     }
    
      .tag {
        font-size: medium;
      }

      p {
        font-size: medium;
      }

      .destaque {
        font-size: medium;
      }

      .titulo {
        font-size: 5rem;
      }
    }
  }

  #skills {
    margin: 0;
  }

  #sobre,
  #skills {
    h2 {
      font-size: 4rem;
    }
  }

  #hero,
  #sobre {
    margin-top: 0;
  }

  footer {
    display: flex;
    justify-content: center;
    margin: 0 -1.3rem 0 -1.3rem;

    li,
    a {
      width: 20px;
      display: inline;
    }

    .footer__icones a {
      font-size: 2rem !important;
    }

    p {
      font-size: smaller;
    }
  }
}

@media (max-width: 440px) and (min-width: 200px) {
 
   main{
    margin: 0 2.5rem 0 2.5rem;
  }

  nav {
    .assina { font-family: "Tangerine", cursive;
      font-weight: 700;
      font-style: normal;
      font-size: 3.5rem;
      color: var(--cor-secundaria);
  };
    

    .logo{
      width: 2rem !important;
      height: auto;
    }

    ul {
      gap: 1rem;
    }

    li, a {
      font-size: large;
    }
  }

  #hero {
    article {
      display: flex;
      flex-direction: column;
      flex-wrap: wrap;

      h1,
      h3 {
        margin: 0;
        margin-bottom: 0.3rem !important;
        line-height: 1.2rem !important; /* ajusta a altura das próprias linhas */
      }

      .tag {
        font-size: small;
      }

      p {
        font-size: medium;
      }

      .destaque {
        font-size: medium;
      }

      .titulo {
        font-size: 3rem;
      }

      button {
        font-size: smaller;
      }
    }
  }

  section {
    p {
      font-size: small;
    }
  }

  #sobre,
  #skills {
    h2 {
      font-size: 2rem;
    }

    p,
    li {
      font-size: small;
    }

    padding: 0.5rem 0 1rem 0;
  }

  #hero,
  #sobre {
    margin-top: 0;
  }
}

/**********************
  ESTILO PAG PROJETOS
***********************/
html, body{
  overflow-x: hidden;
}


.projetos {
  margin-top: 4rem;
  article {
    line-height: 1.5rem;
  }

  p {
    margin-bottom: 1rem;
    line-height: 1.8;
  }

  h3 {
    color: var(--cor-primaria);
    font-size: 1.5rem;
    margin: 5rem 0 1rem 0;
  }

  h3,
  ul {
    display: flex;
    justify-content: center;
  }

  ul {
    display: flex;
    gap: 1rem;
    margin-bottom: 3rem;
    li {
      list-style: disc;
      margin-left: 1rem;
      /* margin-bottom: 10px; */
    }

    /* li:last-child {
      margin-bottom: 0;
    } */
  }

  .enfase a {
    text-decoration: none;
    color: var(--cor-secundaria);

    &:hover {
      text-decoration: underline;
      color: var(--cor-verde-musgo);
    }
  }

  .slider {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    position: relative;
    margin: 0 auto;
    border-radius: 0.5rem 0.5rem 0 0;
    /* só aqui os icones de links do projeto tem uma margem maior para não ficar escondido atrás do carrossel*/
    .projeto-links{
      margin-top: 9rem;
    }
  }

  /* Contêiner dos slides */
  .slides {
    display: flex;
    width: 1000%; /* para 10 slides */
    transition: transform 0.5s linear;
 }
}

#prototipos{
  .fa-brands.fa-figma{
    font-weight: 900;
  }

  img{
    border-radius: 0.5rem;
  }
}

 /* Movimentação dos slides conforme o botão radio selecionado */
#radio1:checked ~ .slides {transform: translateX(0%);}
#radio2:checked ~ .slides {transform: translateX(-10%);}
#radio3:checked ~ .slides {transform: translateX(-20%);}
#radio4:checked ~ .slides {transform: translateX(-30%);}
#radio5:checked ~ .slides {transform: translateX(-40%);}
#radio6:checked ~ .slides {transform: translateX(-50%);}
#radio7:checked ~ .slides {transform: translateX(-60%);}
#radio8:checked ~ .slides {transform: translateX(-70%);}
#radio9:checked ~ .slides {transform: translateX(-80%);}
#radio10:checked ~ .slides {transform: translateX(-90%);}

/* Destaque do botão ativo na navegação automática*/
  #radio1:checked ~ .navigation-auto .auto-btn1,
  #radio2:checked ~ .navigation-auto .auto-btn2,
  #radio3:checked ~ .navigation-auto .auto-btn3,
  #radio4:checked ~ .navigation-auto .auto-btn4,
  #radio5:checked ~ .navigation-auto .auto-btn5,
  #radio6:checked ~ .navigation-auto .auto-btn6,
  #radio7:checked ~ .navigation-auto .auto-btn7,
  #radio8:checked ~ .navigation-auto .auto-btn8,
  #radio9:checked ~ .navigation-auto .auto-btn9,
  #radio10:checked ~ .navigation-auto .auto-btn10{
    background-color: var(--cor-primaria);
  }

  .projeto-links {
    text-align: center;

    a {
      padding: 0 0.5rem;
      text-decoration: none;
      color: var(--cor-primaria);
      transition: color 0.3s ease;
    }

    a:hover {
      color: var(--cor-secundaria);
    }
  }

  .slider input {
    display: none;
  }

  .slide {
  width: 10%; /* cada slide ocupa 100% da largura do .slider */
  flex-shrink: 1;
}

  .slides img {
    width: 100%;
    max-width: 100%;
    height: auto;
    border-radius: 0 .5rem 0 0;
  }

  .navegacao-manual {
    border: solid transparent;
    border-radius: 0 0 0.5rem 0.5rem;
    position: absolute;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    margin-top: -0.5rem;
    padding: 1.8rem;
    display: flex;
    justify-content: center;

    /* radio manual de mudar as imgs*/
    label.manual-btn {
      border: 0.125rem solid var(--cor-primaria);
      padding: 0.319rem;
      border-radius: 0.625rem;
      cursor: pointer;
      transition: 1s;
      margin-right: 0.4rem;
    }
  }

  /* navegação automática */
  .navigation-auto {
    border: solid transparent;
    background-color: rgb(2, 27, 16);
    position: absolute;
    border-radius: 0 0 0.5rem 0.5rem;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    margin-top: -1rem; /*ajusta a posição vertical da div navigation-auto*/
    display: flex;
    justify-content: center;
    padding: 2rem;
  }
/*radio q avança conforme as imgs do carrossel*/
  .navigation-auto .nav-btn{
  margin-top: 0.35rem;
  margin-right: 0.47rem;
  padding: 0.270rem;
  border-radius: 0.625rem;
}

  .navigation-auto div.nav-btn:not(:last-child) {
    margin-right: 0.5rem; /*espaço entre as divs navigation-auto para encaixar nos btns radios*/
  }

  .navigation-auto div {
    border: 0.125rem solid transparent;
    padding: 0.313rem;
    border-radius: 0.625rem;
    cursor: pointer;
    transition: 1s;
  }

  /*manual-btn sobrepoe  nav-btn auto-btn1 então deixo ele com borda transparente*/
  .manual-btn {
    border: 0.125rem solid transparent;
    padding: 0.313rem;
    border-radius: 0.625rem;
    cursor: pointer;
    transition: 1s;
  }

  .manual-btn:not(:last-child) {
    margin-right: 0.5rem;
  }

  .manual-btn:hover {
    background-color: var(--cor-secundaria);
  }
  .navegacao-manual div.manual-btn:not(:last-child) {
    margin-right: 2.5rem; /*espaço entre os btns radios dos slides*/
  }

 /*************************
    Carrossel mobile 
*************************/

.slider-mobile {
  width: 100%;
  max-width: 320px; /* tamanho ideal para imagens mobile */
  margin: 0 auto;
  padding-bottom: 5rem;
  overflow: hidden;
  position: relative;
  border-radius: 0.5rem;
}

/* Esconde os radios padrão*/
.slider-mobile input {
  display: none;
}

/* Faixa de slides (container horizontal) */
.slides-mobile {
  display: flex;
  transition: transform 0.4s ease;
}

/* Cada slide ocupa 100% do carousel */
.slide-m,
.slide_first_mobile {
  min-width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Imagens dentro do slide */
.slides-mobile img {
  width: 100%;            /* imagem ocupa o slide */
  height: auto;
  display: block;        /* impede colapso */
  object-fit: contain;  /* mantém proporção */
}

/* -----------------------------
      Navegação MANUAL
------------------------------*/

.navegacao-manual-mobile {
    border-radius: 0 0 0.5rem 0.5rem;
    position: absolute;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    margin-top: -0.5rem;
    padding: 1.8rem;
    display: flex;
    justify-content: center;
    /* radio manual de mudar as imgs*/
    label.manual-btn {
      border: 0.125rem solid var(--cor-primaria);
      padding: 0.318rem;
      border-radius: 0.625rem;
      cursor: pointer;
      transition: 1s;
    }
}

.manual-btn {
    border: 0.125rem solid transparent;
    padding: 0.313rem;
    border-radius: 0.625rem;
    cursor: pointer;
    transition: 1s;
}

.manual-btn:not(:last-child) {
    margin-right: 0.5rem;
}

.manual-btn:hover {
  background-color: var(--cor-secundaria);
}

/* -----------------------------
      Navegação AUTOMÁTICA
------------------------------*/

.navigation-auto-mobile div{
    border: 0.125rem solid transparent;
    padding: 0.280rem;
    border-radius: 0.625rem;
    cursor: pointer;
    transition: 1s;
    margin-right: 0.580rem;
}

.navigation-auto-mobile{
    border: solid transparent;
    background-color: rgb(2, 27, 16);
    position: absolute;
    border-radius: 0 0 0.5rem 0.5rem;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    margin-top: -0.330rem; /* -0.4rem; ajusta a posição vertical da div navigation-auto*/
    display: flex;
    justify-content: center;
    padding: 1.5rem;
    padding-left: 1.98rem;
}

/* Destaca o ponto ativo radio q vai se movendo*/
#radio-mob1:checked ~ .slides-mobile { transform: translateX(0%); }
#radio-mob2:checked ~ .slides-mobile { transform: translateX(-100%); }
#radio-mob3:checked ~ .slides-mobile { transform: translateX(-200%); }
#radio-mob4:checked ~ .slides-mobile { transform: translateX(-300%); }
#radio-mob5:checked ~ .slides-mobile { transform: translateX(-400%); }
#radio-mob6:checked ~ .slides-mobile { transform: translateX(-500%); }
#radio-mob7:checked ~ .slides-mobile { transform: translateX(-600%); }
#radio-mob8:checked ~ .slides-mobile { transform: translateX(-700%); }
#radio-mob9:checked ~ .slides-mobile { transform: translateX(-800%); }

/* Cor do ponto ativo */
#radio-mob1:checked ~ .navigation-auto-mobile .auto-btn1,
#radio-mob2:checked ~ .navigation-auto-mobile .auto-btn2,
#radio-mob3:checked ~ .navigation-auto-mobile .auto-btn3,
#radio-mob4:checked ~ .navigation-auto-mobile .auto-btn4,
#radio-mob5:checked ~ .navigation-auto-mobile .auto-btn5,
#radio-mob6:checked ~ .navigation-auto-mobile .auto-btn6,
#radio-mob7:checked ~ .navigation-auto-mobile .auto-btn7,
#radio-mob8:checked ~ .navigation-auto-mobile .auto-btn8,
#radio-mob9:checked ~ .navigation-auto-mobile .auto-btn9 {
  background-color: var(--cor-primaria);
}
/* -------------------------------------
 Fim da estilização dos carroseis
 continuação da estilização de projetos
---------------------------------------*/

.projeto-links{
    margin: 4rem 0 4rem 0;
  }

  .Alura_Books
  .HBCard{
    display: flex;
    flex-direction: column;
  }
  
article ul{
  display: flex;
  flex-wrap: wrap;
}

.loginPage img{
  width: 100%;
  overflow: hidden;
  position: relative;
}

.Alura_Books{

    .imgs{
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }

  .mobile{
    max-width: 320px; /* tamanho ideal para imagens mobile */
  }
}

.HBCard{

  .imgs{
    display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
  }

  .cardFechado{
    width: 30%;
    border-radius: 1rem;
  }

  .cardAberto{
    width: 50%;
    border-radius: 1rem;
  }
  
}

.Alura_Books
.Alura_Plus
.FlexTurismos
.calculadora{
  img{
    width: 100%;
  }
}

 img{ 
    width: 100%;
  }

/************************************
    RESPONSIVIDADE PAG PROJETOS
*************************************/
@media (max-width: 900px) and (min-width: 899px) {
  body{
    margin: 1rem 2rem 1rem 2rem;
    padding-left: 2rem;
    display: flex;
    justify-content: center;
    overflow-x: hidden !important;
    box-sizing: border-box;
  }

  .projetos {
    h2, p{
      margin-left: 2rem;
    }
  }

  .slides img {
    border-radius: 0.5rem;
  }

  .navigation-auto,
  .navegacao-manual {
    padding: 1rem;
    margin-top: 1rem;
  }


  .slider {
  width: 100%;
  max-width: 45rem; /* ou ajuste conforme necessário */
  overflow: hidden;
  position: relative;
}

.slides {
  display: flex;
  width: 1000%; /* 10 slides = 1000% */
  transition: transform 0.5s ease-in-out;
}

.slide {
  width: 100%; /* cada slide ocupa 100% da largura do .slider */
  flex-shrink: 0;
}

.slide img {
  width: 100%;
  height: auto;
  display: block;
}

html, body {
  overflow-x: hidden;
}

}

@media (max-width: 700px) and (min-width: 200px) {

  body{
    /* margin: 1.5rem 3rem 1.5rem 3rem; */
    padding: 0;
    display: flex;
    justify-content: center;
    overflow-x: hidden;
    box-sizing: border-box;
  }

  main{
    margin-top: 5rem;
  }

   nav {
    ul {
      gap: 1rem;
    }

    li, a {
      font-size: large;
    }
  }

  .slides .img-vidaPlus-mobile{
    display: inline-block;
    width: 100%;
    height: auto;
 }

 div.slider{
  margin: 0 auto;
  width: 100%;
  height: auto;
  overflow: hidden;
  border-radius: 0.5rem 0.5rem 0 0;
 }

  .projetos {
    padding-bottom: 3rem;
    margin-top: 0;

    .slider{
      margin-bottom: auto;
    }

    h2{
      font-size: 2.5rem !important;
    }

    h2, p{
      margin-left: 0.2rem;
    }

    h3 {
      font-size: 1.2rem;
      margin: 2rem 0 1rem 0;
    }

    ul, p, li{
      font-size: medium;
    }

    ul {
      li {
        list-style: disc;
      }
    }

      .cardFechado,
      .cardAberto{
        width: 90%;
      }

    div.projeto-links{
      display: flex;
      justify-content: center;
      padding: 0;
      margin: 6rem 0 3rem 0;

      a{
        font-size: medium;
        color: var(--cor-primaria);
      }
    }
    
    .slides{
      margin-bottom: 0.519rem;
    }

    .navigation-auto{
      padding: 1rem;
    }
    
    .navegacao-manual{
      margin-top: -0.7rem; 
      padding: 1rem;
    }

    padding-bottom: 0;

    div.projeto-links{
      margin: 2rem 0 2rem 0;
  }

    .slider .projeto-links{
        margin: 5rem 0 3rem 0;
    }

  }

  .slider-mobile {
    height: auto;
  }

}