/* --------- Fontes --------- */
@font-face {
    font-family: 'Roboto';
    src: url("fonte/Roboto-Bold.ttf");
}

@font-face {
    font-family: 'Montserrat';
    src: url("font/Montserrat-Bold.otf");
}

@font-face {
    font-family: 'Montserrat-Light';
    src: url("font/Montserrat-Light.otf");
}

.advertorial-container .titulo-principal {
    font-family: 'Times New Roman', Times, serif;
    font-size: 2.2em;
    line-height: 1.1em;
    font-weight: 700;
    color: #333;
    margin: 0;
}

.advertorial-container .subtitulo {
    font-family: Arial, sans-serif;
    font-size: 1em;
    font-style: italic;
    color: #666;
    margin-top: 5px;
    line-height: 1.5em;
}

.topo-010 {
  position: relative; /* Define a posição relativa no container pai */
  overflow: hidden; /* Para ocultar conteúdo que se estende além do cabeçalho */
}

.texto-topo-1 {
  font-weight: bold; /* Torna o texto em negrito */
}
.texto-topo-1 {
  font-weight: 800; /* Valor maior para tornar o texto ainda mais gordo */
}
A propriedade font-weight aceita valores numéricos de 100 a 900, onde valores maiores tornam o texto mais gordo. Você pode experimentar diferentes valores até encontrar o que melhor se adequa ao estilo que você deseja para o seu texto.

Certifique-se de adicionar essas regras CSS ao seu arquivo CSS ou ao cabeçalho HTML do seu site.






.topo-1{
   background-color: #fff;
   padding-bottom: 30px;
}

.img-01{
   width: 50%;
   height: auto;
   max-width: 250px;
}
.with-red-background {
  background-color: #a7140a; /* Cor de fundo vermelho escuro */
  color: white; /* Cor do texto (branco) */
  padding: 0px; /* Espaçamento interno para melhor legibilidade */
  position: relative; /* Define a posição relativa */
  z-index: 1; /* Define uma ordem z para que fique sobre outros elementos */
}

.topo-010 {
  position: relative; /* Define a posição relativa no container pai */
  overflow: hidden; /* Para ocultar conteúdo que se estende além do cabeçalho */
}

.fundo-adv{
	background: #b0150b;
    text-transform: uppercase;
    text-align: center;
    padding-top: 5px;
    padding-bottom: 0px;
    font-weight: 600;
    color: #fff;
    margin-top: -4px;
}



/* Remove margens e padding ao redor do conteúdo */
html, body {
    margin: 0;
    padding: 0;
    overflow-x: hidden; /* Remove a barra de rolagem horizontal */
}

/* Para definir o fundo vermelho em toda a largura do cabeçalho */
.with-red-background::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%; /* Estende para a esquerda */
  width: 300%; /* Suficientemente grande para cobrir a tela */
  height: 100%;
  background-color: darkred;
  z-index: -1; /* Coloca o fundo atrás do texto */
}

.texto-inicio{
   color: #686868;
    font-family: 'Montserrat-Light',sans-serif;
    font-weight: 500;
    font-size: 21px;
    line-height: 1.1;
}



.titulo{
   font-size: 34px;
   margin-top: 20px;
   line-height: 44px;
   font-family: 'montserrat',sans-serif;
}

.img-dpo{
   width: 50px;
   height: 50px;
   border-radius: 50%;
}

.img-depo2{
   width: 50px !important;
   height: 50px !important;
   border-radius: 50% !important;
   float: left !important;
   margin-right: 15px !important;
   margin-top: 0px !important;
   margin-bottom: 0px !important;
}

.img-max{
   width: 100%;
   height: auto;
   margin-top: 30px;
   margin-bottom: 20px;
}

.conteudo p{
   margin-top: 25px;
    font-size: 18px;
    font-family: 'Montserrat-Light',sans-serif;
    color: #000;
    margin-bottom: 25px;
    line-height: 27px;
}

.conteudo p .texto-depo{
    font-size: 16px;
    font-family: 'Montserrat-Light',sans-serif;
    color: #000;
    font-weight: bold;
}

.conteudo h3{
   color: #141414;
   font-family: 'montserrat',sans-serif;
   margin-top: 35px;
   margin-bottom: 25px;
   font-size: 32px;
   line-height: 33px;
}

