/* Definir o fundo da página */
body {
    background-color: #FEFCF8;
    margin: 0;
    padding: 0;
    font-family: 'Inter', sans-serif;
    padding-left: 80px; 
    padding-right: 80px;
    cursor: none;
}

/* Header com altura definida e borda inferior */
header {
    width: 100%;
    border-bottom: 0.25pt solid #333;
}

/* Container de conteúdo do header */
.content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 96px;
    padding: 0 20px;
    box-sizing: border-box;
}

/* Logo do lado esquerdo */
.logo img {
    height: 60px;
}

/* Estilo do menu */
.menu {
    display: flex;
    gap: 40px; /* Espaço entre os botões */
}

/* Estilo dos botões do menu */
.menu button {
    background: none; /* Sem fundo */
    border: none; /* Sem borda */
    color: #25282A; /* Cor do texto */
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 300;
    cursor: pointer; /* Cursor de ponteiro */
    padding: 10px 0; /* Espaçamento vertical para os botões */
}

/* Efeito de sublinhado ao passar o mouse */
.menu button:hover {
    text-decoration-line: underline; 
    text-decoration-style: solid;
}



.title1 {
    color: #25282A;
    font-family: Inter;
    font-size: 20px;
    font-style: light;
    line-height: normal;
    margin-top: 96px; 
    text-align: center;
}

/* Estilo da galeria de imagens */
.image-gallery {
    margin-top: 56px; /* Espaçamento acima da galeria */
    display: flex;
    flex-direction: column; /* As linhas de imagens estarão empilhadas */
    gap: 16px; /* Espaço entre as linhas */
    justify-content: center;
}

.image-row {
    display: flex;
    gap: 10px;
}

.image-row a {
    position: relative;
    display: inline-block;
    width: 308px;
    height: 308px;
}

.image-row img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Overlay de hover */
.image-row a::before {
    content: attr(data-text); /* Define o texto do hover */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 0, 0, 0.7); /* Cor inicial */
    color: white;
    font-size: 16px;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}

