/* Estilos Gerais para o corpo da página */
body {
    font-family: 'Montserrat', sans-serif; /* Usando a fonte Montserrat, se importada, caso contrário, sans-serif genérica */
    margin: 0;
    padding: 0;
    box-sizing: border-box; /* Garante que padding e border sejam incluídos na largura/altura do elemento */
    overflow-x: hidden; /* Evita rolagem horizontal indesejada */
}

/* Estilos para a seção principal (Hero Section) */
.hero {
    display: flex; /* Permite que os filhos (hero-left e hero-right) fiquem lado a lado */
    min-height: 100vh; /* Ocupa a altura total da viewport */
    background-color: #222; /* Cor de fundo padrão da seção (para fallback ou pequenos gaps) */

    /* REMOVIDO: A imagem de fundo de toda a seção, ela volta para o hero-right */
    /* background-image: url('../style/img/Imagem WhatsApp 2025-07-25 às 10.36.58_733e0d36.jpg'); */
    /* background-size: cover; */
    /* background-position: center; */
    /* background-repeat: no-repeat; */
    /* background-attachment: fixed; */
}

/* Estilos para o lado esquerdo da seção (texto) - SEM O EFEITO VIDRADO */
.hero-left {
    flex: 1; /* Ocupa metade do espaço disponível */
    background-color: #1a1a1a; /* Cor de fundo escura sólida para o lado do texto */
    padding: 80px 60px; /* Espaçamento interno (top/bottom e left/right) */
    display: flex; /* Para alinhar o conteúdo verticalmente */
    flex-direction: column; /* Conteúdo em coluna */
    justify-content: center; /* Centraliza o conteúdo verticalmente */
    align-items: flex-start; /* Alinha o conteúdo à esquerda */
    box-sizing: border-box; /* Inclui padding na largura */
    color: #fff; /* Cor do texto dentro da seção */

    /* REMOVIDO: Propriedades do efeito vidrado */
    /* background-color: rgba(0, 0, 0, 0.4); */
    /* backdrop-filter: blur(10px) saturate(150%); */
    /* -webkit-backdrop-filter: blur(10px) saturate(150%); */
    /* border: 1px solid rgba(255, 255, 255, 0.2); */
}

/* Estilos para o lado direito da seção (imagem) - RESTAURADO */
.hero-right {
    flex: 1; /* Ocupa metade do espaço disponível */
    display: flex; /* Para centralizar a imagem */
    justify-content: center;
    align-items: center;
    overflow: hidden; /* Garante que a imagem não transborde */
}

.hero-right img {
    width: 100%; /* A imagem ocupa 100% da largura do seu contêiner */
    height: 100%; /* A imagem ocupa 100% da altura do seu contêiner */
    object-fit: cover; /* Recorta a imagem para cobrir a área mantendo a proporção */
    display: block; /* Remove espaço extra abaixo da imagem */
}

/* Estilos para os textos do lado esquerdo */
.hero-subtitle {
    font-size: 1.2em; /* Tamanho da fonte para "EU SOU" */
    margin-bottom: 5px; /* Espaçamento abaixo */
    color: #ccc; /* Cor cinza claro */
    text-transform: uppercase;
    font-weight: 400;
}

.hero-title {
    font-size: 3.8em; /* Tamanho grande para "MOISES SEBASTIAO" */
    margin: 0; /* Remove margens padrão */
    line-height: 1.1; /* Espaçamento entre as linhas */
    font-weight: 700; /* Negrito */
    text-transform: uppercase;
}

.hero-name {
    color: #fff; /* Cor branca para "MOISES" */
}

.hero-lastname {
    color: #5cb85c; /* Cor verde para "SEBASTIAO" (similar ao da imagem) */
}

.hero-occupation {
    font-size: 1em; /* Tamanho para "EMPREENDEDOR E WEB DESIGN" */
    color: #ddd; /* Cor cinza claro */
    margin-top: 15px; /* Espaçamento acima */
    margin-bottom: 5px; /* Espaçamento abaixo */
    text-transform: uppercase;
    letter-spacing: 0.1em; /* Espaçamento entre as letras */
}

.hero-paragraph {
    font-size: 0.85em; /* Tamanho para o parágrafo de texto */
    line-height: 1.6; /* Espaçamento entre as linhas do parágrafo */
    color: #bbb; /* Cor cinza mais claro para o parágrafo */
    margin-top: 30px; /* Espaçamento acima */
    max-width: 450px; /* Limita a largura do parágrafo */
}

/* Estilos para o botão circular */
.hero-button-container {
    margin-top: 30px; /* Espaçamento acima do contêiner do botão */
    margin-bottom: 20px; /* Espaçamento abaixo do contêiner do botão */
}

.hero-button {
    background-color: #5cb85c; /* Cor verde do botão */
    color: #fff; /* Cor do texto do botão */
    width: 55px; /* Largura do círculo */
    height: 55px; /* Altura do círculo */
    border-radius: 50%; /* Faz o elemento ser um círculo */
    display: flex; /* Para centralizar o "M" */
    justify-content: center; /* Centraliza horizontalmente */
    align-items: center; /* Centraliza verticalmente */
    font-size: 1.8em; /* Tamanho da fonte do "M" */
    font-weight: bold; /* Negrito */
    cursor: pointer; /* Indica que é clicável (embora não tenha funcionalidade JS aqui) */
    transition: background-color 0.3s ease; /* Transição suave na mudança de cor */
}

.hero-button:hover {
    background-color: #4cae4c; /* Cor verde um pouco mais escura ao passar o mouse */
}


/* Responsividade para telas menores (smartphones e tablets) */
@media (max-width: 992px) {
    .hero {
        flex-direction: column; /* Empilha os elementos verticalmente em telas menores */
    }

    .hero-left, .hero-right {
        flex: none; /* Remove a flexibilidade */
        width: 100%; /* Ocupa a largura total */
    }

    .hero-left {
        padding: 60px 30px; /* Ajusta o padding para telas menores */
        min-height: 400px; /* Garante uma altura mínima para o lado esquerdo */
        max-width: 100%; /* Garante que ocupe 100% da largura em mobile */
    }

    .hero-right {
        min-height: 350px; /* Altura mínima para a imagem em telas menores */
    }

    .hero-title {
        font-size: 3em; /* Reduz o tamanho da fonte dos títulos */
    }
}

@media (max-width: 576px) {
    .hero-left {
        padding: 40px 20px; /* Mais ajuste de padding para telas muito pequenas */
    }

    .hero-title {
        font-size: 2.5em; /* Reduz ainda mais o tamanho da fonte */
    }

    .hero-occupation {
        font-size: 0.9em;
    }

    .hero-paragraph {
        font-size: 0.8em;
    }
}


/* Seção Habilidades Profissionais */
.skills {
    min-height: 80vh; /* Altura mínima da seção */
    background-image: url('../style/img/Captura de Ecrã (103).jpg'); /* Substitua pelo caminho da sua imagem de fundo */
    background-size: cover;
    background-position: center;
    background-attachment: fixed; /* Efeito parallax */
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    padding: 50px 0; /* Padding vertical para garantir espaço */
}