.conteudo img{
   width: 100%;
   height: auto;
   margin-top: 30px;
}

.coment{
   background-color: #eee;
    padding: 12px 15px 12px 20px;
    border-left: 6px solid #2f7fec;
    padding: 10px;
}

.depo{
   background-color: #eee;
    padding: 12px 15px 12px 20px;
    border-left: 6px solid #3ce78e;
    padding: 10px;
}

.botao{
   background-color: #00bb47;
   padding: 20px 10px 20px 10px;
   width: 98%;
   text-align: center;
   border-radius: 5px;
   margin: 30px auto;
   font-size: 18px;
   font-weight: 700;
   line-height: 27px;
   display: block;
   color: #fff;
}

.fundo-amarelo{
       background-color: #ffc325;
    margin-top: 20px;
    padding: 20px;
}

.topo-2{
   background-color: #fff;
   padding-top: 40px;
   padding-bottom: 40px;
}


.pull-right{
  float:right;
}
.pull-left{
  float:left;
}
#fbcomment{
  background:#fff;
  border: 1px solid #dddfe2;
  border-radius: 3px;
  color: #4b4f56;
  padding:50px;
}
.header_comment{
    font-size: 14px;
    overflow: hidden;
    border-bottom: 1px solid #e9ebee;
    line-height: 25px;
    margin-bottom: 24px;
    padding: 10px 0;
}
.sort_title{
  color: #4b4f56;
}
.sort_by{
  background-color: #f5f6f7;
  color: #4b4f56;
  line-height: 22px;
  cursor: pointer;
  vertical-align: top;
  font-size: 12px;
  font-weight: bold;
  vertical-align: middle;
  padding: 4px;
  justify-content: center;
  border-radius: 2px;
  border: 1px solid #ccd0d5;
}
.count_comment{
  font-weight: 600;
}
.body_comment{
    padding: 3 9px;
    font-size: 14px;
    display: block;
    line-height: 25px;
    word-break: break-word;
}
.avatar_comment{
  display: block;
}

.avatar_comment img {
    width: 48px;
    height: 48px;
    border-radius: 50%;
}

.box_comment{
  display: block;
    position: relative;
    line-height: 1.358;
    word-break: break-word;
    border: 1px solid #d3d6db;
    word-wrap: break-word;
    background: #fff;
    box-sizing: border-box;
    cursor: text;
    font-family: Helvetica, Arial, sans-serif;
    font-size: 16px;
  padding: 0;
}
.box_comment textarea{
  min-height: 40px;
  padding: 12px 8px;
  width: 100%;
  border: none;
  resize: none;
}
.box_comment textarea:focus{
  outline: none !important;
}
.box_comment .box_post{
  border-top: 1px solid #d3d6db;
    background: #f5f6f7;
    padding: 8px;
    display: block;
    overflow: hidden;
}
.box_comment label{
  display: inline-block;
  vertical-align: middle;
  font-size: 11px;
  color: #90949c;
  line-height: 22px;
}
.box_comment button{
  margin-left:8px;
  background-color: #4267b2;
  border: 1px solid #4267b2;
  color: #fff;
  text-decoration: none;
  line-height: 22px;
  border-radius: 2px;
  font-size: 14px;
  font-weight: bold;
  position: relative;
  text-align: center;
}
.box_comment button:hover{
  background-color: #29487d;
  border-color: #29487d;
}
.box_comment .cancel{
  margin-left:8px;
  background-color: #f5f6f7;
  color: #4b4f56;
  text-decoration: none;
  line-height: 22px;
  border-radius: 2px;
  font-size: 14px;
  font-weight: bold;
  position: relative;
  text-align: center;
  border-color: #ccd0d5;
}
.box_comment .cancel:hover{
  background-color: #d0d0d0;
  border-color: #ccd0d5;
}
.box_comment img{
  height:16px;
  width:16px;
}
.box_result {
    margin: 10px 0;
    padding: 10px;
    border-bottom: 1px solid #ddd;
}

