/* Estilos base do container (mantidos do seu novo código) */
        .boxs-3-container {
            position: relative;
            width: 100%;
            margin: 0 auto;
            padding: 20px 0;
            /* Padding geral do container */
        }

        /* Estilos do carrossel flex (mantidos do seu novo código) */
        .boxs-3 {
            display: flex;
            transition: transform 0.5s ease-in-out;
            /* Para o slide automático */
            width: 100%;
            /* Relativo ao max-width do .boxs-3-container no desktop */
        }

        /* Estilização dos Cards de Comentário (combinando com o estilo do código anterior) */
        .boxs-3>div {
            flex: 0 0 auto;
            text-align: center;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: flex-start;
            box-sizing: border-box;
            background: #ffffff;
            /* Do estilo anterior */
            border: 1px solid #eaeaea;
            /* Do estilo anterior */
            border-radius: 12px;
            /* Do estilo anterior */
            margin: 0 10px 20px 10px;
            /* Margens laterais e inferior do estilo anterior */
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08), 0 2px 6px rgba(0, 0, 0, 0.05);
            /* Sombra do estilo anterior */
            transition: transform 0.3s ease-out, box-shadow 0.3s ease-out;
            /* Efeito de hover do estilo anterior */
            position: relative;
            padding: 20px;
            /* Padding base */
            padding-top: 45px;
            /* Para acomodar o ícone de aspas, do estilo anterior */
            min-height: 290px;
            /* Altura mínima do estilo anterior */
        }

        .boxs-3>div:hover {
            /* Efeito de hover do estilo anterior */
            transform: translateY(-5px);
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1), 0 4px 10px rgba(0, 0, 0, 0.08);
        }

        /* Ícone de aspas decorativo (do estilo anterior) */
        .boxs-3>div::before {
            content: '\f10d';
            /* Ícone de aspas FontAwesome */
            font-family: "Font Awesome 6 Free", "FontAwesome", sans-serif;
            font-weight: 900;
            position: absolute;
            top: 18px;
            left: 18px;
            font-size: 2.5em;
            color: <?=$config->cor_menu ?? '#4A90E2' ?>;
            /* Cor do menu ou fallback do estilo anterior */
            opacity: 0.1;
            z-index: 0;
            /* Atrás do conteúdo do card */
        }

        /* Elementos dentro do card precisam de z-index para ficarem sobre as aspas */
        .boxs-3>div>img,
        .boxs-3>div>.stars,
        .boxs-3>div>h5,
        .boxs-3>div>p {
            position: relative;
            z-index: 1;
        }

        /* Imagem do perfil (estilo anterior) */
        .boxs-3 img {
            width: 65px;
            height: 65px;
            border-radius: 50%;
            object-fit: cover;
            /* Mantido do seu novo código, é uma boa prática */
            margin-bottom: 12px;
            border: 2px solid <?=$config->cor_menu ?? '#4A90E2' ?>;
            /* Borda e cor do estilo anterior */
            padding: 2px;
            /* Do estilo anterior */
            background-color: white;
            /* Do estilo anterior */
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }

        /* Nome do autor (estilo anterior) */
        .boxs-3 h5 {
            font-size: 1.0em;
            margin-top: 8px;
            margin-bottom: 6px;
            color: #2c3e50;
            font-weight: 600;
        }

        /* Texto do depoimento (estilo anterior) */
        .boxs-3 p {
            font-size: 0.88em;
            color: #555;
            line-height: 1.55;
            margin-top: 5px;
            flex-grow: 1;
            /* Permite que o parágrafo ocupe espaço, mantido */
        }

        /* Estrelas (estilo anterior) */
        .boxs-3 .stars {
            margin-top: 0;
            /* Ajustado para o topo, logo abaixo da imagem */
            margin-bottom: 10px;
            color: #f39c12;
            /* Cor dourada mais vibrante */
        }

        .boxs-3 .stars i {
            color: #f39c12;
            /* Garantir a cor nos ícones */
        }


        /* Estilos para desktop (mantidos do seu novo código para layout do carrossel) */
        @media (min-width: 769px) {
            .boxs-3-container {
                max-width: 1200px;
                /* Do seu novo código */
                overflow: hidden;
                /* Essencial para o efeito de carrossel translateX */
            }

            .boxs-3>div {
                /* Card no desktop */
                /* Largura calculada para 3 cards, considerando as margens laterais de 10px de cada lado */
                width: calc(33.333% - 20px);
                min-width: 0;
                /* Reseta min-width para desktop */
                /* As margens laterais de 10px e inferior de 20px já estão definidas na regra geral de .boxs-3 > div */
            }
        }

        /* Estilos para mobile (mantidos do seu novo código para layout e scroll) */
        @media (max-width: 768px) {
            .boxs-3-container {
                overflow-x: auto;
                /* Scroll horizontal no mobile */
                -webkit-overflow-scrolling: touch;
                scroll-snap-type: x mandatory;
                padding: 20px 0px;
                /* Padding vertical, sem padding lateral no container */
            }

            .boxs-3 {
                display: flex;
                padding: 0 10px;
                /* Padding interno para dar respiro ao primeiro e último item */
                width: max-content;
                /* Permite que o conteúdo determine a largura */
            }

            .boxs-3>div {
                /* Card no mobile */
                scroll-snap-align: center;
                width: 280px;
                /* Largura fixa para cards no mobile */
                min-width: 280px;
                /* Garante a largura mínima */
                margin: 0 8px;
                /* Espaçamento lateral entre cards no mobile */
                margin-bottom: 20px;
                /* Mantém a margem inferior do estilo anterior */
                /* padding-top: 45px; já é aplicado pela regra geral, não precisa repetir aqui a menos que queira um valor diferente para mobile */
            }

            /* As regras :first-child e :last-child para margens no mobile foram removidas pois o padding em .boxs-3 e as margens em .boxs-3 > div devem controlar o espaçamento adequadamente. */

            /* Esconde a barra de rolagem (mantido do seu novo código) */
            .boxs-3-container::-webkit-scrollbar {
                display: none;
            }

            .boxs-3-container {
                -ms-overflow-style: none;
                scrollbar-width: none;
            }
        }