/* Reset */
* {
    padding: 0;
    margin: 0;
    font-family: 'Roboto', sans-serif;
    box-sizing: border-box;
  }
  
  /* Variables */
  :root {
    --main-color: #54B689;
    --main-text-color: #d4d4d4;
    --border-color: #c1bbbb;
    --bio-bg-color: #132439;
    --bio-border-color: #293544;
    --about-bg-color: #050d17;
  }
  
  html {
    scroll-behavior: smooth;
  }


  /* General */
  .highlight {
    color: var(--main-color);
  }
  .portfolio-highlight {
    font-weight: bold;
  }
  
  /* Containers */
  #container {
    display: flex;
    flex-direction: row;
    color: var(--main-text-color);
  }
  
  #bio-container {
    flex: 1 1 20%;
    min-height: 100vh;
    background-color: var(--bio-bg-color);
    text-align: center;
    padding: 40px 12px;
    border-right: 5px solid var(--bio-border-color);
  }
  
  #about-container {
    flex: 1 1 80%;
    min-height: 100vh;
    background-color: var(--about-bg-color);
    padding: 50px;
  }



  /* Configuração inicial do modal */
  #openmodal_menu {
    position: fixed;
    top: 0;
    left: -310px; /* Escondido fora da tela */
    width: 20%; /* Largura do menu */
    height: 100%;
    background-color: #f4f4f4; /* Cor de fundo */
    box-shadow: 2px 0 5px rgba(0, 0, 0, 0.3);
    overflow-y: auto; /* Rolagem interna, se necessário */
    z-index: 1000; /* Garante que fique acima de outros elementos */
    transition: left 0.3s ease; /* Animação suave ao abrir/fechar */
  }

  /* Mostrar o modal ao usar o ID como alvo */
  #openmodal_menu:target {
    left: 0; /* Move o menu para dentro da tela */
  }

  /* Conteúdo do modal */
  .modal-content_menu {
    padding: 20px;
    margin-top: 100px;
  }

  /* Botão de fechar */
  .close {
    position: absolute;
    top: 10px;
    right: 10px;
    text-decoration: none;
    font-size: 20px;
    color: #333;
  }



/* Links do menu */

#summary-title_menu {
  color: #050d17;
  font-size: 20px;
  font-weight: bold;
}