.skills-overlay {
    background-color: rgba(0, 0, 0, 0.7); /* Sobreposição escura para legibilidade do texto */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 20px; /* Padding interno para o conteúdo */
    box-sizing: border-box;
}

.skills-main-title {
    font-size: 2.5em;
    color: #fff;
    margin-bottom: 10px;
    font-weight: 700;
    text-transform: uppercase;
}

.skills-subtitle {
    font-size: 1.2em;
    color: #ccc;
    margin-bottom: 50px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.skills-list {
    width: 90%; /* Largura da lista de habilidades */
    max-width: 800px; /* Largura máxima para centralizar */
    margin: 0 auto;
}

.skill-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* Alinha o nome da skill à esquerda */
    margin-bottom: 25px; /* Espaçamento entre cada item de skill */
}

.skill-name {
    font-size: 1em;
    color: #fff;
    margin-bottom: 8px; /* Espaçamento entre o nome e a barra */
    text-transform: uppercase;
    font-weight: 500;
}

.progress-bar-container {
    width: 100%;
    height: 12px; /* Altura da barra de progresso */
    background-color: #444; /* Cor da parte "vazia" da barra */
    border-radius: 6px;
    position: relative; /* Para posicionar a porcentagem */
}

.progress-bar-fill {
    height: 100%;
    background-color: #5cb85c; /* Cor verde da barra de preenchimento */
    border-radius: 6px;
    transition: width 1s ease-out; /* Animação suave no preenchimento */
}

.progress-percentage {
    position: absolute;
    right: 0;
    top: -20px; /* Posição acima da barra */
    font-size: 0.85em;
    color: #fff;
    font-weight: bold;
}

/* Responsividade para telas menores */
@media (max-width: 768px) {
    .skills-main-title {
        font-size: 2em;
    }

    .skills-subtitle {
        font-size: 1em;
        margin-bottom: 30px;
    }

    .skills-list {
        width: 95%; /* Aumenta a largura em telas menores */
    }

    .skill-name {
        font-size: 0.9em;
    }

    .progress-bar-container {
        height: 10px;
    }

    .progress-percentage {
        font-size: 0.75em;
        top: -18px;
    }
}

@media (max-width: 480px) {
    .skills-main-title {
        font-size: 1.8em;
    }

    .skills-subtitle {
        font-size: 0.9em;
        margin-bottom: 20px;
    }

    .hero-left, .hero-right {
        padding: 30px 15px; /* Ajusta o padding da seção hero também */
    }
}

/* Botão Voltar ao Topo */
#scrollToTopBtn {
    display: none; /* Escondido por padrão */
    position: fixed; /* Fixado na tela */
    bottom: 30px; /* 30px do fundo */
    right: 30px; /* 30px da direita */
    z-index: 99; /* Acima de outros elementos */
    border: none;
    outline: none;
    background-color: #5cb85c; /* Cor verde */
    color: white;
    cursor: pointer;
    padding: 15px;
    border-radius: 50%; /* Círculo */
    font-size: 1.2em; /* Tamanho do ícone */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    transition: background-color 0.3s, opacity 0.3s;
}

#scrollToTopBtn:hover {
    background-color: #4cae4c; /* Cor mais escura no hover */
}

/* Botão Descer para Próxima Seção (opcional) */
#scrollDownBtn {
    position: fixed; /* Fixado na tela */
    bottom: 100px; /* Acima do botão de topo */
    right: 30px; /* 30px da direita */
    z-index: 99; /* Acima de outros elementos */
    border: none;
    outline: none;
    background-color: rgba(0, 0, 0, 0.6); /* Fundo semi-transparente escuro */
    color: white;
    cursor: pointer;
    padding: 15px;
    border-radius: 50%; /* Círculo */
    font-size: 1.2em; /* Tamanho do ícone */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    transition: background-color 0.3s, opacity 0.3s;
}

#scrollDownBtn:hover {
    background-color: rgba(0, 0, 0, 0.8); /* Fundo mais escuro no hover */
}

/* Esconde o botão de descer em telas muito pequenas ou se não houver conteúdo abaixo */
@media (max-width: 768px) {
    #scrollDownBtn {
        bottom: 90px; /* Ajusta a posição em mobile */
        right: 20px;
        padding: 12px;
        font-size: 1em;
    }
    #scrollToTopBtn {
        bottom: 20px;
        right: 20px;
        padding: 12px;
        font-size: 1em;
    }
}


/* Nova Seção: Portfólio */
.portfolio {
    background-color: #3b4252; /* Cor de fundo cinza escuro similar à imagem */
    padding: 80px 20px; /* Espaçamento interno */
    text-align: center; /* Centraliza o conteúdo horizontalmente */
    color: #fff; /* Cor do texto padrão */
}

.portfolio-content {
    max-width: 1200px; /* Limita a largura do conteúdo para melhor leitura */
    margin: 0 auto; /* Centraliza o conteúdo na página */
}

.portfolio-title {
    font-size: 2.5em;
    color: #fff;
    margin-bottom: 10px;
    font-weight: 700;
    text-transform: uppercase;
}

.portfolio-subtitle {
    font-size: 1.2em;
    color: #ccc;
    margin-bottom: 50px; /* Espaçamento abaixo do subtítulo */
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.portfolio-link {
    color: #5cb85c; /* Cor verde para o link */
    text-decoration: none; /* Remove sublinhado padrão */
    font-weight: bold;
    transition: color 0.3s ease;
}

.portfolio-link:hover {
    color: #4cae4c; /* Cor mais escura no hover */
}

.portfolio-gallery {
    display: flex; /* Para alinhar as imagens lado a lado */
    justify-content: center; /* Centraliza as imagens */
    flex-wrap: wrap; /* Quebra para a próxima linha em telas menores */
    gap: 20px; /* Espaçamento entre as imagens */
}

.gallery-item {
    flex: 1 1 calc(33.333% - 20px); /* 3 imagens por linha, considerando o gap */
    max-width: calc(33.333% - 20px); /* Garante que não ultrapasse 1/3 da largura menos o gap */
    background-color: #444; /* Cor de fundo para itens (se a imagem não carregar) */
    border-radius: 5px;
    overflow: hidden; /* Garante que a imagem respeite as bordas arredondadas */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3); /* Sombra para profundidade */
    transition: transform 0.3s ease-in-out;
}

.gallery-item:hover {
    transform: translateY(-5px); /* Efeito de elevação no hover */
}

.gallery-item img {
    width: 100%;
    height: 250px; /* Altura fixa para as imagens */
    object-fit: cover; /* Recorta a imagem para preencher o espaço sem distorção */
    display: block; /* Remove espaço extra abaixo da imagem */
}

/* Responsividade para a seção de Portfólio */
@media (max-width: 992px) {
    .portfolio-title {
        font-size: 2em;
    }

    .portfolio-subtitle {
        font-size: 1em;
        margin-bottom: 30px;
    }

    .gallery-item {
        flex: 1 1 calc(50% - 20px); /* 2 imagens por linha em tablets */
        max-width: calc(50% - 20px);
    }
}

