/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Sep 13 2025 | 23:16:09 */
/* =========================
   MindRise — Sobre Nós (Elementor clean + barra amarela)
   ========================= */
.mr-about-hero{
  /* Variáveis de controlo (afináveis) */
  --about-left-shift: -28px;          /* sobe o texto da esquerda */
  --about-right-scale: 1.34;          /* zoom da estrutura da direita */
  --about-right-shift-x: -5.2vw;      /* move a estrutura para a esquerda */
  --about-right-shift-y: -6px;        /* ajuste vertical da direita */
  --about-top-pad: clamp(6px,1.2vw,14px); /* espaço superior */

  /* Barra amarela do título */
  --title-underline-w: clamp(74px, 7vw, 120px);
  --title-underline-h: 6px;
  --title-underline-gap: 12px;
  --mr-yellow: #F3C340; /* ajusta para o amarelo oficial do manual se for outro */

  display: flex;
  align-items: center;
  padding-top: var(--about-top-pad);
  position: relative;
  overflow: visible;
}

/* Coluna esquerda (sobe o bloco de texto) */
.mr-about-hero .mr-about-left{
  margin-top: var(--about-left-shift);
}

/* Título H2 (cor + barra amarela por baixo) */
.mr-about-hero h2{
  color: #0BB191;                 /* verde MR já registado para H2 */
  display: inline-block;          /* para a barra não ocupar a linha toda */
  position: relative;
  padding-bottom: var(--title-underline-gap);
  margin-bottom: 8px;
}
.mr-about-hero h2::after{
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: var(--title-underline-w);
  height: var(--title-underline-h);
  background: var(--mr-yellow);
  border-radius: 3px;
}

/* Estrutura direita (imagem/svg) */
.mr-about-hero .mr-about-right img,
.mr-about-hero .mr-about-right svg{
  display: block;
  transform: translate(var(--about-right-shift-x), var(--about-right-shift-y))
             scale(var(--about-right-scale));
  transform-origin: center;
  max-width: none;
  height: auto;
}

/* Mobile */
@media (max-width: 767px){
  .mr-about-hero{
    flex-direction: column;
    text-align: left;
    --about-left-shift: -14px;
    --about-right-scale: 1.22;
    --about-right-shift-x: -3vw;
    --about-right-shift-y: -4px;

    /* barra um pouco mais pequena no mobile */
    --title-underline-w: clamp(56px, 18vw, 96px);
    --title-underline-h: 5px;
    --title-underline-gap: 8px;
  }
}
