/* Tamanhos de fonte padrão */
:root {
    --font-size-title: 1.5rem; /* Tamanho padrão para títulos */
    --font-size-subtitle: 1.2rem; /* Tamanho padrão para subtítulos */
    --font-size-text: 1rem; /* Tamanho padrão para texto */
}

/* Banner */
.banner {
    width: 100%;
    margin-top: 11vh;
}

/* TÍTULO DOS DEPOIMENTOS */
h1.depoimentos-title {
    width: 98%; /* Largura do título */
    padding: 1%; /* Padding para o título */
    margin: 0 auto; /* Centraliza o título */
    clear: both; /* Garante que o título não sobreponha outros elementos */
}

.nome {
    font-size: .8rem;
    display: block; /* Faz a classe .nome ocupar uma linha inteira */
    margin-bottom: 0.5rem; /* Espaço entre o elemento e o próximo */
}

/* Responsividade Geral para Serviços */
@media (max-width: 768px) {
    .texto-servicos {
        width: 98%;
    }

    /* TABELA SERVIÇOS */
    table {
        width: 98%;
    }

    thead {
        display: none; /* Ocultar cabeçalho em telas pequenas */
    }

    tbody tr {
        display: block;
        margin-bottom: 20px;
    }

    tbody td {
        display: block;
        text-align: left;
        margin: 1%;
    }
    .botao-servicos{
        font-size: .9rem;
        width: 96%;
        padding: 2%;
    }

    /* DEPOIMENTO CLIENTES */
    .depoimentos {
        width: 95%; /* Largura aumentada para telas médias */
        padding: 10px 0; /* Padding adequado */
        overflow-x: auto; /* Permite rolagem horizontal */
        display: flex;
        flex-wrap: wrap; /* Permite que os depoimentos se ajustem */
        justify-content: space-between; /* Espaçamento entre depoimentos */
        margin: 0 auto; /* Centraliza a seção */
    }

    .depoimento {
        width: calc(50% - 2%); /* Largura ajustada para melhor exibição */
        margin: 1%; /* Margens proporcionais */
        padding: 15px; /* Padding interno */
        height: auto; /* Altura automática */
        text-align: left; /* Alinhamento à esquerda */
        box-sizing: border-box; /* Inclui padding e margem no cálculo da largura */
        display: block; /* Faz a classe .nome ocupar uma linha inteira */
        margin-bottom: 0.5rem; /* Espaço entre o elemento e o próximo */
    }

    .foto {
        width: 40px; /* Tamanho da foto ajustado */
        height: 40px; /* Tamanho da foto ajustado */
        margin-right: 10px; /* Ajuste na margem à direita da foto */
        float: left; /* Faz com que a foto fique à esquerda */
    }

    .autor {
        font-size: var(--font-size-subtitle); /* Tamanho ajustado para o nome */
        font-weight: bold; /* Destaca o nome do autor */
        margin-bottom: 5px; /* Espaço entre o nome e o depoimento */
        clear: both; /* Garante que o nome não sobreponha a foto */
    }

    .texto-depoimento {
        font-size: var(--font-size-text); /* Tamanho do texto ajustado */
        line-height: 1.5; /* Aumenta o espaçamento entre linhas */
        clear: both; /* Garante que o texto do depoimento não sobreponha o nome */
        margin-bottom: 10vh; /* Margem inferior */
    }

    h1 {
        margin: 15px 0; /* Adiciona margem ao título dos depoimentos */
        clear: both; /* Garante que o título não sobreponha elementos anteriores */
        white-space: normal; /* Permite quebras de linha */
        width: 100%;
    }

    .estrelas {
        font-size: 1.2rem; /* Ajuste no tamanho das estrelas */
    }
}