.summary-container-text {
  margin: 15px 0;
  font-size: 16px;
  color: #333;
  text-decoration: none;
  display: block;
}

  .summary-container-text:hover {
    color: #007BFF;
  }

  /* Ícone do menu */
  #img_menu {
    cursor: pointer;
    width: 40px;
  }

    /* Links do menu */
    .summary-container-text {
      margin: 15px 0;
      font-size: 16px;
      color: #333;
      text-decoration: none;
      display: block;
    }

    .summary-container-text:hover {
      color: #007BFF;
    }

    /* Ícone do menu */
    #img_menu {
      cursor: pointer;
      width: 40px;
      
    }

    .link-menu {
      position: fixed;
      top: 20px;
      left: -40px; /* Parte inicial visível fora da tela */
      z-index: 1001;
      width: 60px; /* Largura total do menu */
      height: 40px; /* Altura do menu */
      overflow: hidden; /* Esconde partes excedentes */
      transition: left 0.3s ease; /* Animação suave */
      display: flex;
      align-items: center;
      justify-content: center;
    }
    
    .link-menu:hover {
      left: 0px; /* Move o menu para dentro da tela ao passar o mouse */
    }
    
    .link-menu img {
      width: 40px; /* Tamanho da imagem dentro do botão */
      height: 40px;
      border-radius: 10px;
    }
    


    /* Bio container */

    #bio-container {
      position: sticky;
      top: 0px; /* Define a distância do topo quando o elemento se torna fixo */
      height: 100vh; /* Garante que o conteúdo ocupe toda a altura da tela */
      overflow-y: hidden; /* bloqueia rolagem interna*/
  }

  #bio-container h2 {
    margin-bottom: 25px;
    
  }
  
  #bio-container p {
    margin-bottom: 20px;
    font-size: 25px;
  }
  
  #bio-container #contact-text {
    font-weight: bold;
    font-size: 20px;
  }
  
  #bio-image {
    width: 175px;
    height: 175px;
    border-radius: 50%;
    margin-bottom: 25px;
  }
  
  #social-container {
    display: flex;
    justify-content: center;
    list-style: none;
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 25px;
    padding-bottom: 25px;
  }
  
  #social-container li {
    flex: 1 1 0;
    max-width: 60px;
  }
  
  #social-container li a {
    color: var(--main-color);
    font-size: 30px;
  }
  
  #email-container {
    display: flex;
    justify-content: center;
    margin-right: 60px;
  }
  
  #email-container ion-icon,
  #email-container a {
    flex: 1 1 0;
    justify-content: center;
    padding-left: 10px;
  }
  
  #email-container a {
    color: var(--main-text-color);
    text-decoration: none;
    max-width: 225px;
  }
  
  #email-container ion-icon {
    color: var(--main-color);
    font-size: 20px;
    margin-left: 25px;
    max-width: 20px;
  }
  
  /* about container */
  #name {
    font-size: 42px;
    margin-bottom: 15px;
  }
  
  #title {
    font-size: 26px;
    margin-bottom: 15px;
    font-weight: bold;
  }
  
  .description {
    max-width: 75%;
    margin-bottom: 10px;
    font-size: 20px;
  }

  #btn-projects {
    font-weight: bold;
    font-size: 16px;
    color: var(--main-text-color);
    background-color: var(--main-color);
    border: 2px solid var(--main-color);
    border-radius: 5px;
    text-decoration: none;
    transition: .5s;
    margin: 25px 0;
    padding: 12px 10px;
    width: 150px;
    text-align: center;
    display: flex;
  }
  
  #btn-projects ion-icon,
  #btn-projects span {
    flex: 1 1 0;
  }
  
  #btn-projects ion-icon {
    font-size: 20px;
    max-width: 20px;
  }
  
  #btn-projects:hover {
    background-color: transparent;
  }
  
  #skills-section-title,
  #degree-skills-section-title,
  #job-skills-section-title,
  #hard-skills-section-title,
  #soft-skills-section-title,
  #language-skills-section-title,
  #certificate-carousel-title {
    border-top: 1px solid var(--border-color);
    padding-top: 20px;
    margin-bottom: 20px;
    font-size: 32px;
  }
  
  #skills-container {
    display: flex;
    flex-wrap: wrap;
    margin-top: 25px;
    
  }
  
  .skills-box {
    flex: 1 1 33%;
    max-width: 33%;
    margin-bottom: 35px;
    margin-right: 50px;
  }
  
  .skills-title {
    font-size: 24px;
    margin-bottom: 25px;
    font-weight: bold;
    padding-left: 10px;
    border-left: 5px solid var(--main-color);
  }
  
  .skills-box i {
    font-size: 45px;
    margin-right: 10px;
  }

  .degree-list {
    margin-left: 50px;
  }

  .degree-list li {
    margin-top: 10px;
  }

  .soft-skills-box {
    text-align: center;
    padding: 5px 10px; /* Espaçamento interno */
    color: var(--main-text-color); /* Cor do texto */
    font-size: 16px; /* Ajuste de tamanho de texto */
    font-weight: bold;

  }

  .soft-skills-title {
    font-size: 24px;
    margin-bottom: 25px;
    font-weight: bold;
    margin-right: 10px;
    padding-left: 10px;
    border-left: 5px solid var(--main-color);
    
  }

  #portfolio-section-title {
    padding-left: 42%;
    font-size: 50px;
    border-top: 1px solid var(--border-color);
    margin-top: 10px;
  }

  .carousel-container,
  .certificate-carousel-container {
    position: relative;
    margin: 50px auto;
    max-width: 90%;
    overflow: hidden;
    text-align: center;
  }

  .carousel-title,
  .certificate-carousel-title {
    font-size: 32px;
    color: var(--main-text-color);
    margin-bottom: 20px;
  }
  
  .carousel {
    display: flex;
    transition: transform 0.5s ease-in-out;
  }
  
  .carousel-item {
    min-width: 100%;
    box-sizing: border-box;
  }
  
  .carousel-item img {
    width: 100%;
    border-radius: 10px;
  }

  .carousel-item iframe {
    border-radius: 5px;
    width: 70%;
    height: 550px;
  }

  .image-counter {
    text-align: center;
    font-size: 16px;
    margin-top: 10px;
    color: #ffffff;
  }
  
  
  .prev-button,
  .next-button {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(0, 0, 0, 0.5);
    color: #fff;
    border: none;
    font-size: 24px;
    cursor: pointer;
    padding: 10px;
    border-radius: 50%;
  }
  
  .prev-button {
    left: 10px;
  }
  
  .next-button {
    right: 10px;
  }
  
  .prev-button:hover,
  .next-button:hover {
    background-color: rgba(0, 0, 0, 0.8);
  }


  /*About me caroussel*/
  #carousel-container-about-me {
    position: relative;
    margin: 50px auto;
    max-width: 90%;
    overflow: hidden;
    text-align: center;
  }
  
  #carousel-about-me {
    display: flex;
    transition: transform 1.0s ease-in-out;
  }

  .carousel-item-about-me {
    min-width: 100%;
    box-sizing: border-box;
  }

  .carousel-item-about-me p {
    margin-left: 10%;
    text-align: justify;
    font-size: 22px;
    margin-bottom: 5%;
    
  }

  .carousel-item-about-me img {
    width: 50%;
    border-radius: 10px;
  }


  #prev-button-about-me,
  #next-button-about-me {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(0, 0, 0, 0.5);
    color: #fff;
    border: none;
    font-size: 24px;
    cursor: pointer;
    padding: 10px;
    border-radius: 50%;
  }
  
  #prev-button-about-me {
    left: 10px;
  }
  
  #next-button-about-me {
    right: 10px;
  }
  
  #prev-button-about-me:hover,
  #next-button-about-me:hover {
    background-color: rgba(0, 0, 0, 0.8);
  }


  
