body.light-mode {
  background-color: #ffffff;
  color: #000000;
}
body.light-mode body,
header,
nav,
section {
  transition: background-color 0.2s ease, color 0.2s ease;
}

body.light-mode header {
  background-color: #F8F8FF;
  box-shadow: 0 4px 5px rgba(0, 0, 0, 0.1);
}
body.light-mode .texto-sobre h1 {
    text-shadow: 1px 4px 3px rgb(165, 165, 165);

}

body.light-mode .highlight {
  color: #5e46d2;
  text-shadow: 1px 1px 3px rgba(131, 97, 255, 0.7);
  border-right: 2px solid #8361FF;
}
body.light-mode .logo {
  color: #5e46d2;
}

body.light-mode nav ul li a {
  color: #1c1c1c;
}

body.light-mode nav ul li a.active,
body.light-mode nav ul li a:hover {
  color: #5e46d2;
}

body.light-mode nav ul li a.active::after,
body.light-mode nav ul li a:hover::after {
  background-color: #5e46d2;
}

body.light-mode .btn{
      color: #1c1c1c;
  background-color: #ffffff;
  border: 2px solid #5e46d2;
}
body.light-mode .btn1 {
  color: #f2f2f2;
  background-color: #5e46d2;
  border: 2px solid #5e46d2;
}

body.light-mode .btn:hover,
body.light-mode .btn1:hover {
  background-color: #5e46d2;
  color: white;
}

body.light-mode .titulo-sobre,
body.light-mode .texto-sobre h3 {
  color: #5e46d2;
      text-shadow: 1px 4px 3px rgb(160, 160, 160);

}

body.light-mode .caixa {
  background-color: #e5e5e5;
  color: #1c1c1c;
      text-shadow: 1px 4px 3px rgb(233, 233, 233);
}

body.light-mode .caixa strong,
body.light-mode .caixa h3 {
  color: #1c1c1c;
      text-shadow: 1px 4px 3px rgb(255, 255, 255);

}
body.light-mode .icone {
    background-color: #5e46d2;
}

body.light-mode .caixa p {
  color: #2b2a2a;
}
body.light-mode .text h1 {
    text-shadow: 1px 4px 3px rgb(130, 130, 130);
}

body.light-mode .sobre-mim {
    background-color: #ffffff;
    color: rgb(0, 0, 0);
    text-shadow: 1px 4px 3px rgb(172, 172, 172);

}
body.light-mode .resumo {
    background-color: #ffffff;
    color: rgb(0, 0, 0);
    text-shadow: 1px 4px 3px rgb(255, 255, 255);

}
body.light-mode .portfolio {
    padding: 50px 80px;
    background-color: #ffffff;
    color: rgb(0, 0, 0);
}

body.light-mode .tab:hover {
    background: #d9d9d9;
    color: #000000;
    box-shadow: 0px 0px 20px rgb(100, 100, 100);
    transition: 0.1s;

}
body.light-mode .tab{
        background: #e5e5e5;

}

body.light-mode .card{
    background: #e5e5e5;
}
body.light-mode .card p{
    color: #000000;
}

body.light-mode .card-footer a {
    color: #5e46d2;
  }
body.light-mode  .card-footer button {
    background: #c5c4c4;
    color: rgb(0, 0, 0);
}
body.light-mode .cardCert{
    background: #e5e5e5;
    color: #000000;
}
body.light-mode .cardVolun{
    background: #e5e5e5;
        color: #000000;

}

body.light-mode .cardVolun p{
    color: #000000;
}

body.light-mode .cardVolun-footer a {
    color: #5e46d2;
  }
body.light-mode  .cardVolun-footer button {
    background: #c5c4c4;
    color: rgb(0, 0, 0);
}

 body.light-mode  .form-left input {
    border: 1px solid #000000;
    background: transparent;
    color: rgb(0, 0, 0);
  }

body.light-mode  .form-left textarea {
    border: 1px solid #000000;
    background: transparent;
    color: rgb(0, 0, 0);
    
  }
