/* Seção Principal: Nossos Serviços com Dropdown de Categorias */
.our-services-section {
    /* --- IMAGEM DE FUNDO E SEU ESTILO --- */
    background-image: url('caminho/para/sua/imagem-servicos.jpg'); /* **MUITO IMPORTANTE: SUBSTITUA ESTA URL PELA SUA IMAGEM REAL** */
    background-size: cover; /* Faz a imagem cobrir toda a área da seção */
    background-position: center center; /* Centraliza a imagem */
    background-repeat: no-repeat; /* Evita repetição da imagem */
    background-color:#123c7d;
    background-attachment: scroll; /* A imagem rola com a página. Use 'fixed' para efeito parallax. */
    position: relative; /* Necessário para posicionar o overlay e o conteúdo */
    /* ------------------------------------ */

    padding: 80px 0; /* Espaçamento interno superior e inferior da seção */
    min-height: 600px; /* Altura mínima da seção para a imagem aparecer bem */
    color: white; /* Cor padrão do texto dentro da seção */
    display: flex; /* Para centralizar o conteúdo verticalmente */
    align-items: center; /* Alinha os itens ao centro verticalmente */
    justify-content: center; /* Alinha os itens ao centro horizontalmente */
}


/* Overlay para escurecer a imagem de fundo e melhorar a legibilidade do texto */
.our-services-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(1, 0, 0, 0.6); /* Cor preta com 60% de opacidade */
    z-index: 0; /* Garante que o overlay fique atrás do conteúdo */
}

/* Garante que o conteúdo (título, botões) fique acima do overlay */
.our-services-section .container {
    position: relative;
    z-index: 1; 
}

/* Estilo do botão de toggle de cada categoria (ex: CUIDADOS DOMICILIARES) */
.category-toggle-button {
    background-color: rgba(255, 255, 255, 0.15); /* Fundo semi-transparente para os botões */
    border: none;
    color: white;
    font-size: 1.25rem; /* Tamanho da fonte do título da categoria */
    cursor: pointer;
    transition: background-color 0.3s ease; /* Transição suave no hover */
}

.category-toggle-button:hover {
    background-color: rgba(255, 255, 255, 0.25); /* Fundo mais claro ao passar o mouse */
}

/* Estilo da lista de conteúdo de cada categoria (LIMPEZA RESIDENCIAL, CUIDADOR DE IDOSOS, etc.) */
.category-content-list {
    background-color: rgba(255, 255, 255, 0.9); /* Fundo quase opaco para o conteúdo revelado */
    color: #333; /* Cor do texto da lista de serviços (use sua variável global, ex: var(--dark-text) ou um valor direto) */
    
    /* --- PROPRIEDADES CRUCIAIS PARA ESCONDER E MOSTRAR --- */
    max-height: 0; /* **COMEÇA ESCONDIDO: A altura máxima é zero** */
    overflow: hidden; /* **Esconde qualquer conteúdo que exceda a altura máxima (que é zero)** */
    /* --------------------------------------------------- */
    
    transition: max-height 0.4s ease-out, padding 0.4s ease-out; /* Transição suave para a animação */
     padding: 0 !important; / /* Padding horizontal inicial (o padding vertical será 0 quando fechado) */
}

/* Quando a classe 'show' é adicionada pelo JavaScript, o conteúdo se expande */
.category-content-list.show {
    max-height: 800px; /* **Altura máxima quando aberto - AJUSTE ESTE VALOR se sua lista for muito longa e o conteúdo estiver sendo cortado** */
    padding: 1.5rem; /* Padding completo quando aberto */
    transition: max-height 0.5s ease-in, padding 0.5s ease-in; /* Transição de abertura */
}

/* Estilo da lista de serviços (ul e li) dentro de 'category-content-list' */
.category-content-list ul {
    margin-bottom: 0; /* Remove margem padrão da lista */
}

.category-content-list ul li {
    font-size: 1.1rem;
    line-height: 1.8;
    padding-left: 0.5rem; /* Espaçamento para o ícone */
}

/* Estilo do ícone de mais/menos no botão de toggle */
.toggle-icon {
    font-size: 1.5rem; /* Tamanho do ícone */
    transition: transform 0.3s ease; /* Transição para rotação suave */
}

/* Gira o ícone quando o botão está 'ativo' (dropdown aberto) */
.category-toggle-button.active .toggle-icon {
    transform: rotate(45deg); /* Transforma o '+' em um 'x' */
}

/* Responsividade Básica (ajusta tamanhos para telas menores) */
@media (max-width: 768px) {
    .our-services-section {
        padding: 50px 0;
        min-height: 400px;
    }
    .category-toggle-button span {
        font-size: 1.15rem !important; /* !important para garantir que sobrescreva classes do Bootstrap */
    }
    .category-content-list ul li {
        font-size: 1rem;
    }
    .toggle-icon {
        font-size: 1.3rem;
    }
}