@media (max-width: 768px) {
    .portfolio {
        padding: 60px 15px; /* Ajusta o padding em telas menores */
    }
    .gallery-item {
        flex: 1 1 100%; /* 1 imagem por linha em smartphones */
        max-width: 100%;
        height: auto; /* Permite que a altura da imagem seja fluida */
    }
    .gallery-item img {
        height: 200px; /* Reduz a altura da imagem em telas menores */
    }
}

/* Nova Seção: Experiência */
.experience {
    background-color: #3b4252; /* Cor de fundo cinza escuro, igual ao portfólio */
    padding: 80px 20px;
    color: #fff;
    text-align: center; /* Centraliza o título */
}

.experience-content {
    max-width: 1000px; /* Largura máxima para a linha do tempo */
    margin: 0 auto;
}

.experience-title {
    font-size: 2.5em;
    color: #fff;
    margin-bottom: 50px; /* Espaçamento abaixo do título */
    font-weight: 700;
    text-transform: uppercase;
}

/* Estilos para a Linha do Tempo (Timeline) */
.timeline {
    position: relative;
    max-width: 800px; /* Largura da área da timeline */
    margin: 0 auto;
    padding: 20px 0;
}

/* A linha vertical central */
.timeline::after {
    content: '';
    position: absolute;
    width: 2px;
    background-color: #5cb85c; /* Cor verde da linha */
    top: 0;
    bottom: 0;
    left: 50%; /* Centraliza a linha */
    margin-left: -1px; /* Ajusta para ser exatamente no centro */
}

.timeline-item {
    padding: 10px 0;
    position: relative;
    width: 50%; /* Cada item ocupa metade da largura para os lados */
    background-color: transparent; /* Fundo transparente para o item */
}

/* Painéis de texto da linha do tempo */
.timeline-panel {
    padding: 20px 30px;
    background-color: #2e3440; /* Cor de fundo dos blocos de texto */
    border-radius: 8px;
    position: relative;
    border: 1px solid rgba(255, 255, 255, 0.1); /* Borda sutil */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.timeline-panel::before {
    content: '';
    position: absolute;
    top: 22px;
    width: 0;
    height: 0;
    border: medium solid #2e3440; /* Cor da "seta" */
    border-width: 10px;
    pointer-events: none;
}

/* Seta para a direita */
.timeline-item .timeline-panel.right {
    margin-left: 55%; /* Empurra para a direita, deixando espaço para a linha */
}

.timeline-item .timeline-panel.right::before {
    border-color: transparent #2e3440 transparent transparent; /* Seta apontando para a esquerda */
    left: -20px;
}

/* Seta para a esquerda */
.timeline-item .timeline-panel.left {
    margin-right: 55%; /* Empurra para a esquerda */
    left: 0;
}

.timeline-item .timeline-panel.left::before {
    border-color: transparent transparent transparent #2e3440; /* Seta apontando para a direita */
    right: -20px;
}

/* Bolinhas na linha do tempo */
.timeline-dot {
    position: absolute;
    width: 16px;
    height: 16px;
    background-color: #5cb85c; /* Cor verde da bolinha */
    border-radius: 50%;
    z-index: 1; /* Para ficar sobre a linha */
    left: 50%; /* Centraliza */
    margin-left: -8px; /* Metade da largura para centralizar */
    top: 32px; /* Ajusta a posição vertical da bolinha */
    border: 2px solid #3b4252; /* Borda para destacar do fundo */
}

/* Data da linha do tempo */
.timeline-date {
    position: absolute;
    top: 30px;
    width: 80px; /* Largura para a data */
    text-align: center;
    font-size: 0.9em;
    color: #bbb;
    font-weight: bold;
    text-transform: uppercase;
}

.timeline-item:nth-child(odd) .timeline-date { /* Datas do lado esquerdo */
    right: 55%;
    transform: translateX(120%); /* Ajuste fino */
}

.timeline-item:nth-child(even) .timeline-date { /* Datas do lado direito */
    left: 55%;
    transform: translateX(-120%); /* Ajuste fino */
}

.timeline-heading {
    font-size: 1.4em;
    margin-bottom: 5px;
    color: #5cb85c; /* Cor verde para o título da experiência */
    font-weight: 700;
}

.timeline-subheading {
    font-size: 0.9em;
    color: #ccc;
    margin-bottom: 15px;
}

.timeline-body {
    font-size: 0.85em;
    color: #bbb;
    line-height: 1.6;
}

/* Responsividade para a seção de Experiência */
@media (max-width: 768px) {
    .experience {
        padding: 60px 15px;
    }
    .experience-title {
        font-size: 2em;
        margin-bottom: 30px;
    }

    /* Linha do tempo muda para um layout de uma coluna */
    .timeline::after {
        left: 30px; /* Move a linha para a esquerda */
    }

    .timeline-item {
        width: 100%; /* Ocupa a largura total */
        padding-left: 60px; /* Espaço para a linha e bolinha */
        padding-right: 15px;
    }

    .timeline-dot {
        left: 30px; /* Bolinha alinhada com a linha */
        margin-left: -8px; /* Ajuste */
        top: 32px;
    }

    .timeline-date {
        position: relative; /* Remove a posição absoluta */
        left: auto;
        right: auto;
        transform: none;
        text-align: left;
        width: auto;
        margin-bottom: 10px; /* Espaçamento abaixo da data */
        display: block; /* Garante que ocupe sua própria linha */
        top: 0;
        margin-top: -10px; /* Ajuste para cima */
        color: #ddd;
    }

    .timeline-panel {
        margin-left: 0; /* Remove margem lateral */
        margin-right: 0; /* Remove margem lateral */
    }

    /* Ajuste as setas dos painéis para o novo alinhamento */
    .timeline-panel::before {
        border-color: transparent #2e3440 transparent transparent; /* Seta sempre para a esquerda */
        left: -19px; /* Ajusta a posição da seta */
        top: 22px;
    }

    .timeline-item:nth-child(even) .timeline-panel.left {
        /* Para o alinhamento da seta */
        margin-left: 0;
        left: 0;
    }
    .timeline-item:nth-child(odd) .timeline-panel.right {
        /* Para o alinhamento da seta */
        margin-left: 0;
    }
}

@media (max-width: 480px) {
    .experience-title {
        font-size: 1.8em;
    }

    .timeline-panel {
        padding: 15px 20px;
    }
    .timeline-heading {
        font-size: 1.2em;
    }
    .timeline-subheading {
        font-size: 0.8em;
    }
    .timeline-body {
        font-size: 0.8em;
    }
}


/* SEÇÃO 5: CONTACTOS */
.contact-section {
    background-color: #2c3e50; /* Cor de fundo do cabeçalho, da imagem de referência*/
    color: #fff; /* Cor do texto*/
    padding: 80px 0; /* Preenchimento interno*/
    text-align: center; /* Alinhamento do texto ao centro*/
    background-image: url('Captura de Ecrã (106).jpg'); /* Imagem de fundo da seção de contato*/
    background-size: cover; /* Ajusta a imagem para cobrir a área*/
    background-position: center; /* Centraliza a imagem*/
    background-repeat: no-repeat; /* Não repete a imagem*/
    position: relative; /* Posição relativa para o overlay*/
}

.contact-section::before {
    content: ''; /* Adiciona um pseudo-elemento*/
    position: absolute; /* Posição absoluta para cobrir a seção*/
    top: 0; /* Início no topo*/
    left: 0; /* Início na esquerda*/
    width: 100%; /* Largura total*/
    height: 100%; /* Altura total*/
    background-color: rgba(0, 0, 0, 0.7); /* Overlay escuro para contraste*/
    z-index: 0; /* Camada abaixo do conteúdo*/
}

.contact-section .container {
    position: relative; /* Garante que o conteúdo fique acima do overlay*/
    z-index: 1; /* Camada acima do overlay*/
}

.contact-box {
    background-color: #34495e; /* Fundo mais escuro para o bloco de contato, da imagem de referência*/
    max-width: 900px; /* Largura máxima do bloco*/
    margin: 0 auto 50px auto; /* Centraliza e adiciona margem inferior*/
    padding: 40px; /* Preenchimento interno*/
    border-radius: 8px; /* Borda arredondada*/
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3); /* Sombra para o bloco*/
    display: flex; /* Para layout flexível das informações e formulário*/
    flex-wrap: wrap; /* Permite que as colunas quebrem em telas menores*/
    justify-content: space-between; /* Espaço entre as colunas*/
}