.box_result .result_comment h4{
  font-weight: 600;
  white-space: nowrap;
  color: #365899;
  cursor: pointer;
  text-decoration: none;
  font-size: 14px;
  line-height: 1.358;
  margin:0;
}
.box_result .result_comment{
  display:block;
  overflow:hidden;
  padding: 0;
}
.child_replay{
  border-left: 1px dotted #d3d6db;
  margin-top: 12px;
  list-style: none;
  padding:0 0 0 8px
}
.reply_comment{
  margin:12px 0;
}
.box_result .result_comment p{
  margin: 4px 0;
  text-align:justify;
  font-size: 14px;
}
.box_result .result_comment .tools_comment{
  font-size: 12px;
  line-height: 1.358;
  margin-bottom: 5px;
}
.box_result .result_comment .tools_comment a{
  color: #4267b2;
  cursor: pointer;
  text-decoration: none;
}
.box_result .result_comment .tools_comment span{
  color: #90949c;
}
.body_comment .show_more{
  background: #3578e5;
  border: none;
  box-sizing: border-box;
  color: #fff;
  font-size: 14px;
  margin-top: 24px;
  padding: 12px;
  text-shadow: none;
  width: 100%;
  font-weight:bold;
  position: relative;
  text-align: center;
  vertical-align: middle;
  border-radius: 2px;
}
/* Rodapé */
.rodape {
    padding-top: 40px;
    padding-bottom: 20px;
    background-color: #b0150b; /* Cor vermelho escuro */
    color: #fff; /* Texto branco */
    text-align: center; /* Centraliza conteúdo em telas pequenas */
}

/* Logo do rodapé */
.img-logo-rodape {
    width: 70%;
    height: auto;
    max-width: 150px; /* Limita tamanho da logo no rodapé */
}

/* Texto do rodapé */
.texto-rodpa {
    color: #fff;
    font-size: 14px;
    line-height: 1.1;
}

/* Texto de aviso legal */
.minitexto {
    color: #fff;
    font-size: 12px;
    line-height: 1.5;
    text-align: justify;
    margin-top: 10px;
}

/* Links no rodapé */
.texto-rodpa a {
    color: #fff;
    text-decoration: underline;
}

/* Responsividade: Ajuste de layout em telas menores */
@media (max-width: 768px) {
    .img-logo-rodape {
        width: 50%;
        max-width: 100px; /* Reduz o tamanho da logo em telas pequenas */
    }

    .minitexto {
        font-size: 11px; /* Reduz texto do aviso legal em telas pequenas */
    }

    .rodape {
        text-align: center; /* Centraliza o rodapé em telas pequenas */
    }
}


.minitexto{
   font-size: 11px;
    color: #fff;
}

.minitexto a{
    color: #fff !important;
}

.esp-topo{
   padding-top: 20px;
}

@media screen and (max-width: 600px) {

   #fbcomment{
        padding: 20px;
    }

   .titulo{
      font-size: 28px;
      line-height: 1.2;
   }
}

.quadro-azul {
    background-color: #3399ff;
    color: #fff;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    margin-bottom: 20px;
}

.quadro-azul h2 {
    margin-top: 0;
    font-size: 1.5em;
}

.quadro-azul ul {
    list-style-type: disc;
    color: #fff;
    margin-left: 20px;
    padding-left: 0;
}


/* Estilo para o quadro azul */
.quadro-azul {
    background-color: #3399ff;
    color: #fff;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    margin-bottom: 20px;
}

.quadro-azul h2 {
    margin-top: 0;
    font-size: 1.8em;
    text-align: center;
    margin-bottom: 15px;
}

.quadro-azul ul {
    list-style-type: none;
    color: #fff;
    padding-left: 0;
}

.quadro-azul li {
    margin-bottom: 10px;
}

.quadro-azul li::before {
    content: "✔ ";
    color: #fff;
    font-weight: bold;
}
.img-wrapper {
        position: relative;
        max-width: 100%;
        margin-top: 10px;
        margin-bottom: 20px;
    }

    .img-wrapper img {
        max-width: 100%;
        display: block;
    }

    .red-box {
        background-color: #ff0000;
        color: #ffffff;
        padding: 10px;
        border-radius: 5px;
        margin-top: 10px;
        text-align: center;
    }

    .img-caption {
        margin: 0;
        font-size: 14px;
        line-height: 1.5;
    }
    
    .center-text {
  color: #ccc;
  font-size: 12px;
  text-align: center;
}

