/* ESSE É UM ARQUIVO SEPARADO QUE SERVE PARA IMPOR O ESTILO DO CÓDIGO */ 

.btn-custom {
    background-color: #ba5f3bd3;
    color: #fff; 
    font-size: 0.85rem; /* Diminui o tamanho do texto */
    padding: 1px 5px; /* Reduz o espaço interno do botão */
    border-radius: 5px; /* Mantém bordas arredondadas */
}

.btn-official-site {
    background-color: #d1a546; /* Cor personalizada para o botão */
}

.btn-achievemtens {
    background-color: #46b1d1; /* Cor personalizada para o botão */
}

.icon-container {
    text-align: center;
}

.icon-container img {
    margin-bottom: 1px;
    /* Espaçamento entre o ícone e o texto */
}

.list-inline .icon-container p {
    font-size: 14px;
    /* Ajuste do tamanho da fonte conforme necessário */
    font-family: 'Saira Extra Condensed', sans-serif;
    /* Usar a fonte 'Saira Extra Condensed' */
    /* font-weight: bold; */
    letter-spacing: 0.3px;
}

.icon-container {
    transition: color 0.3s ease;
    /* Adiciona transição para a propriedade color */
}

.icon-container:hover {
    color: #ba5e3b;
    /* Cor ao passar o mouse */
}

.icon-container img {
    filter: grayscale(100%);
    transition: filter 0.3s ease;
    /* Adiciona transição para a propriedade filter */
}

.icon-container img:hover {
    filter: none;
    /* Retorna a imagem do jeito original */
}

.iframe-container {
    position: relative;
    overflow: hidden;
    width: 100%;
    padding-top: 56.25%;
}

.iframe-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.fa-ul {
text-align: justify;
}

.sobre-mim {
    font-size: auto;
    text-align: justify;
}

h2.mb-5 {
    margin-bottom: 2rem;
}

h3.mb-3 {
    margin-bottom: 1rem;
}    

/* Parte para o novo escopo de layout */

.project {
display: flex;
align-items: center;
justify-content: space-between;
margin: 50px 0;
}

.project-content {
    display: flex;
    align-items: center;
    gap: 25px; /* Espaço entre imagem e texto */
}

.project-img img {
    width: 100%;  /* Faz a imagem se ajustar ao contêiner */
    max-width: 260px; /* Limite no desktop */
    height: auto; /* Mantém a proporção */
    border-radius: 10px; /* Arredonda as bordas */
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.18); /* Sombra leve para a direita */
}

.project-info {
    flex: 2;
    text-align: left;
}

/* Ajustes para telas menores (celular) */
@media (max-width: 768px) {
    .project-content {
        flex-direction: column; /* Empilha os elementos */
        align-items: flex-start; /* Alinha os itens à esquerda */
    }

    .project-img {
        text-align: left; /* Garante que a imagem fique à esquerda */
    }

    .project-img img {
        max-width: 80%; /* Evita que a imagem fique muito grande */
        display: block; /* Evita que a imagem seja influenciada pelo alinhamento do texto */
        margin-left: 0; /* Garante que fique colada na esquerda */
    }

    .project-info {
        text-align: left; /* Mantém o texto alinhado à esquerda */
    }
}


.project-title {
font-size: 1.8rem;
font-weight: bold;
margin-bottom: 10px;
text-align: justify;
}

.project-description {
    font-size: 1rem;
    margin-bottom: 10px;
    text-align: justify;
}

.project-technologies {
    font-size: 0.9rem;
    color: #666;
    margin-bottom: 10px;
    text-align: justify;
}

.project-img img:hover {
    transform: scale(1.05);
}     

/* Parte dos links */
.project-links {
    display: flex;
    align-items: baseline; 
    gap: 10px; 
}

.project-link {
    font-size: 0.95rem;
    color: #ffffff;
    text-decoration: none;
    font-weight: bold;
}

.second-link {
    color: #ffffff;
}      

/* Estilo do botão de tela cheia */
#fullscreenBtn {
    display: block;
    margin: 10px 0 10px auto;
    background-color: #9b9b9b;
    color: white;
    border: none;
    cursor: pointer;
    font-size: 12px;
    border-radius: 5px;
}

#fullscreenBtn:hover {
    background-color: #bd4738;
}

/* Estilo do contêiner do iframe */
.iframe-container {
    margin-top: 5px; /* Adiciona um espaçamento entre o botão e o iframe */
    width: 100%;
    height: 100%;
}