.contact-info {
    flex: 1; /* Ocupa o espaço disponível*/
    min-width: 300px; /* Largura mínima antes de quebrar*/
    padding-right: 30px; /* Espaço entre info e formulário*/
    text-align: left; /* Alinhamento do texto à esquerda*/
}

.contact-info h2 {
    font-family: 'Montserrat', sans-serif; /* Fonte do título*/
    font-size: 2em; /* Tamanho da fonte*/
    color: #4CAF50; /* Cor verde para o título*/
    margin-bottom: 20px; /* Margem inferior*/
    text-transform: uppercase; /* Texto em maiúsculas*/
}

.contact-info p {
    font-size: 0.95em; /* Tamanho da fonte do parágrafo*/
    line-height: 1.6; /* Altura da linha*/
    margin-bottom: 15px; /* Margem inferior*/
    color: #ddd; /* Cor do texto*/
}

.contact-info .contact-detail {
    font-size: 1em; /* Tamanho da fonte do detalhe de contato*/
    margin-bottom: 10px; /* Margem inferior*/
    color: #fff; /* Cor mais clara para os detalhes de contato*/
}

.contact-info .contact-detail strong {
    font-weight: bold; /* Negrito*/
    display: block; /* Garante que e-mail/telefone fiquem em nova linha*/
}

.contact-form {
    flex: 2; /* Ocupa mais espaço que as informações*/
    min-width: 300px; /* Largura mínima antes de quebrar*/
    text-align: left; /* Alinhamento do texto à esquerda*/
}

.contact-form .form-group {
    display: flex; /* Layout flexível para inputs*/
    gap: 20px; /* Espaçamento entre os inputs na mesma linha*/
    margin-bottom: 20px; /* Margem inferior*/
}

.contact-form .form-group.full-width {
    width: 100%; /* Garante que o assunto e textarea ocupem a largura total*/
    gap: 0; /* Remove gap para elementos de largura total*/
}

.contact-form input,
.contact-form textarea {
    width: 100%; /* Ocupa 100% do espaço disponível na coluna/grupo*/
    padding: 12px 15px; /* Preenchimento interno*/
    background-color: #2c3e50; /* Fundo do input*/
    border: 1px solid #4CAF50; /* Borda do input com a cor verde*/
    border-radius: 5px; /* Borda arredondada*/
    color: #fff; /* Cor do texto*/
    font-size: 1em; /* Tamanho da fonte*/
    outline: none; /* Remove a borda de foco padrão*/
}

.contact-form input::placeholder,
.contact-form textarea::placeholder {
    color: #bbb; /* Cor do placeholder*/
}

.contact-form input:focus,
.contact-form textarea:focus {
    border-color: #45a049; /* Borda mais escura no foco*/
    box-shadow: 0 0 8px rgba(76, 175, 80, 0.3); /* Sombra no foco*/
}

.contact-form textarea {
    resize: vertical; /* Permite redimensionar verticalmente*/
}

.contact-form .submit-button {
    background-color: #4CAF50; /* Cor verde do botão de envio*/
    color: white; /* Cor do texto do botão*/
    padding: 15px 30px; /* Preenchimento interno*/
    border: none; /* Sem borda*/
    border-radius: 5px; /* Borda arredondada*/
    font-size: 1.1em; /* Tamanho da fonte*/
    font-weight: bold; /* Negrito*/
    cursor: pointer; /* Cursor de ponteiro*/
    transition: background-color 0.3s ease; /* Transição suave de cor*/
    width: auto; /* Ajusta a largura ao conteúdo*/
    margin-top: 10px; /* Margem superior*/
}

.contact-form .submit-button:hover {
    background-color: #45a049; /* Verde mais escuro ao passar o mouse*/
}

/* Links de Redes Sociais */
.social-links {
    margin-top: 40px; /* Margem superior*/
    display: flex; /* Layout flexível*/
    justify-content: center; /* Centraliza os ícones*/
    gap: 25px; /* Espaçamento entre os ícones*/
}

.social-icon {
    display: inline-flex; /* Para centralizar o ícone dentro do círculo*/
    width: 50px; /* Largura do círculo*/
    height: 50px; /* Altura do círculo*/
    border-radius: 50%; /* Torna o fundo circular*/
    background-color: #34495e; /* Fundo dos ícones*/
    color: #fff; /* Cor dos ícones*/
    font-size: 1.8em; /* Tamanho do ícone*/
    justify-content: center; /* Centraliza horizontalmente*/
    align-items: center; /* Centraliza verticalmente*/
    text-decoration: none; /* Remove sublinhado do link*/
    transition: background-color 0.3s ease, color 0.3s ease; /* Transição suave de cor*/
}

.social-icon:hover {
    background-color: #4CAF50; /* Fundo verde ao passar o mouse*/
    color: #fff; /* Cor do texto no hover*/
}

/* Responsividade para a seção de Contactos */
@media (max-width: 992px) {
    .contact-box {
        flex-direction: column; /* Empilha as colunas em telas menores*/
        padding: 30px; /* Ajuste o padding*/
        margin-left: 20px; /* Margem lateral*/
        margin-right: 20px; /* Margem lateral*/
    }
    .contact-info {
        padding-right: 0; /* Remove padding lateral*/
        margin-bottom: 30px; /* Espaço entre info e formulário empilhados*/
    }
    .contact-form .form-group {
        flex-direction: column; /* Empilha campos de input*/
        gap: 15px; /* Ajuste o gap*/
    }
}

