#projects { /* Background da section */
    background-color: var(--bg-color-figma);
}



/* Aqui começa a configuração geral das molduras e os titulos a direita */
.container_secundario { /* Container que engloba as molduras e os titulos a direita */
    width: 100%; 
    display: flex; 
    flex-wrap: wrap; 
    box-sizing: border-box; 
    padding: 2rem; 
    gap: 2rem;
}

.container_imagem_projects { /* Container que engloba todas as molduras */
    flex: 2 1 300px; 
    min-width: 250px; 
    display: flex; 
    flex-direction: column; 
    gap: 10rem;
    
}

.project_container { /* Container de uma única moldura que engloba tela e imagem  */
    background-color:#000; 
    border:8px solid #374151; 
    border-radius:30px; 
    box-shadow:0 0 30px rgba(0,0,0,0.6); 
    width:100%; height:400px; 
    padding:20px; 
    display:flex; 
    align-items:center; 
    justify-content:center;
}

.tela { /* Container que engloba a imagem */
    /* background:linear-gradient(to bottom right, #1f2937, #0f172a);  Gradiente de tela */ 
    border-radius:20px; 
    width:100%; 
    height:100%;     
    display: flex; 
    align-items: flex-end; 
    justify-content: center;
}

#tela_project_01 { /* Primeira moldura */
    background-color: var(--color_violet_moldura01);
}

#tela_project_02 { /* Segunda moldura */
    background-color: var(--color_red_moldura02);
}

#tela_project_03 { /* Terceira moldura */
    background-color: var(--color_blue_moldura03);
}

#tela_project_04 { /* Quarta moldura */
    background-color: var(--color_green_moldura04);
}

#tela_project_05 { /* Quinta moldura */
    background-color: var(--color_violet_moldura05);
}

#tela_project_06 { /* Sexta moldura */
    background-color: var(--color_brown_moldura06);
}

.container_imagem { /* Container que engloba a imagem */
    width: 90%; 
    height: 90%; 
    display: flex; 
    justify-content: center;
}

.imagem_projects { /* Imagem dentro da moldura */
    width: 100%; 
    height: 100%; 
    object-fit: cover; 
    border-radius: 15px;
}

.container_descricao { /* Container de descrição a direita */
    flex: 1 1 300px; 
    min-width: 250px; 
    padding: 2rem; 
    box-sizing: border-box;
    /* margin-bottom: 13rem; */
}

.fixedText { /* Texto fixo a direita */
    position: sticky; 
    top: 40%;
}

#projectTitle { /* Titulo do projeto */
    font-size:4rem; 
    margin-bottom:1rem; 
    transition:color 0.3s ease;
    text-align: center;
}

#projectParagraph { /* Paragrafo do projeto */
    font-size: 1.7rem; 
    color: var(--text-color-figma);
    margin-bottom: 1rem;
}

#projectIcons { /* Container dos icones */
    display: flex; 
    gap: 1rem; 
    flex-wrap: wrap;
}

#btn_project { /* Botão ver site configurações apenas pra Project, falta a classe btn que está em home.css*/
    margin-top: 3rem; 
    border-radius: 10px; 
    background: rgb(23, 23, 23); 
    --tw-shadow: inset 0 2px 10px var(--tw-shadow-color, #ffffff1f); 
    box-shadow: var(--tw-shadow);
    color: var(--text-color-white);
    border: .2rem solid var(--bg-color-header);
    outline: .2rem solid transparent;
    transition: .5s ease;
}

#btn_project:hover {
    outline-color: var(--text-color-figma); 
}

/* Aqui termina a configuração geral das molduras e os titulos a direita */





.cert-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 20px;
  padding: 40px;
}