/* Diferentes cores para cada imagem */
.image-row a:nth-child(1)::before { background-color: #8E84BF; } 
.image-row a:nth-child(2)::before { background-color: #EFE111; } 
.image-row a:nth-child(3)::before { background-color: #F45600; } 
.image-row a:nth-child(4)::before { background-color: #30A269; } 

.image-row a:hover::before {
    opacity: 1;
}

.projectTitle {
    color: #25282A;
    font-family: Inter, sans-serif;
    font-size: 30px;
    font-style: normal;
    font-weight: 700;
    line-height: 35px; /* 116.667% */
    letter-spacing: -0.9px;
    margin-top: 96px;
}

/* Estilo da galeria de áreas */
.area-gallery {
    margin-top: 56px; /* Espaçamento acima da galeria */
    display: flex;
    flex-wrap: wrap; /* Permite que os itens quebrem para a linha seguinte se necessário */
    gap: 16px; /* Espaço entre os itens */
    justify-content: center; /* Alinha os itens no centro */
}

/* Ajusta a largura de cada item */
.area-row {
    display: flex;
    flex-wrap: nowrap; /* Não permite que os itens quebrem de linha */
    gap: 16px; /* Espaço entre os itens */
    justify-content: space-between; /* Distribui os itens igualmente */
    width: 100%; /* A largura total é 100% */
}

/* Cada item na galeria */
.area-row span {
    width: calc(20% - 16px); /* Cada item ocupa 20% da largura, considerando o gap */
    height: 308px; /* Define a altura fixa de 426px */
    display: inline-block;
    text-align: center; /* Alinha o conteúdo no centro */
    padding: 10px; /* Adiciona espaçamento interno */
    border-top: 2px solid #000; /* Borda superior */
    border-bottom: 2px solid #000; /* Borda inferior */
    display: flex;
    flex-direction: column; /* Empilha o título e a descrição */
    align-items: center; /* Centraliza horizontalmente */
    justify-content: center; /* Centraliza verticalmente */
}

/* Estilo para o título e descrição */
.area-row span strong {
    font-weight: bold; /* Define o título em negrito */
    font-size: 18px; /* Tamanho do título */
}

.description {
    font-size: 14px; /* Tamanho da descrição */
    color: #555; /* Cor da descrição */
    margin-top: 8px; /* Espaço entre o título e a descrição */
}


/* Estilo da div contactQuote1 */
.contactQuote1 {
    color: #25282A;
    font-family: "Inter", sans-serif; /* Usar a fonte Inter */
    font-weight: 700; /* Peso Bold */
    font-size: 60px;
    font-style: normal;
    line-height: normal;
    text-transform: uppercase;
    margin-top: 208px; /* Distância de 208px abaixo do carrossel */
}

/* Estilo da frase "Let’s make it happen!" */
.contactQuote2 {
    color: #25282A;
    font-family: 'Inter', sans-serif; /* Usar a fonte Inter */
    font-weight: 300; /* Peso Light */
    font-style: italic; /* Estilo em itálico */
    font-size: 60px;
    line-height: normal;
    margin-top: -10px; /* Distância de 20px abaixo da frase "Ready for your next project?" */
}

/* Estilo para o footer */
footer {
    width: 100%;
    border-top: 0.25pt solid #333; /* Borda superior */
    margin-top: 40px; /* Distância acima do footer */
    padding: 20px 0; /* Espaçamento dentro do footer */
}

/* Container de conteúdo do footer para organizar os itens em uma linha */
.footer-content {
    display: flex;
    justify-content: space-between; /* Distribui os itens igualmente */
    align-items: center; /* Alinha verticalmente */
    max-width: 1248px; /* Limita a largura */
    margin: 0 auto; /* Centraliza o footer */
}

/* Estilo para os itens do footer */
.footer-content p, .footer-content a {
    color: #25282A;
    font-family: Inter;
    font-size: 12px;
    font-weight: 300;
    line-height: normal;
}

/* Links das redes sociais */
.footer-content a {
    text-decoration: none;
    margin-left: 20px; /* Distância entre os links */
}

/* Efeito de link: cor ao passar o mouse */
.footer-content a:hover {
    color: #333;
}

/* Remove o cursor de "mãozinha" nos links e utiliza o cursor personalizado */
a {
    cursor: none; /* Remove o cursor padrão de link (mãozinha) */
}

/* Estilo do cursor personalizado */
#custom-cursor {
    width: 20px; /* Tamanho do círculo */
    height: 20px; /* Tamanho do círculo */
    border-radius: 50%; /* Faz o círculo */
    background-color: #8E84BF; /* Cor do cursor */
    position: absolute;
    pointer-events: none; /* Impede que o cursor interfira nas interações */
    transform: translate(-50%, -50%); /* Centraliza o círculo em relação ao ponteiro */
    transition: background-color 0.3s ease; /* Transição suave para a mudança de cor */
}


/*----------------------------------------------------------------------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------------------------------------------------------------------*/

/* Ajustes para mobile */
@media (max-width: 468px) {
    body {
        font-size: 14px;
        padding-left: 16px;
        padding-right: 16px;
    }

    .container {
        padding: 10px;
    }

        header .content {
        flex-direction: column; /* Coloca o logo acima e o menu abaixo */
        align-items: center;
        padding: 10px;
        height: auto;
    }

    .logo {
        margin-top: 40px;
        margin-bottom: 10px; /* Espaço entre o logo e o menu */
    }

    .menu {
        display: flex;
        flex-direction: row; /* Mantém os itens do menu em linha */
        justify-content: center;
        align-items: center;
        gap: 20px; /* Reduzi pela metade, conforme pedido */
        margin-top: 20px;
    }

    .menu p {
        font-size: 16px;
        padding: 5px 10px;
    }

    /* Ajuste dos títulos */
    .title1 {
        font-size: 16px;
        text-align: center;
        margin-top: 56px;
    }

    .image-gallery {
        display: flex; /* Flexbox para organizar as imagens */
        flex-wrap: wrap; /* Permite que as imagens "quebrem" para a linha seguinte */
        gap: 10px; /* Espaçamento entre as imagens */
        justify-content: center; /* Alinha as imagens ao centro */
    }

    /* Ajuste das imagens para ocupar metade da largura */
    .image-row a {
        width: calc(50% - 10px); /* Cada imagem ocupa 50% da largura com espaçamento */
        height: 308px; /* Mantém a altura fixa das imagens */
    }

    /* Ajuste nas imagens para preencher corretamente o espaço */
    .image-row img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .contactQuote1 {
        font-size: 20.5px;
        text-align: left;
        margin-top: 56px;
    }

    .contactQuote2 {
        font-size: 20.5px;
        text-align: left;
        margin-top: 5px;
    }

        /* Ajustes no footer */
    .footer-content {
        display: flex;
        flex-direction: column;
        align-items: flex-start; /* Alinha tudo à esquerda */
        text-align: left;
        gap: 10px; /* Espaçamento igual entre todos os itens */
    }

    /* Garante que todos os elementos do footer tenham o mesmo comportamento */
    .footer-content > * {
        margin: 0; /* Remove qualquer margem padrão */
        padding: 0; /* Remove qualquer padding padrão */
        display: block; /* Faz com que todos ocupem a largura total */
        width: 100%;
    }

    /* Garante que os links não tenham margens diferentes dos outros elementos */
    .footer-content a {
        text-decoration: none; /* Remove sublinhado */
        margin: 0;
        padding: 0;
        display: block;
    }
#custom-cursor {
    display: none;
}