@media (max-width: 480px) {
    .contact-section {
        padding: 40px 0; /* Reduz o padding da seção*/
    }
    .contact-box {
        padding: 20px; /* Reduz o padding do box de contato*/
    }
    .contact-info h2 {
        font-size: 1.7em; /* Ajusta o tamanho do título*/
    }
    .contact-info p {
        font-size: 0.9em; /* Ajusta o tamanho do parágrafo*/
    }
    .contact-form input,
    .contact-form textarea {
        padding: 10px 12px; /* Reduz o padding dos inputs*/
        font-size: 0.9em; /* Ajusta o tamanho da fonte dos inputs*/
    }
    .contact-form .submit-button {
        padding: 12px 25px; /* Reduz o padding do botão*/
        font-size: 1em; /* Ajusta o tamanho da fonte do botão*/
    }
    .social-icon {
        width: 45px; /* Reduz o tamanho dos ícones sociais*/
        height: 45px; /* Reduz o tamanho dos ícones sociais*/
        font-size: 1.5em; /* Ajusta o tamanho da fonte dos ícones sociais*/
    }
    .social-links {
        gap: 15px; /* Reduz o espaçamento entre os ícones sociais*/
    }
}




.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* --- Estilos da Seção de Portfólio --- */
.portfolio-page-section {
    padding: 80px 0;
}

.back-to-home {
    display: inline-block;
    margin-bottom: 40px;
    color: #555;
    text-decoration: none;
    font-weight: 600;
    transition: color 0.3s ease;
}

.back-to-home:hover {
    color: #007bff; /* Cor de destaque para o hover */
}

.section-header {
    text-align: center;
    margin-bottom: 60px;
}

.section-number {
    font-size: 1.5rem;
    font-weight: 300;
    color: #888;
    margin-bottom: 5px;
}

.section-header h2 {
    font-family: 'Montserrat', sans-serif;
    font-size: 3rem;
    font-weight: 700;
    color: #333;
    margin: 0;
}

.section-tagline {
    font-size: 1.1rem;
    color: #666;
    margin-top: 10px;
}

/* --- Layout do Grid de Portfólio --- */
.portfolio-grid {
    display: grid;
    /* Faz o layout se adaptar para 3, 2 ou 1 coluna, dependendo do espaço */
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}

.portfolio-item {
    position: relative;
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.portfolio-item:hover {
    transform: translateY(-10px); /* Efeito de elevação */
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
}

.project-link {
    display: block; /* Ocupa todo o espaço do card, tornando-o totalmente clicável */
    text-decoration: none;
    color: inherit;
}

.portfolio-img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.5s ease;
}

/* Efeito de zoom na imagem ao passar o mouse */
.portfolio-item:hover .portfolio-img {
    transform: scale(1.05);
}

/* --- Estilos do Overlay (o efeito que aparece sobre a imagem) --- */
.overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 20px;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.portfolio-item:hover .overlay {
    opacity: 1;
}

.overlay h3 {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.8rem;
    margin-bottom: 10px;
}

.overlay p {
    font-size: 1rem;
    color: #ccc;
    line-height: 1.4;
    margin-bottom: 20px;
}

.view-project-text {
    display: inline-block;
    font-weight: 600;
    padding: 8px 15px;
    border: 1px solid #fff;
    border-radius: 25px;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.view-project-text:hover {
    background-color: #fff;
    color: #007bff;
}

.view-project-text i {
    margin-left: 8px;
}



/* --- ESTILOS PARA A PÁGINA DE DETALHES DO PROJETO (project-details.html) --- */

.project-details-section {
    background-color: #333; /* Fundo escuro */
    color: #fff;
    min-height: 100vh; /* Ocupa a altura total da tela */
    display: flex;
    justify-content: center; /* Centraliza horizontalmente */
    align-items: center; /* Centraliza verticalmente */
    padding: 50px 20px; /* Padding para telas menores */
    position: relative;
    /* Adicione um fundo sutil se desejar, como no Wix */
    background-image: url('img/subtle-background.jpg'); /* Exemplo: uma textura escura sutil */
    background-size: cover;
    background-position: center;
}

.project-details-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6); /* Overlay escuro */
    z-index: 0;
}

.project-details-content {
    background-color: #2a2a2a; /* Cor de fundo do painel central */
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
    max-width: 1000px; /* Largura máxima do conteúdo */
    width: 90%; /* Ocupa 90% da largura disponível */
    position: relative; /* Para posicionar a seta e o botão de fechar */
    z-index: 1; /* Acima do overlay */
    display: flex;
    flex-direction: column; /* Organiza os elementos em coluna */
    align-items: center; /* Centraliza o conteúdo */
}

/* Seta para voltar para a página de portfólio */
.back-to-portfolio {
    position: absolute;
    top: 20px;
    left: 20px;
    color: #4CAF50; /* Cor verde */
    text-decoration: none;
    font-size: 1.1em;
    font-weight: bold;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: color 0.3s ease;
    z-index: 10;
}

.back-to-portfolio:hover {
    color: #45a049;
}

.back-to-portfolio i {
    font-size: 1.3em;
}

/* Botão de fechar (X) */
.close-button {
    position: absolute;
    top: 20px;
    right: 20px;
    color: #bbb;
    font-size: 1.5em;
    text-decoration: none;
    transition: color 0.3s ease;
    z-index: 10;
}

.close-button:hover {
    color: #fff;
}

.project-main-area {
    display: flex;
    gap: 30px; /* Espaço entre a imagem e as informações */
    width: 100%;
    margin-top: 40px; /* Espaço abaixo dos botões de voltar/fechar */
    flex-wrap: wrap; /* Permite quebrar linha em telas pequenas */
    justify-content: center; /* Centraliza em telas pequenas */
}

.project-image-wrapper {
    flex: 2; /* Ocupa mais espaço na proporção */
    min-width: 300px; /* Largura mínima para a imagem */
    position: relative;
    display: flex; /* Para centralizar a imagem dentro do wrapper */
    justify-content: center;
    align-items: center;
    background-color: rgba(0, 0, 0, 0.3); /* Fundo sutil para a área da imagem */
    border-radius: 5px;
    padding: 10px;
}

.project-detail-img {
    max-width: 100%;
    height: auto;
    display: block;
    border-radius: 5px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

/* Setas de navegação (opcional) */
.nav-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    color: #fff;
    font-size: 2em;
    cursor: pointer;
    background-color: rgba(0, 0, 0, 0.4);
    padding: 10px 15px;
    border-radius: 50%;
    transition: background-color 0.3s ease;
}

.nav-arrow:hover {
    background-color: rgba(0, 0, 0, 0.6);
}

.left-arrow {
    left: -20px; /* Posição fora da imagem, ajuste conforme necessário */
}

.right-arrow {
    right: -20px; /* Posição fora da imagem, ajuste conforme necessário */
}


.project-info {
    flex: 1; /* Ocupa menos espaço na proporção */
    min-width: 280px; /* Largura mínima para as infos */
    text-align: left;
    display: flex;
    flex-direction: column;
    justify-content: center; /* Centraliza texto verticalmente */
}

.project-info h2 {
    font-family: 'Montserrat', sans-serif;
    font-size: 2.2em;
    color: #4CAF50; /* Título verde */
    margin-bottom: 15px;
}

.project-description {
    font-family: 'Open Sans', sans-serif;
    font-size: 1em;
    line-height: 1.6;
    color: #ddd;
    margin-bottom: 20px;
}

.project-meta {
    list-style: none;
    padding: 0;
    margin-bottom: 20px;
}

.project-meta li {
    margin-bottom: 8px;
    font-size: 0.95em;
    color: #ccc;
}