@media (max-width: 468px) {
    /* Estilos para textos */
    h1, h2 {
        font-size: var(--font-size-title); /* Títulos */
        width: 100%;
    }

    h3, h4 {
        font-size: var(--font-size-subtitle); /* Subtítulos */
    }

    p, .texto-depoimento {
        font-size: var(--font-size-text); /* Texto padrão */
    }

    .depoimento {
        width: 90%; /* Largura aumentada para melhor ajuste */
        margin: 5px auto; /* Margem centralizada */
        display: block; /* Faz a classe .nome ocupar uma linha inteira */
        margin-bottom: 0.5rem; /* Espaço entre o elemento e o próximo */
    }

    .estrelas {
        font-size: calc(var(--font-size-text) - 0.2rem); /* Tamanho das estrelas ajustado */
    }
    .botao-servicos{
        font-size: .9rem;
        width: 96%;
        padding: 2%;
    }
}

/*SERVIÇOS*/
/* Estilos Gerais para Mobile */
@media (max-width: 768px) {
    .servico {
        width: 90%; /* Largura maior para telas pequenas */
        margin: 10px auto; /* Centraliza o serviço e adiciona espaçamento */
        padding: 15px 10px; /* Reduz o padding para economizar espaço */
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
        transition: all 0.4s ease-in-out;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    /* Ícone no Topo */
    .servico i {
        font-size: 35px; /* Reduz o tamanho do ícone */
        margin-bottom: 8px; /* Ajusta o espaçamento */
        color: #F48034;
    }

    /* Título do Serviço */
    .servico h1 {
        font-size: 0.9rem; /* Reduz o tamanho do título */
        margin: 6px 0; /* Ajusta o espaçamento */
    }

    /* Separador Suave */
    .servico hr {
        width: 80%; /* Aumenta a largura do separador */
        margin: 10px 0; /* Ajusta o espaçamento */
    }

    /* Texto Descritivo */
    .servico p {
        font-size: 0.75rem; /* Reduz o tamanho do texto descritivo */
        line-height: 1.4; /* Ajusta o espaçamento entre linhas */
        color: #fff;
        text-align: justify;
    }

    /* Efeito de Hover */
    .servico:hover {
        transform: translateY(-5px); /* Ajusta o efeito de hover */
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    }

    .texto-servicos {
        width: 90%; /* Largura para texto dos serviços */
    }

    .texto-servicos p {
        color: #fff;
        text-align: justify;
    }

    .botao-servicos {
        width: 80%; /* Largura maior para o botão */
        background-color: #F48034;
        color: white;
        padding: 10px 15px; /* Ajusta o padding */
        text-decoration: none;
        border-radius: 5px;
        align-self: center; /* Centraliza o botão */
        display: flex;
        justify-content: center;
        align-items: center;
        transition: background-color 0.3s;
    }

    .botao-servicos:hover {
        background-color: #f45034;
        color: #fff;
    }
}

/* Estilos Específicos para Dispositivos Muito Pequenos */
@media (max-width: 468px) {
    .servico {
        width: 95%; /* Largura ainda maior para telas pequenas */
    }

    /* Ícone no Topo */
    .servico i {
        font-size: 30px; /* Ajusta o tamanho do ícone */
    }

    /* Título do Serviço */
    .servico h1 {
        font-size: 0.8rem; /* Ajusta o tamanho do título */
    }

    /* Texto Descritivo */
    .servico p {
        font-size: 0.7rem; /* Reduz ainda mais o texto descritivo */
    }

    .botao-servicos {
        width: 90%; /* Ajusta a largura do botão */
    }
}

/* Estilos Gerais para Mobile */
@media (max-width: 768px) {
    #servicos {
        display: flex;
        flex-direction: column; /* Muda para coluna em telas menores */
        align-items: center; /* Centraliza os itens */
        padding: 15px; /* Reduz o padding */
        gap: 10px; /* Ajusta o espaço entre os itens */
    }
}

/* Estilos Específicos para Dispositivos Muito Pequenos */
@media (max-width: 468px) {
    #servicos {
        padding: 10px; /* Ajusta ainda mais o padding */
        gap: 8px; /* Espaçamento reduzido entre os itens */
    }
}