/* 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;
    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;
}


/* Definir a fonte Bright Melody */
@font-face {
    font-family: "Bright Melody Personal Use Only";
    src: url("fonts/BrightMelodyPersonalUseOnly-OVogd.otf") format("opentype");
    font-weight: normal;
    font-style: normal;
}

/* Estilo do texto "THE CREATIVE STUDIO" */
.title1 {
    color: #25282A;
    font-family: "Bright Melody Personal Use Only"; /* Usar a fonte Bright Melody */
    font-size: 70px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    margin-top: 208px; /* 208px abaixo do header */
}

/* Estilo do texto "YOU'VE BEEN SEARCHING FOR" */
.title2 {
    color: #25282A;
    font-family: Inter;
    font-size: 60px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    margin-top: -20px;
}

/* Estilo do texto da div "areas" */
.areas {
    color: #25282A;
    font-family: "Instrument Serif", serif;
    font-size: 60px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

/* Estilo do texto "Check our projects" */
.checkWork {
    color: #25282A;
    font-family: Inter;
    font-size: 16px;
    font-style: normal;
    font-weight: 300;
    line-height: normal;
    text-decoration-line: underline;
    text-underline-offset: auto;
    text-underline-position: from-font;
    margin-top: 208px; /* Distância de 208px abaixo da div "areas" */
}

.checkWork a {
    color: #25282A;  /* Define a cor do texto como a cor padrão */
    text-decoration: none;  /* Remove a sublinha do link */
}

/* Estilo do carrossel de imagens */
.carousel {
    display: flex;
    gap: 16px; /* Espaçamento de 16px entre as imagens */
    margin-top: 40px; /* Distância de 40px abaixo da div checkWork */
    overflow-x: auto; /* Permite rolar horizontalmente */
    scroll-behavior: smooth; /* Rolagem suave */
    width: 100%; /* Garantir que ocupe toda a largura disponível */
    max-width: 100%; /* Garantir que não ultrapasse a largura da página */
}

/* Ocultar a barra de rolagem */
.carousel::-webkit-scrollbar {
    display: none;
}

/* Estilo das imagens do carrossel */
.carousel-item {
    width: 308px; /* Largura da imagem */
    height: 308px; /* Altura da imagem */
    object-fit: cover; /* Para garantir que a imagem preencha a área de forma adequada */
    flex-shrink: 0; /* Impede que as imagens encolham quando a tela mudar */
}



/* 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;
    }

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

    .title2 {
        margin-top: 0px; /* Ajustado para manter o mesmo espaçamento */
        font-size: 32px;
        text-align: left;
    }

    .areas {
        font-size: 28px;
        text-align: left;
    }

    .checkWork {
         display: none;
    }

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

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

    /* Ajuste do menu */
    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;
    }


    .carousel {
        width: 100%;
        margin-top: 56px;
        overflow-x: auto;
        display: flex;
        scroll-snap-type: x mandatory;
        gap: 10px;
        padding: 10px;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    /* Esconde a barra de scroll no Chrome/Safari */
    .carousel::-webkit-scrollbar {
        display: none;
    }

    .carousel-item {
        flex: 0 0 calc(66.66% - 10px); /* 100% / 1.5 = 66.66% */
        scroll-snap-align: center;
    }



    /* 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;
}