.project-meta li strong {
    color: #fff;
}

.project-website-link {
    display: inline-block;
    background-color: #4CAF50;
    color: #fff;
    padding: 10px 20px;
    border-radius: 5px;
    text-decoration: none;
    font-weight: bold;
    transition: background-color 0.3s ease;
}

.project-website-link:hover {
    background-color: #45a049;
}

.project-website-link i {
    margin-left: 8px;
}

/* --- RESPONSIVIDADE PARA A PÁGINA DE DETALHES DO PROJETO --- */
@media (max-width: 992px) {
    .project-main-area {
        flex-direction: column; /* Coloca imagem e info em coluna */
        align-items: center; /* Centraliza */
    }
    .project-image-wrapper,
    .project-info {
        flex: none; /* Desativa o flex-grow */
        width: 100%; /* Ocupa largura total */
        min-width: unset; /* Remove min-width fixo */
    }
    .project-details-content {
        padding: 20px;
    }
    .back-to-portfolio {
        top: 15px;
        left: 15px;
        font-size: 1em;
        gap: 5px;
    }
    .close-button {
        top: 15px;
        right: 15px;
        font-size: 1.3em;
    }
    .project-info h2 {
        font-size: 1.8em;
        text-align: center; /* Centraliza o título */
    }
    .project-description, .project-meta {
        text-align: center; /* Centraliza o texto */
    }
    .project-website-link {
        margin: 0 auto; /* Centraliza o botão */
    }
    .left-arrow, .right-arrow {
        font-size: 1.5em;
        padding: 8px 12px;
        top: 45%;
    }
    .left-arrow {
        left: 5px;
    }
    .right-arrow {
        right: 5px;
    }
}

@media (max-width: 600px) {
    .project-details-section {
        padding: 30px 10px;
    }
    .project-details-content {
        padding: 15px;
        width: 95%;
    }
    .back-to-portfolio {
        top: 10px;
        left: 10px;
        font-size: 0.9em;
    }
    .close-button {
        top: 10px;
        right: 10px;
        font-size: 1.2em;
    }
    .project-main-area {
        margin-top: 30px;
        gap: 20px;
    }
    .project-info h2 {
        font-size: 1.5em;
    }
    .project-description {
        font-size: 0.9em;
    }
    .project-meta li {
        font-size: 0.85em;
    }
    .project-website-link {
        padding: 8px 15px;
        font-size: 0.9em;
    }
}


/* --- ESTILOS PARA A SEÇÃO DE DESTAQUE DE APLICATIVO (deep-app) --- */

.app-showcase-section {
    background-color: #2a2a2a; /* Fundo escuro similar ao tema geral */
    color: #fff;
    padding: 80px 0;
    text-align: center;
    position: relative;
    overflow: hidden;
    /* Você pode adicionar uma imagem de fundo sutil aqui se quiser, como no seu design */
    background-image: url('img/subtle-dark-bg.jpg'); /* Exemplo */
    background-size: cover;
    background-position: center;
}

.app-showcase-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* Overlay escuro */
    z-index: 0;
}

.app-showcase-content {
    position: relative;
    z-index: 1; /* Garante que o conteúdo fique acima do overlay */
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 20px;
}

.app-showcase-section .section-header h2 {
    font-size: 2.8em;
    color: #4CAF50; /* Título principal verde */
    margin-bottom: 10px;
}

.app-showcase-section .section-header .section-tagline {
    font-size: 1.2em;
    color: #bbb;
    margin-bottom: 40px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.app-main-details {
    display: flex;
    flex-wrap: wrap; /* Permite quebrar linha em telas pequenas */
    gap: 40px;
    align-items: flex-start; /* Alinha os itens ao topo */
    justify-content: center; /* Centraliza em telas pequenas */
    margin-top: 30px;
}

.app-image-gallery {
    flex: 2; /* Ocupa mais espaço para a galeria */
    min-width: 300px; /* Largura mínima para o container da imagem */
    background-color: rgba(0, 0, 0, 0.3);
    border-radius: 10px;
    padding: 20px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    display: flex;
    flex-direction: column;
    align-items: center;
}

.app-main-img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
}

.app-thumbnails {
    display: flex;
    gap: 10px;
    margin-top: 20px;
    overflow-x: auto; /* Permite scroll horizontal se muitas miniaturas */
    padding-bottom: 5px; /* Espaço para a barra de scroll */
}

.app-thumb {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: 5px;
    cursor: pointer;
    border: 3px solid transparent;
    transition: border-color 0.3s ease, transform 0.2s ease;
}

.app-thumb:hover {
    border-color: #5cb85c; /* Cor verde no hover */
    transform: translateY(-3px);
}

.app-thumb.active {
    border-color: #4CAF50; /* Borda verde para a miniatura ativa */
    box-shadow: 0 0 8px rgba(76, 175, 80, 0.6);
}

.app-info {
    flex: 1; /* Ocupa o restante do espaço */
    min-width: 280px; /* Largura mínima para o texto */
    text-align: left;
    background-color: rgba(0, 0, 0, 0.4);
    padding: 25px;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

.app-info h3 {
    font-family: 'Montserrat', sans-serif;
    font-size: 2em;
    color: #4CAF50; /* Título da subseção verde */
    margin-bottom: 15px;
}

.app-info p {
    font-family: 'Open Sans', sans-serif;
    font-size: 1em;
    line-height: 1.7;
    color: #eee;
    margin-bottom: 15px;
}

.app-features {
    list-style: none;
    padding: 0;
    margin-bottom: 25px;
}

.app-features li {
    font-family: 'Open Sans', sans-serif;
    font-size: 0.95em;
    color: #ccc;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
}

.app-features li i {
    color: #4CAF50; /* Ícone de check verde */
    margin-right: 10px;
    font-size: 1.1em;
}

.app-tech-stack {
    margin-top: 25px;
    margin-bottom: 30px;
}

.app-tech-stack h4 {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.1em;
    color: #4CAF50;
    margin-bottom: 10px;
}

.app-tech-stack span {
    display: inline-block;
    background-color: #444;
    color: #fff;
    padding: 6px 12px;
    border-radius: 5px;
    margin-right: 8px;
    margin-bottom: 8px;
    font-size: 0.85em;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.app-live-link {
    display: inline-block;
    background-color: #4CAF50;
    color: #fff;
    padding: 12px 25px;
    border-radius: 5px;
    text-decoration: none;
    font-weight: bold;
    transition: background-color 0.3s ease, transform 0.2s ease;
    font-size: 1.05em;
}

.app-live-link:hover {
    background-color: #45a049;
    transform: translateY(-3px);
}

.app-live-link i {
    margin-left: 10px;
}

.icon-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6); /* Fundo preto semi-transparente */
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0; /* Começa invisível */
    transition: opacity 0.3s ease;
}

.gallery-item:hover .icon-overlay {
    opacity: 1; /* Fica visível ao passar o mouse */
}

.icon-overlay i {
    color: white; /* Cor do ícone */
    font-size: 2.5rem; /* Tamanho do ícone */
}