body.light-mode .underline {
    background: rgb(0, 0, 0);
  }

body.light-mode .footer {
   
    background-color: #F8F8FF;
    color: #000000;
  }
  
body.light-mode .titulo-portfolio {
          color: #5e46d2;
          text-shadow: 1px 4px 3px rgb(160, 160, 160);
}

body.light-mode .titulo-conhecimento{
         color: #5e46d2;
          text-shadow: 1px 4px 3px rgb(160, 160, 160);
}

body.light-mode .titulo-contato {
         color: #5e46d2;
          text-shadow: 1px 4px 3px rgb(160, 160, 160);
}

body.light-mode nav .menu-icon{
  color: #5e46d2;
}


@media (max-width: 768px) {

  body.light-mode nav .close-icon {
    color: white;
  }

  body.light-mode nav ul li a {
    color: white;
  }
  body.light-mode nav ul li a:hover {
    color: rgb(255, 255, 255);
  }

   body.light-mode nav ul li a.active::after{
    background-color: #ffffff;
}
    body.light-mode nav ul li a:hover::after {
    background-color: #ffffff;
    }
}


  @media (max-width: 768px) {
  body.light-mode .portfolio {
    padding: 30px 20px;
  }
 body.light-mode .content.active {
    display: flex; /* ou block, depende do seu layout */
    max-width: 100%;
    padding-left: 20px;
    padding-right: 20px;
  }
  
  body.light-mode .titulo-portfolio {
    margin-left: 0;
    text-align: center;
  }

  body.light-mode .tabs {
    flex-direction: column;
    gap: 10px;
    margin: 0 10px;
  }

  body.light-mode .tab {
    width: 100%;
    padding: 15px;
    margin: 0 auto;
  }

  body.light-mode .content {
    flex-direction: column;
    padding: 10px 10px;
    margin: 0;
  }

  body.light-mode .card, .cardCert, .cardVolun{
    max-width: 100%;
}

 body.light-mode .card-footer a {
  color: #5e46d2;
  text-decoration: flex;
  font-size: 18px;
  
}

 body.light-mode .card-footer button{
  padding: 10px 35px;
  font-size: 18px;
}
 body.light-mode .cardVolun-footer button {
  padding: 10px 35px;
  font-size: 18px;
}
}


  body.light-mode .project-description {
    color: #000000;
  }

     body.light-mode .project-title {
    color: #5e46d2;
    text-shadow: 1px 4px 3px rgb(165, 165, 165);
  }
  
    body.light-mode .tools-title {
    color: #000000;
    text-shadow: 1px 4px 3px rgb(165, 165, 165);
  }
   body.light-mode .tool {
    color: rgb(0, 0, 0);
    
  }
  
  body.light-mode .tool:hover {
    background: #5e46d2;
    color: white;
  }

  body.light-mode .project-objective {
    background-color: #e5e5e5;
  }

  /* Botão de voltar */ 
  body.light-mode .btn-back {
    background-color: #e5e5e5;
    color: rgb(0, 0, 0);
  }

  body.light-mode .btn-download {
      border: 2px solid #5e46d2;
            background-color: #5e46d2;
      color: #ffffff;
      box-shadow: 0 0 10px rgba(131, 97, 255, 0.6);
    }
   body.light-mode .btn-download:hover {
      background-color: #5e46d2;
      color: #fff;
      box-shadow: 0px 0px 20px rgba(131, 97, 255, 1);
    }
  @media (max-width: 768px) {
   body.light-mode .read-more-btn {
  background-color: transparent;
  color: rgba(0, 0, 0, 0.618);

}
  }

   body.light-mode .project-image {
    background: #ffffff;

  }

  body.light-mode .project-objective h3 {
    color: #000000;
    text-shadow: 1px 4px 3px rgb(255, 255, 255);
  }

  
 @media (max-width: 768px) {
 
body.light-mode .content.active {
    max-width: 100%;
    padding-left: 10px;
    padding-right: 10px;
  }
}