/* style.css */

@font-face {
    font-family: 'Greek Freak';
    src: url('fonts/Greek-Freak.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

/* Definição de variáveis CSS para as cores */
:root {
    --cor-fundo: #111111; /* Preto quase puro para o fundo da página */
    --cor-principal: #000000; /* Preto */
    --cor-texto: #e5e7eb; /* Branco acinzentado para o texto principal */
    --cor-secundaria: #181818; /* Cinza escuro para os cards e seções */
    --cor-terciaria: #333333; /* Cinza médio para bordas e detalhes */
    --cor-destaque: #CCCCCC; /* Cinza claro para destaque de texto e botões */
}

/* Estilos para os títulos */
h1, h2, h3 {
    font-family: 'Greek Freak', serif;
}

/* Estilos para o fundo da página com a imagem desfocada */
.background-container {
    position: relative;
    min-height: 100vh;
}

/* Aplica o desfoque diretamente na imagem de fundo via pseudo-elemento */
.background-container::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Corrigido o caminho da imagem para a pasta 'images' */
    background-image: url('images/background.jpg');
    background-size: cover;
    background-position: center;
    filter: blur(8px); /* Aumentei um pouco o desfoque */
    z-index: -1;
}

/* Estilos globais usando as variáveis */
body {
    background-color: var(--cor-fundo);
    color: var(--cor-texto);
    font-family: 'Inter', sans-serif;
}

/* Animação de fade-in para as seções ao rolar */
.fade-in-on-scroll {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out; /* Transição mais suave */
}

.fade-in-on-scroll.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Responsividade */

/* Estilos para telas maiores que 768px (desktops) */
@media (min-width: 768px) {
    /* Adicione estilos específicos para desktop aqui se necessário */
    .carousel-item {
        width: calc(100% / 5); /* Exibe 5 imagens por vez no desktop */
    }
}

/* Estilos para telas menores que 768px (mobile) */
@media (max-width: 767px) {
    .container {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .md:hidden {
        display: block;
    }

    .hidden.md\:flex {
        display: none;
    }

    .text-4xl {
        font-size: 2.5rem;
    }

    .text-xl {
        font-size: 1.25rem;
    }

    .carousel-item {
        width: 100%; /* Exibe 1 imagem por vez no mobile */
    }
}

/* Cores de fundo e texto para as seções, usando os tons de cinza */
.bg-neutral-900 {
    background-color: var(--cor-fundo);
}

.bg-neutral-800 {
    background-color: var(--cor-secundaria);
}

.text-neutral-900 {
    color: var(--cor-principal);
}

.text-neutral-300 {
    color: var(--cor-destaque);
}

.border-neutral-600 {
    border-color: var(--cor-terciaria);
}

/* Estilização para os cards de serviço e produto */
.card {
    background-color: var(--cor-secundaria);
    border: 1px solid var(--cor-terciaria);
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}

.card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 15px rgba(0, 0, 0, 0.2);
}

/* Estilização para botões */
.btn-primary {
    background-color: var(--cor-destaque);
    color: var(--cor-fundo);
    font-weight: bold;
    padding: 0.75rem 1.5rem;
    border-radius: 9999px; /* rounded-full */
    transition: background-color 0.3s ease-in-out;
}

.btn-primary:hover {
    background-color: #f5f5f5;
}