/* --- RESPONSIVIDADE PARA A SEÇÃO DE DESTAQUE DE APLICATIVO --- */
@media (max-width: 992px) {
    .app-main-details {
        flex-direction: column;
        align-items: center;
    }
    .app-image-gallery,
    .app-info {
        flex: none;
        width: 100%;
        max-width: 600px; /* Limita a largura para melhor leitura em telas médias */
    }
    .app-image-gallery {
        padding: 15px;
    }
    .app-info {
        padding: 20px;
        text-align: center; /* Centraliza o texto em telas menores */
    }
    .app-info h3, .app-info p, .app-features {
        text-align: center; /* Centraliza todos os elementos de texto */
    }
    .app-features li {
        justify-content: center; /* Centraliza os itens da lista com ícones */
    }
    .app-tech-stack {
        text-align: center; /* Centraliza as tags de tecnologia */
    }
    .app-tech-stack span {
        margin-right: 5px;
        margin-left: 5px; /* Ajusta o espaçamento */
    }
}

@media (max-width: 600px) {
    .app-showcase-section {
        padding: 50px 0;
    }
    .app-showcase-section .section-header h2 {
        font-size: 2em;
    }
    .app-showcase-section .section-header .section-tagline {
        font-size: 1em;
    }
    .app-image-gallery {
        padding: 10px;
    }
    .app-thumbnails {
        gap: 5px;
    }
    .app-thumb {
        width: 60px;
        height: 60px;
    }
    .app-info h3 {
        font-size: 1.6em;
    }
    .app-info p {
        font-size: 0.9em;
    }
    .app-features li {
        font-size: 0.85em;
        margin-bottom: 5px;
    }
    .app-live-link {
        padding: 10px 20px;
        font-size: 0.95em;
    }
}

/* --- ESTILOS PARA A SEÇÃO DE PREÇOS --- */
.pricing-section {
    background-color: #222;
    color: #fff;
    padding: 80px 0;
    text-align: center;
}

.pricing-table-container {
    display: flex;
    justify-content: center;
    align-items: stretch; /* Garante que todas as caixas tenham a mesma altura */
    gap: 30px;
    margin-top: 50px;
    flex-wrap: wrap; /* Permite quebrar linha em telas pequenas */
}

.pricing-plan {
    background-color: #2a2a2a;
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.4);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    flex: 1 1 300px; /* Cresce, encolhe e tem uma largura base de 300px */
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Para empurrar o botão para o fundo */
}

.pricing-plan:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.5);
}

.featured-plan {
    background-color: #4CAF50; /* Cor de destaque para o plano recomendado */
    color: #fff;
    transform: scale(1.05); /* Torna-o ligeiramente maior */
}

.featured-plan .plan-price .currency, .featured-plan .plan-price .price-value {
    color: #fff;
}

.featured-plan .btn-select-plan {
    background-color: #fff;
    color: #4CAF50;
}

.featured-plan .btn-select-plan:hover {
    background-color: #f0f0f0;
}


.plan-header {
    margin-bottom: 20px;
}

.plan-header h3 {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.8em;
    margin-bottom: 10px;
    text-transform: uppercase;
    color: #4CAF50; /* Cor verde para os títulos */
}

.featured-plan .plan-header h3 {
    color: #fff; /* Título do plano em destaque branco */
}

.plan-description {
    font-family: 'Open Sans', sans-serif;
    color: #bbb;
    font-size: 0.9em;
}

.plan-price {
    margin: 25px 0;
}

.price-value {
    font-family: 'Montserrat', sans-serif;
    font-size: 3em;
    font-weight: bold;
    color: #fff;
}

.price-period {
    font-size: 1em;
    color: #aaa;
    margin-left: 5px;
}

.plan-body {
    margin-bottom: 30px;
}

.plan-features {
    list-style: none;
    padding: 0;
    text-align: left;
}

.plan-features li {
    margin-bottom: 10px;
    color: #ddd;
    font-size: 0.95em;
    display: flex;
    align-items: center;
}

.plan-features li i {
    font-size: 1.1em;
    margin-right: 10px;
}

.plan-features li .fa-check-circle {
    color: #4CAF50; /* Ícone de "check" verde */
}

.plan-features li .fa-times-circle {
    color: #cc3333; /* Ícone de "X" vermelho */
}

.excluded {
    color: #777;
    text-decoration: line-through;
}

.btn-select-plan {
    display: inline-block;
    background-color: #4CAF50;
    color: #fff;
    padding: 12px 30px;
    border-radius: 5px;
    text-decoration: none;
    font-weight: bold;
    text-transform: uppercase;
    transition: background-color 0.3s ease, transform 0.2s ease;
}

.btn-select-plan:hover {
    background-color: #45a049;
    transform: translateY(-3px);
}

/* --- RESPONSIVIDADE PARA A SEÇÃO DE PREÇOS --- */
@media (max-width: 992px) {
    .pricing-table-container {
        flex-direction: column;
        align-items: center;
        gap: 40px;
    }
    .pricing-plan {
        max-width: 400px; /* Limita a largura em telas menores para melhor visualização */
    }
}

/* --- ESTILOS PARA A SEÇÃO DE ATUAÇÃO GLOBAL NO ESTILO STRIPE --- */

.global-reach-section {
    background-color: #0d162a; /* Cor de fundo escura, similar à da Stripe */
    color: #fff;
    padding: 100px 0;
}

.global-reach-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 40px;
    display: flex;
    align-items: center;
    gap: 80px;
}

.global-reach-content {
    flex: 1; /* Ocupa o espaço restante à esquerda */
    max-width: 600px;
}

.global-reach-subtitle {
    font-family: 'Open Sans', sans-serif;
    font-size: 1.1em;
    font-weight: 600;
    text-transform: uppercase;
    color: #5bb37d; /* Cor verde para destaque */
    letter-spacing: 1px;
}

.global-reach-title {
    font-family: 'Montserrat', sans-serif;
    font-size: 3.5em;
    line-height: 1.1;
    margin: 10px 0 20px;
    font-weight: bold;
}

.global-reach-text {
    font-family: 'Open Sans', sans-serif;
    font-size: 1.1em;
    line-height: 1.7;
    color: #ccc;
    margin-bottom: 40px;
}

.global-reach-stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px 50px;
}

.stat-item {
    text-align: left;
}

.stat-number {
    font-family: 'Montserrat', sans-serif;
    font-size: 2.5em;
    font-weight: bold;
    color: #fff;
    margin-bottom: 5px;
}

.stat-description {
    font-family: 'Open Sans', sans-serif;
    font-size: 0.9em;
    color: #aaa;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.global-reach-map {
    flex: 1; /* Ocupa o espaço à direita */
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.map-graphic {
    width: 100%;
    max-width: 700px; /* Garante que a imagem não fique muito grande */
    height: auto;
    display: block;
    /* Adicione filtros para dar um efeito visual similar ao do globo da Stripe */
    filter: brightness(1.2) contrast(1.1);
}

/* --- RESPONSIVIDADE --- */
@media (max-width: 1200px) {
    .global-reach-container {
        flex-direction: column;
        text-align: center;
        gap: 50px;
        padding: 0 20px;
    }
    .global-reach-content {
        max-width: 100%;
    }
    .global-reach-stats {
        grid-template-columns: repeat(2, 1fr);
        justify-items: center;
        text-align: center;
    }
    .stat-item {
        text-align: center;
    }
    .global-reach-map {
        max-width: 100%;
    }
}

@media (max-width: 768px) {
    .global-reach-stats {
        grid-template-columns: 1fr;
        gap: 20px;
    }
}


#typewriter {
    color: #ffcc00; /* Escolhe a cor que preferires para destacar */
    font-weight: bold;
}