/* Container geral dos resultados */
.result-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 40px;
    padding: 20px;
    background-color: #f9f9f9;
    border-radius: 12px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, background-color 0.3s ease;
}



/* Área do conteúdo */
.result-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 600px;
    width: 100%;
}


/* Título da semana */
.result-title {
    font-weight: bold;
    margin: 0;
    font-size: 1.2em;
    color: #333;
}

/* Texto geral */
.result-text {
    margin: 10px 0;
    font-size: 1em;
    color: #555;
    text-align: center;
    line-height: 1.6;
}

/* Destaque de links e chamadas para ação */
.result-highlight {
    color: #007bff;
    font-weight: bold;
    transition: color 0.3s ease;
}

.result-highlight a {
    color: inherit; /* Mantém o mesmo estilo da cor de destaque */
    text-decoration: none;
}

/* Efeito de hover nos links */
.result-highlight:hover a {
    color: #0056b3;
    text-decoration: underline;
}

/* Responsivo - Ajustes para telas menores */
@media (max-width: 768px) {
    .result-container {
        padding: 15px;
    }

    .result-image {
        width: 120px;
        height: 120px;
    }

    .result-title {
        font-size: 1.1em;
    }

    .result-text {
        font-size: 0.95em;
    }
}


/* Estilização para o container dos depoimentos */
.testimonial-container {
    text-align: center;
    margin: 40px 0;
    padding: 20px;
    background-color: #f9f9f9;
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

 /* Estilo do Título Principal */
    .titulo-principal {
        font-size: 2.5em;  /* Aumenta o tamanho da fonte */
        line-height: 1.2;
        font-weight: bold;
        font-family: Georgia, serif;  /* Define uma fonte similar à do exemplo */
        color: #333;  /* Cor do título */
        text-align: left;
    }

/* Subtítulo */
.testimonial-subtitle {
    font-size: 1.2em;
    color: #555;
    margin-bottom: 30px;
}

/* Estilização das imagens quadradas */
.testimonial-image {
    width: 200px;  /* Quadrado */
    height: 200px;
    object-fit: cover;
    border-radius: 8px;
    margin-bottom: 20px;
    border: 4px solid #eaeaea;
    transition: transform 0.3s ease;
}



/* Texto do depoimento */
.testimonial-text {
    font-weight: bold;
    color: #333;
    font-size: 1.1em;
    line-height: 1.6;
    margin-bottom: 10px;
}

/* Estilo para o nome da pessoa */
.testimonial-author {
    color: #007bff;
    font-style: italic;
}

/* Responsivo para telas menores */
@media (max-width: 768px) {
    .testimonial-image {
        width: 150px;  /* Tamanho reduzido para telas menores */
        height: 150px;
    }

    .testimonial-title {
        font-size: 1.8em;
    }

    .testimonial-subtitle {
        font-size: 1em;
    }

    .testimonial-text {
        font-size: 1em;
    }
}

/* Botão de Compra */
.btn-compra {
    background-color: #ffcc00;
    color: #333;
    padding: 10px 20px;
    font-weight: bold;
    text-transform: uppercase;
    text-decoration: none;
    border-radius: 5px;
    font-size: 1.2em;
    display: inline-block;
    margin: 20px 0;
}
.result-container img {
    max-width: 120px;
    height: auto;
}



/* Resetando margens e preenchimentos padrões */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}



/* Centralizando o conteúdo */
.custom-container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    padding: 20px;
}

/* Estilo moderno para o cartão do produto */
.custom-product-card {
    display: flex;
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 5px 16px rgba(0, 0, 0, 0.1);
    max-width: 900px;
    width: 100%;
    overflow: hidden;
    transition: transform 0.3s;
    flex-direction: row; /* Padrão para desktops */
}

.custom-product-card:hover {
    transform: scale(1.02);
}

/* Estilo para a imagem do produto */
.custom-image-container {
    flex: 3;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
    background-color: #ffff;
}

.custom-image-container img {
    max-width: 100%;
    height: auto;
    border-radius: 10px;
}