/* Modal container */
.modaldialog {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.8);
  z-index: 9999;
  opacity: 0;
  transition: opacity 400ms ease-in-out;
  pointer-events: none;
  display: none;
}

.modaldialog:target {
  display: block;
  opacity: 1;
  pointer-events: auto;
}

.modal-content {
  width: 500px;
  position: relative;
  margin: 10% auto;
  padding: 20px;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
  text-align: left;
  color: black;
  
}

.modal-content h1 {
  margin-top: 10px;
}

/* Close button */
.close {
  background: #606061;
  color: #fff;
  font-size: 20px;
  font-weight: bold;
  line-height: 20px;
  position: absolute;
  top: 10px;
  right: 10px;
  text-align: center;
  width: 30px;
  height: 30px;
  text-decoration: none;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.3s ease;
}

.close:hover {
  background: #b50909;
}

.link-text {
  margin-bottom: 15px;
}

.link-text a {
  display: inline-block; /* Garante que o elemento respeite o padding */
  cursor: pointer;
  color: white;
  background-color:#54B689; /* Apenas para visualização */
  padding: 10px 430px 10px 430px;  /* Define a área clicável */
  text-decoration: none; /* Remove o sublinhado */
  border-radius: 5px; /* Adiciona bordas arredondadas */
}



  /* Mobile */
  @media(max-width: 450px) {
  
    #container {
      flex-direction: column;
    }
  
    #bio-container {
      
      position:relative;
      top: 0px; /* Define a distância do topo quando o elemento se torna fixo */
      height: 100vh; /* Garante que o conteúdo ocupe toda a altura da tela */
      overflow-y: hidden; /* bloqueia rolagem interna*/
    }
  
    #bio-container h2 {
      display: none; /* Oculta o título no mobile */
    }
  
    #bio-container p {
      max-width: 90%; /* Adapta largura ao mobile */
      margin: 10px auto;
      font-size: 18px; /* Reduz tamanho da fonte */
    }
  
    #bio-image {
      width: 120px;
      height: 120px;
    }
  
    #about-container {
      text-align: center;
      padding: 20px;
    }

    #title {
      font-size: 22px;
      margin-bottom: 15px;
      font-weight: bold;
      
  }
  
    .description {
      margin: 10px auto;
      max-width: 100%;
      line-height: 26px;
      text-align: justify;
      font-size: 16px; /* Reduz tamanho da fonte */
    }
  
    #btn-projects {
      margin: 20px auto;
      font-size: 14px;
      width: auto;
      padding: 10px 15px;
    }
  
    #skills-container {
      align-items: center;   /* Centraliza os itens */
    }
  
    .skills-box {
      flex: 1 1 100%;
      max-width: 100%;
      margin-bottom: 40px;
      text-align: left;
    }
  
    .skills-box i {
      font-size: 45px;
    }

    #portfolio-section-title {
      padding-left: 0vh;
      font-size: 40px;
      border-top: 1px solid var(--border-color);
      margin-top: 10px;
    }
  
    .carousel-container {
      max-width: 100%; /* Adapta largura */
      margin: 20px auto;
    }
  
    .carousel-item img {
      border-radius: 5px;
    }

    .carousel-item iframe {
      border-radius: 5px;
      width: 70%;
      height: 150px;
    }

   /*About me caroussel*/
   #carousel-container-about-me {
    position: relative;
    margin: 50px auto;
    max-width: 90%;
    overflow: hidden;
    text-align: center;
  }

  .carousel-item-about-me p {
    margin-left: 10%;
    text-align: justify;
    font-size: 12px;
    margin-bottom: 5%;
    
  }

  

  /* Configuração inicial do modal */
  #openmodal_menu {
    position: fixed;
    top: 0;
    left: -300px; /* Escondido fora da tela */
    width: 70%; /* Largura do menu */
    height: 100%;
    background-color: #f4f4f4; /* Cor de fundo */
    box-shadow: 2px 0 5px rgba(0, 0, 0, 0.3);
    overflow-y: auto; /* Rolagem interna, se necessário */
    z-index: 1000; /* Garante que fique acima de outros elementos */
    transition: left 0.3s ease; /* Animação suave ao abrir/fechar */
  }

  
  /*Modal*/
  .modal-content {
    width: 350px;
    position: relative;
    margin: 10% auto;
    padding: 20px;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    text-align: left;
  }
  
  .link-text a {
    display: inline-block; /* Garante que o elemento respeite o padding */
    cursor: pointer;
    color: white;
    background-color:#54B689; /* Apenas para visualização */
    padding: 10px 115px 10px 115px;  /* Define a área clicável */
    text-decoration: none; /* Remove o sublinhado */
    border-radius: 5px; /* Adiciona bordas arredondadas */
  }
  

  }