.cursor {
    font-weight: bold;
    color: #ffcc00;
    animation: blink 0.7s infinite;
}

@keyframes blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}

/* Estado inicial da barra (vazia) */
.progress-bar-fill {
    width: 0;
    transition: width 1.5s cubic-bezier(0.1, 0.5, 0.5, 1); /* Efeito suave ao encher */
}

/* Efeito de entrada para cada item de skill */
.skill-item {
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.6s ease-out;
}

/* Quando a secção estiver visível, adicionamos esta classe via JS */
.skill-item.animate-in {
    opacity: 1;
    transform: translateY(0);
}


/* Efeito na Imagem Principal */
.app-main-img {
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.4s ease;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
}

.app-main-img.changing {
    opacity: 0.4;
    transform: scale(0.98);
}

/* Efeito nas Miniaturas */
.app-thumb {
    cursor: pointer;
    transition: all 0.3s ease;
    border: 2px solid transparent;
    filter: grayscale(100%); /* Ficam a preto e branco por padrão */
    opacity: 0.6;
}

.app-thumb:hover, .app-thumb.active {
    filter: grayscale(0%);
    opacity: 1;
    border-color: #ffcc00; /* A cor de destaque do teu portfólio */
    transform: translateY(-5px);
}

/* Animação de entrada da Info */
.app-info {
    opacity: 0;
    transform: translateX(30px);
    transition: all 0.8s ease-out;
}

.app-showcase-section.visible .app-info {
    opacity: 1;
    transform: translateX(0);
}


/* Linha central da timeline (opcional, se tiveres no teu CSS) */
.experience {
    position: relative;
    overflow: hidden;
}

/* Estado inicial dos itens da timeline */
.timeline-item {
    opacity: 0;
    transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Itens que vêm da esquerda */
.timeline-item:nth-child(odd) {
    transform: translateX(-50px);
}

/* Itens que vêm da direita */
.timeline-item:nth-child(even) {
    transform: translateX(50px);
}

/* Estado quando visível */
.timeline-item.show {
    opacity: 1;
    transform: translateX(0);
}

/* Animação do Ponto (Dot) */
.timeline-dot {
    transform: scale(0);
    transition: transform 0.5s delay 0.3s ease;
}

.timeline-item.show .timeline-dot {
    transform: scale(1);
}

/* Contentor dos cartões */
.pricing-table-container {
    display: flex;
    gap: 20px;
    perspective: 1000px; /* Necessário para efeito 3D */
    padding: 40px 0;
}

/* Estilo base de cada cartão */
.pricing-plan {
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    background: #1a1a1a; /* Exemplo de fundo escuro */
    border: 1px solid rgba(255, 255, 255, 0.1);
    position: relative;
    z-index: 1;
}

/* Efeito Hover: O plano cresce e brilha */
.pricing-plan:hover {
    transform: translateY(-15px) scale(1.03);
    z-index: 10;
    border-color: #ffcc00; /* A tua cor de destaque */
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6), 0 0 20px rgba(255, 204, 0, 0.2);
}

/* Plano de destaque (Featured) já começa ligeiramente maior */
.featured-plan {
    border: 2px solid #ffcc00;
    transform: scale(1.05);
}

/* Quando passas o rato num plano, os outros ficam um pouco mais baços */
.pricing-table-container:hover .pricing-plan:not(:hover) {
    opacity: 0.6;
    filter: blur(1px);
    transform: scale(0.95);
}

/* Animação do botão */
.btn-select-plan {
    transition: background 0.3s ease, transform 0.2s ease;
}

.btn-select-plan:hover {
    background: #ffcc00;
    color: #000;
    transform: translateY(-3px);
}


.global-reach-container {
    display: flex;
    align-items: center; /* Alinha o texto e imagem verticalmente */
    gap: 40px; /* Espaço entre o texto e a imagem */
}

.global-reach-content {
    flex: 1; /* Ocupa 50% do espaço */
}

.global-reach-image-container {
    flex: 1; /* Ocupa 50% do espaço */
    display: flex;
    justify-content: center;
}

.global-reach-img {
    max-width: 100%;
    height: auto;
    border-radius: 12px; /* Cantos arredondados profissionais */
    box-shadow: 0 10px 30px rgba(0,0,0,0.2); /* Sombra suave */
}

/* Responsividade para telemóveis */
@media (max-width: 768px) {
    .global-reach-container {
        flex-direction: column; /* No telemóvel, ficam um por cima do outro */
        gap: 20px;
    }
}


/* --- SEÇÃO: FOOTER --- */
.main-footer {
    background-color: #1a1a1a; /* Tom de preto consistente com o hero-left */
    color: #fff;
    padding: 60px 0 20px 0;
    border-top: 2px solid #5cb85c; /* Linha verde sutil no topo */
}

.footer-content {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr; /* Coluna do logo maior que as outras */
    gap: 40px;
    margin-bottom: 40px;
}

/* Estilo do "Logo" no footer */
.footer-logo {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
}

.logo-m {
    background-color: #5cb85c;
    color: #fff;
    width: 35px;
    height: 35px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    font-weight: bold;
    font-size: 1.2em;
}

.logo-text {
    font-size: 1.4em;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.logo-text span {
    color: #5cb85c;
}

.footer-description {
    color: #bbb;
    font-size: 0.9em;
    line-height: 1.6;
    max-width: 350px;
}

.footer-column h3 {
    font-size: 1.2em;
    margin-bottom: 25px;
    color: #fff;
    position: relative;
    padding-bottom: 10px;
}

/* Linha verde pequena sob os títulos do footer */
.footer-column h3::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 40px;
    height: 2px;
    background-color: #5cb85c;
}

.footer-links {
    list-style: none;
    padding: 0;
}

.footer-links li {
    margin-bottom: 12px;
}

.footer-links a {
    color: #bbb;
    text-decoration: none;
    transition: all 0.3s ease;
    font-size: 0.95em;
}

.footer-links a:hover {
    color: #5cb85c;
    padding-left: 8px; /* Pequeno efeito de movimento */
}

.footer-column p {
    color: #bbb;
    font-size: 0.95em;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.footer-column p i {
    color: #5cb85c;
}

/* Rodapé Final (Copyright) */
.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    padding-top: 20px;
    text-align: center;
    font-size: 0.85em;
    color: #888;
}

/* Responsividade do Footer */
@media (max-width: 992px) {
    .footer-content {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 768px) {
    .footer-content {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .footer-logo {
        justify-content: center;
    }

    .footer-description {
        margin: 0 auto 20px auto;
    }

    .footer-column h3::after {
        left: 50%;
        transform: translateX(-50%);
    }

    .footer-column p {
        justify-content: center;
    }
}