/* Estilo para as informações do produto */
.custom-product-info {
    flex: 3;
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Título do produto */
.custom-product-info h2 {
    font-size: 26px;
    color: #333;
    margin-bottom: 10px;
    font-weight: 600; /* Peso da fonte ajustado */
}

/* Descrição do produto */
.custom-product-info p {
    font-size: 15px;
    color: #666;
    margin-bottom: 15px;
    font-weight: 400; /* Peso normal */
}

/* Botão de Verificação */
.custom-product-info button {
    background-color: #e63946;
    color: white;
    border: none;
    padding: 12px 40px;
    font-size: 23px;
    border-radius: 25px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.custom-product-info button:hover {
    background-color: #0056b3;
}

/* Mensagem de desconto */
.custom-discount-message {
    margin-top: 15px;
    font-size: 21px;
    font-weight: bold;
    color: #e63946;
    text-align: center;
}

/* Responsividade - Mobile */
@media (max-width: 768px) {
    .custom-product-card {
        flex-direction: column; /* Alterando para coluna em telas menores */
    }

    .custom-image-container {
        padding: 10px;
    }

    .custom-product-info {
        padding: 2px;
    }

    .custom-product-info h2 {
        font-size: 22px; /* Reduzindo o tamanho das fontes para mobile */
    }

    .custom-product-info p {
        font-size: 17px;
    }

    .custom-product-info button {
        font-size: 16px;
        padding: 10px 90px;
    }

    .custom-discount-message {
        font-size: 18px;
    }
}

/* Cabeçalho */
header {
    background-color: #d32f2f; /* Fundo vermelho */
    border-bottom: 1px solid #c62828; /* Borda inferior levemente mais escura */
    padding: 10px 0;
}

/* Estilo do texto "R7" no lugar da logo */
.logo-text .portal-title {
    font-family: 'Arial', 'Helvetica', sans-serif; /* Fontes sem serifa */
    font-size: 2.5em; /* Tamanho grande */
    font-weight: bold; /* Negrito */
    color: #fff; /* Texto branco */
    margin: 0;
}

/* Ícones de menu e busca (mobile) */
.icon-menu, .icon-search {
    font-size: 1.5em;
    color: #fff; /* Ícones brancos */
    cursor: pointer;
}

/* Barra de navegação (desktop) */
.main-nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
}

.main-nav ul li {
    margin-right: 20px;
}

.main-nav ul li a {
    text-decoration: none;
    font-weight: bold;
    color: #fff; /* Links em branco */
}

.main-nav ul li a:hover {
    text-decoration: underline;
    color: #ffebee; /* Efeito de hover com branco levemente mais claro */
}

/* Estilos de responsividade */
@media (max-width: 768px) {
    .main-nav {
        display: none; /* Esconde a navegação no mobile */
    }

    .icon-menu, .icon-search {
        display: block; /* Exibe ícones de menu e busca no mobile */
    }
}


/* Importando a fonte Arial */
body {
    font-family: Arial, sans-serif;
    color: #333;
    line-height: 1.6;
}

/* Estilo para Títulos */
h1, h2, h4 {
    font-family: 'Arial Black', sans-serif;
    color: #111;
    margin-bottom: 10px;
}

h1 {
    font-size: 2.2em;
}

h2 {
    font-size: 1.8em;
}

h4 {
    font-size: 1.4em;
}

/* Subtítulos e Destaques em Negrito */
h6, .highlight {
    font-family: Arial, sans-serif;
    font-weight: bold;
    color: #111;
    margin-bottom: 10px;
}

/* Parágrafos */
p {
    font-family: Arial, sans-serif;
    font-size: 1em;
    color: #333;
    margin-bottom: 15px;
}

/* Links */
a {
    color: #007bff;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

/* Listas */
ul {
    list-style-type: disc;
    padding-left: 20px;
}

ul li {
    font-family: Arial, sans-serif;
    font-size: 1em;
    margin-bottom: 10px;
    color: #333;
}

/* Garantir que o conteúdo do comentário ocupe toda a largura do dispositivo */
#coment .box_result {
    overflow: hidden; /* Garante que nenhum elemento saia do container */
    padding-right: 10px; /* Ajuste para evitar que o texto saia da borda */
    box-sizing: border-box; /* Inclui padding e border na largura total */
}

#coment .avatar_comment {
    margin-right: 10px; /* Espaçamento entre o avatar e o texto */
}

#coment .avatar_comment img {
    width: 45px; /* Defina o tamanho desejado */
    height: 45px;
    border-radius: 0; /* Remove o arredondamento para manter a foto quadrada */
}

/* Ajuste para telas menores */
@media (max-width: 768px) {
    #coment .avatar_comment img {
        width: 40px; /* Reduz o tamanho do avatar em telas pequenas */
        height: 40px;
    }
}


#coment .result_comment {
    width: calc(100% - 60px); /* Ajuste a largura com base no tamanho do avatar e espaçamentos */
}


/* Estilização do nome */
#coment .result_comment h4 {
    color: #000; /* Define a cor preta para o nome */
    font-weight: bold;
    margin: 0;
}

.result_comment h4 {
    font-size: 1.2em; /* Aumenta o tamanho do nome */
    font-weight: bold;
    color: #333;
    margin: 0;
}

#coment .result_comment p {
    font-size: 14px;
    margin-top: 5px;
    line-height: 1.4;
}

.result_comment p {
    font-size: 1.1em; /* Aumenta o tamanho do texto do comentário */
    color: #555;
    margin-top: 5px;
}

#coment .tools_comment {
    flex-wrap: wrap; /* Permite que as ferramentas se alinhem em múltiplas linhas */
}

#coment .tools_comment a {
    color: #007bff;
    text-decoration: none;
    margin-right: 10px;
}

#coment .tools_comment a:hover {
    text-decoration: underline;
}



/* Layout geral para desktop (mantém inalterado) */
.container {
    max-width: 90%;
}




/* Ajustes específicos para dispositivos móveis */
@media (max-width: 768px) {
    .container {
        max-width: 100%;
        padding-left: 5px;
        padding-right: 5px;
    }
    
    /* Espaçamento para conteúdo apenas em dispositivos móveis */
@media (max-width: 768px) { 
    .container-mobile-padding {
        padding-left: 40px;
        padding-right: 40px;
        box-sizing: border-box;
    }
}

    
    #list_comment {
        padding: 0;
    }

    .box_result {
        margin: 8px 0;
        padding: 10px;
        border-bottom: 1px solid #ddd;
    }

    .avatar_comment img {
        width: 40px;
        height: 40px;
        border-radius: 4px; /* Ajuste para quadrado em mobile */
    }

    .result_comment h4 {
        font-size: 1.1em; /* Aumenta o tamanho do nome para mobile */
        font-weight: bold;
        color: #333;
        margin: 0;
    }

    .result_comment p {
        font-size: 1em; /* Aumenta o tamanho do texto do comentário para mobile */
        color: #555;
        margin-top: 4px;
    }

    .tools_comment a,
    .tools_comment .count {
        font-size: 0.85em;
        color: #777;
    }

    .col-md-11 {
        padding-left: 10px;
    }
}

/* Layout geral para limitar a largura máxima em desktops */
.container {
    max-width: 1200px; /* Define uma largura máxima para desktops */
    margin: 0 auto; /* Centraliza o conteúdo */
    padding: 0 20px; /* Adiciona um pouco de margem lateral */
}

/* Ajustes específicos para dispositivos móveis */
@media (max-width: 768px) {
    .container {
        max-width: 100%; /* Usa toda a largura da tela em dispositivos móveis */
        padding-left: 5px;
        padding-right: 5px;
    }
    
    .box_result {
        margin: 8px 0;
        padding: 18px;
        border-bottom: 1px solid #ddd;
    }

    .avatar_comment img {
        width: 40px;
        height: 40px;
        border-radius: 4px; /* Ajuste para quadrado em mobile */
    }

    .result_comment h4 {
        font-size: 1.1em; /* Aumenta o tamanho do nome para mobile */
        font-weight: bold;
        color: #333;
        margin: 0;
    }

    .result_comment p {
        font-size: 1em; /* Aumenta o tamanho do texto do comentário para mobile */
        color: #555;
        margin-top: 4px;
    }

    .tools_comment a,
    .tools_comment .count {
        font-size: 0.85em;
        color: #777;
    }

    .col-md-11 {
        padding-left: 10px;
    }
}