:root{
    --cc-green-dark:#1A3F22;
    --cc-green:#2E7D4F;
    --cc-green-soft:rgba(215,224,205,0.55);
    --cc-gold:#C9971E;
    --cc-gold-strong:#D99201;
    --cc-gold-soft:rgba(201,151,30,0.14);
    --cc-white:#ffffff;
    --cc-bg-soft:#f6f6f6;
  }

  html{ scroll-behavior:smooth; }
  body{ font-family:'Nunito', sans-serif; color:#222; overflow-x:clip; }
  img{ max-width:100%; height:auto; }
  h1,h2,h3,h4,h5,
  .navbar-nav .nav-link,
  .btn,
  .titulo-time-de-medicos,
  .titulo-banner-topo,
  .eyebrow{ font-family:'Poppins', sans-serif; }
.title-serif{ font-family:'Playfair Display', serif; font-weight:600; }

  section[id], div[id]{ scroll-margin-top:150px; }

  .eyebrow{
    display:inline-block; color:var(--cc-gold-strong); font-weight:700;
    letter-spacing:2px; font-size:13px; text-transform:uppercase; margin-bottom:8px;
  }
  .section-underline{ width:60px; height:4px; background:var(--cc-gold); margin:12px auto 0; border-radius:2px; }
  .section-underline.start{ margin-left:0; }

  /* ---------- Navbar ---------- */
  .navbar-cc{
    position:sticky; top:0; z-index:1030;
    background:rgba(255,255,255,0.9) !important;
    backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
    border-bottom:1px solid rgba(26,57,26,0.08);
  }
  .navbar-nav{ flex-wrap:nowrap; gap:6px; }
  .nav-link-icon{
    display:inline-flex; align-items:center; gap:4px; white-space:nowrap;
    font-size:/*clamp(12px, 0.78vw, 14.5px)*/ 14.5px !important; color:var(--cc-green-dark);
    padding-left:.4rem !important; padding-right:.4rem !important;
  }
  .nav-link-icon i{ font-size:1em; color:var(--cc-gold); }
  .btn-cc-primary{
    background:var(--cc-green-dark); color:#fff; border-radius:14px;
    font-size:15px; border:1px solid var(--cc-green-dark); white-space:nowrap;
    --bs-btn-focus-shadow-rgb:46,125,79;
  }
  .btn-cc-primary:hover{ background:var(--cc-green); color:#fff; }

  /* O Bootstrap usa um anel de foco azul fixo (rgba(13,110,253,.25)) em .nav-link,
     não vinculado ao tema — troca para o verde do site (afeta as abas do modal
     Agendar/Renovar Consulta e demais nav-pills como filtros de Patologias/Conteúdos). */
  .nav-link:focus-visible{ box-shadow:0 0 0 .25rem rgba(46,125,79,.35) !important; }

  /* Causa real do "azul": só o primeiro botão de cada par de abas (Agendar Consulta,
     Pix) tinha a cor verde escrita inline no HTML. Ao clicar no outro (Renovar
     Consulta, Cartão de Crédito), o Bootstrap marca .active nele e usa o azul
     padrão dele, pois não havia nenhuma regra de tema para isso. Fixando aqui
     cobre qualquer aba .active dentro dos modais, independente da ordem/HTML. */
  .modal .nav-pills .nav-link.active{ background-color:var(--cc-green-dark) !important; color:#fff !important; }
  .btn-cc-outline{
    border:1px solid var(--cc-gold); color:var(--cc-green-dark); border-radius:14px;
    font-size:16px; background:transparent; white-space:nowrap; text-decoration:none;
  }
  .btn-cc-outline:hover{ background:var(--cc-gold-soft); color:var(--cc-green-dark); }
  .btn-icon-round{
    width:38px; height:38px; border-radius:50%; display:inline-flex;
    align-items:center; justify-content:center; background:#25d366; color:#fff;
    font-size:18px; border:none; flex-shrink:0;
  }
  .dropdown-area-pessoal .dropdown-toggle{
    display:inline-flex; align-items:center; gap:5px; white-space:nowrap;
    border:1px solid var(--cc-green-dark); color:var(--cc-green-dark);
    border-radius:14px; font-size:13.5px; padding:9px 10px; background:transparent;
  }
  .dropdown-area-pessoal .dropdown-toggle:hover{ background:var(--cc-green-soft); }
  .navbar-cc .btn-cc-primary{ padding:8px 14px; }
  @media (max-width:1199.98px){
    .navbar-nav{ flex-wrap:wrap; }
    .navbar-right-group{ margin-top:12px; flex-wrap:wrap; }
  }
  @media (max-width:575.98px){
    .navbar-right-group{ width:100%; justify-content:center; }
    .navbar-right-group .btn-cc-primary{ flex:1 1 auto; }
  }

  /* ---------- Hero (carrossel em largura total) ---------- */
  .hero-full{ position:relative; width:100%; min-height:640px; overflow:hidden; }
  .hero-full-bg{ position:absolute; inset:0; z-index:0; }
  .hero-full-bg .carousel,
  .hero-full-bg .carousel-item,
  .hero-full-bg .carousel-inner{ height:100%; }
  .hero-full-bg img{ width:100%; height:100%; object-fit:cover; }
  .hero-full-overlay{
    position:absolute; inset:0; z-index:1;
    /*background:linear-gradient(90deg, rgba(255,255,255,.94) 0%, rgba(255,255,255,.78) 38%, rgba(255,255,255,.35) 65%, rgba(255,255,255,.12) 100%);*/
    
    background:linear-gradient(90deg, rgba(255, 255, 255, 1) 0%, rgb(255 255 255 / 100%) 45%, rgb(255 255 255 / 80%) 50%, rgba(255, 255, 255, 0) 60%);
  }
  .hero-full-content{ position:relative; z-index:2; padding:90px 0; }
  @media (max-width:767.98px){
    .hero-full{ min-height:auto; }
    .hero-full-content{ padding:56px 0 40px; }
    .hero-full-overlay{ background:rgba(255,255,255,.94); }
  }
  .badge-anos{
    display:inline-flex; align-items:center; gap:8px; background:var(--cc-white);
    border:1px solid var(--cc-gold); color:var(--cc-green-dark); border-radius:30px;
    padding:6px 16px; font-size:14px; font-weight:600;
  }
  .badge-anos i{ color:var(--cc-gold); }
  .trust-line{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-size:14px; color:#4b5a4d; margin-top:18px; }
  .trust-line i{ color:var(--cc-green); }
  .trust-line .dot{ color:var(--cc-gold); }

  .mini-card-strip .mini-card{
    background:#fff; border:1px solid rgba(26,63,34,.08); border-radius:18px;
    padding:20px; height:100%; box-shadow:0 6px 18px rgba(26,63,34,.05);
  }
  .mini-card .mini-icon{
    width:42px; height:42px; border-radius:50%; background:var(--cc-gold-soft);
    color:var(--cc-green-dark); display:flex; align-items:center; justify-content:center;
    font-size:20px; margin-bottom:10px;
  }
  .hero-teaser-bar{
    background:var(--cc-green-soft); border-radius:20px; padding:18px 26px;
    display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
  }

  /* ---------- Sobre / highlight mini ---------- */
  .highlight-mini{ display:flex; gap:12px; align-items:flex-start; }
  .highlight-mini i{ font-size:22px; color:var(--cc-gold); margin-top:3px; }

  /* ---------- Vantagens ---------- */
  .card-vantagem{ border-top:4px solid var(--cc-gold); transition:transform .3s ease, box-shadow .3s ease; }
  .card-vantagem:hover{ transform:translateY(-8px); box-shadow:0 16px 32px rgba(26,63,34,.18); }
  .card-vantagem .icone-vantagem{
    width:46px; height:46px; border-radius:50%; background:var(--cc-gold-soft); color:var(--cc-green-dark);
    display:flex; align-items:center; justify-content:center; font-size:22px; margin-bottom:14px;
  }

  /* ---------- Patologias ---------- */
  .patologia-pills .pill{
    border:1px solid rgba(26,63,34,.18); border-radius:30px; padding:8px 18px;
    font-size:14px; color:var(--cc-green-dark); background:#fff; white-space:nowrap;
    cursor:pointer; user-select:none; transition:background .2s ease, color .2s ease;
  }
  .patologia-pills .pill:hover{ background:var(--cc-green-soft); }
  .patologia-card.filtered-out{ display:none !important; }
  .patologia-pills .pill.active{ background:var(--cc-green-dark); color:#fff; border-color:var(--cc-green-dark); }
  .patologia-marquee-wrap{
    overflow:hidden;
    -webkit-mask-image:linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
    mask-image:linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
  }
  .patologia-marquee{ display:flex; gap:16px; width:max-content; animation:cc-scroll 48s linear infinite; }
  .patologia-marquee:hover{ animation-play-state:paused; }
  @keyframes cc-scroll{ from{ transform:translateX(0);} to{ transform:translateX(-50%);} }
  .patologia-card{
    flex:0 0 190px; background:#fff; border:1px solid rgba(26,63,34,.08); border-radius:18px;
    padding:22px 16px; text-align:center; cursor:pointer; box-shadow:0 4px 14px rgba(26,63,34,.05);
    transition:box-shadow .25s ease, transform .25s ease;
  }
  .patologia-card:hover{ box-shadow:0 10px 24px rgba(26,63,34,.14); transform:translateY(-4px); }
  .patologia-card .p-icon{
    width:44px; height:44px; border-radius:50%; margin:0 auto 10px; background:var(--cc-green-soft);
    color:var(--cc-green-dark); display:flex; align-items:center; justify-content:center; font-size:20px;
  }
  .patologia-card h1{ font-size:15px; margin-bottom:4px; }
  .patologia-card p{ font-size:12px; color:#666; margin-bottom:6px; min-height:32px; }
  .patologia-card .saiba-mais{ font-size:12px; color:var(--cc-green); font-weight:700; }

  .banner-individualizado{
    background:var(--cc-green-soft); border-radius:36px; overflow:hidden;
  }
  .banner-individualizado img{ width:100%; height:100%; object-fit:cover; min-height:260px; }
  .trust-icons-row{ display:flex; gap:24px; flex-wrap:wrap; margin-top:26px; }
  .trust-icons-row .item{ display:flex; align-items:center; gap:10px; font-size:14px; color:var(--cc-green-dark); }
  .trust-icons-row .item i{ font-size:20px; color:var(--cc-gold); }

  /* ---------- Etapa por etapa / timeline ---------- */
  .timeline-step{ position:relative; padding-left:74px; }
  .timeline-step:not(:last-child){ padding-bottom:44px; }
  .timeline-step:not(:last-child)::before{
    content:""; position:absolute; left:24px; top:56px; bottom:0; width:2px; background:rgba(255,255,255,.35);
  }
  .timeline-num{
    position:absolute; left:0; top:0; width:48px; height:48px; border-radius:50%;
    background:var(--cc-gold); color:var(--cc-green-dark); display:flex; align-items:center;
    justify-content:center; font-weight:700; font-size:20px;
  }
  .timeline-card{ background:rgba(215,224,205,.14); border-radius:30px; padding:24px; }
  .timeline-card img{ width:180px; height:180px; object-fit:cover; border-radius:20px; flex-shrink:0; }
  .porque-strip{ background:var(--cc-green-soft); border-radius:26px; padding:30px; margin-top:50px; }
  .porque-strip .item{ text-align:center; }
  .porque-strip i{ font-size:26px; color:var(--cc-green-dark); }

  /* ---------- Conteúdos ---------- */
  .conteudo-card{
    background:#fff; border-radius:20px; overflow:hidden; border:1px solid rgba(26,63,34,.08);
    box-shadow:0 6px 18px rgba(26,63,34,.05); height:100%;
  }
  .conteudo-card img{ width:100%; height:170px; object-fit:cover; }
  .conteudo-card .cat-tag{
    display:inline-block; font-size:11px; font-weight:700; letter-spacing:.5px; text-transform:uppercase;
    color:var(--cc-gold-strong); margin-bottom:6px;
  }
  .newsletter-bar{
    background:var(--cc-green-dark); color:#fff; border-radius:26px; padding:30px 34px;
    display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; margin-top:50px;
  }
  .video-mock{ position:relative; border-radius:24px; overflow:hidden; cursor:pointer; min-height:260px; }
  .video-mock img{ width:100%; height:100%; object-fit:cover; filter:brightness(.65); position:absolute; inset:0; }
  .video-mock .play-btn{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; z-index:2; }
  .video-mock .play-btn span{
    width:78px; height:78px; border-radius:50%; background:rgba(255,255,255,.92);
    display:flex; align-items:center; justify-content:center; font-size:30px; color:var(--cc-green-dark);
  }
  .video-mock .video-caption{
    position:absolute; left:0; right:0; bottom:0; z-index:2; padding:22px;
    background:linear-gradient(0deg, rgba(0,0,0,.65), transparent); color:#fff;
  }

  /* ---------- FAQ ---------- */
  .faq-search{ max-width:520px; margin:22px auto 0; position:relative; }
  .faq-search input{ border-radius:30px; padding:12px 20px 12px 44px; border:1px solid rgba(26,63,34,.2); width:100%; }
  .faq-search i{ position:absolute; left:16px; top:50%; transform:translateY(-50%); color:#999; }
  .faq-cat-strip{ display:flex; gap:14px; flex-wrap:wrap; justify-content:center; margin-top:34px; }
  .faq-cat-strip .cat{
    background:#fff; border:1px solid rgba(26,63,34,.08); border-radius:16px; padding:14px 18px;
    display:flex; align-items:center; gap:10px; min-width:160px; box-shadow:0 4px 12px rgba(26,63,34,.04);
  }
  .faq-cat-strip .cat i{ font-size:20px; color:var(--cc-gold); }
  .faq-cat-strip .cat small{ display:block; color:#888; }
  .faq-trust-strip .card{
    border:1px solid rgba(26,63,34,.08); border-radius:18px; padding:20px; height:100%;
  }
  .faq-trust-strip i{ font-size:24px; color:var(--cc-green-dark); background:var(--cc-gold-soft); width:44px; height:44px; border-radius:50%; display:flex; align-items:center; justify-content:center; margin-bottom:10px; }
  .accordion-item.d-none{ display:none !important; }

  /* ---------- Contato ---------- */
  .contato-info-strip{ display:flex; flex-wrap:wrap; gap:24px; padding:26px; background:#fff; }
  .contato-info-strip .item{ display:flex; gap:12px; align-items:flex-start; flex:1 1 220px; }
  .contato-info-strip .item i{
    width:42px; height:42px; border-radius:50%; background:var(--cc-green-soft); color:var(--cc-green-dark);
    display:flex; align-items:center; justify-content:center; font-size:18px; flex-shrink:0;
  }
  .contato-cta-card{
    position:relative; border-radius:22px; overflow:hidden; min-height:320px; display:flex; align-items:flex-end;
  }
  .contato-cta-card img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
  .contato-cta-card .overlay{ position:relative; z-index:2; background:linear-gradient(0deg, rgba(26,63,34,.88), rgba(26,63,34,.15)); width:100%; padding:26px; color:#fff; }
  .duvidas-antes .card{ border:1px solid rgba(26,63,34,.08); border-radius:16px; padding:18px; height:100%; }
  .duvidas-antes i{ font-size:20px; color:var(--cc-gold-strong); }

  /* ---------- WhatsApp float + chat modal ---------- */
  .whatsapp-float{
    position:fixed; right:24px; bottom:24px; width:62px; height:62px; border-radius:50%;
    background:linear-gradient(135deg,#25d366,var(--cc-green-dark)); display:flex; align-items:center;
    justify-content:center; color:#fff; font-size:28px; box-shadow:0 10px 26px rgba(0,0,0,.28);
    z-index:1040; text-decoration:none; animation:cc-float 3s ease-in-out infinite; border:none;
  }
  .whatsapp-float:hover{ color:#fff; }
  @keyframes cc-float{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-8px);} }
  .chat-blob-wrap{
    position:relative; min-height:180px; border-radius:20px; overflow:hidden;
    background:linear-gradient(135deg,#eef3ee,#f7f2e6); margin-bottom:20px; display:flex; align-items:center; justify-content:center;
  }
  .chat-blob{
    width:130px; height:130px; border-radius:44% 56% 60% 40% / 50% 45% 55% 50%;
    background:radial-gradient(circle at 35% 35%, #bcd6c4, #6f9c7c 70%);
    animation:cc-blob 6s ease-in-out infinite;
    box-shadow:0 0 40px rgba(46,125,79,.25);
  }
  @keyframes cc-blob{
    0%,100%{ border-radius:44% 56% 60% 40% / 50% 45% 55% 50%; transform:scale(1) rotate(0deg); }
    50%{ border-radius:60% 40% 45% 55% / 45% 55% 45% 55%; transform:scale(1.08) rotate(8deg); }
  }

  /* ---------- Modal calendário ---------- */
  .cal-widget{ display:flex; gap:18px; flex-wrap:wrap; }
  .cal-month{ flex:1 1 260px; }
  .cal-month-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:10px; font-weight:700; color:var(--cc-green-dark); }
  .cal-month-head .cal-nav{ background:none; border:none; padding:4px 8px; color:var(--cc-green-dark); font-size:16px; line-height:1; border-radius:6px; cursor:pointer; }
  .cal-month-head .cal-nav:hover:not(.disabled){ background:var(--cc-green-soft); }
  .cal-month-head .cal-nav.disabled{ opacity:.3; cursor:not-allowed; }
  .cal-month table{ width:100%; text-align:center; border-collapse:separate; border-spacing:4px; }
  .cal-month th{ font-size:11px; color:#888; font-weight:600; }
  .cal-month td{ font-size:13px; }
  .cal-month td span{
    display:inline-flex; align-items:center; justify-content:center; width:30px; height:30px;
    border-radius:50%; cursor:default;
  }
  .cal-month td.available span{ background:var(--cc-green-soft); color:var(--cc-green-dark); cursor:pointer; }
  .cal-month td.disabled span{ color:#ccc; cursor:not-allowed; }
  .cal-month td.today span{ background:var(--cc-green-dark); color:#fff; font-weight:700; }
  .cal-month td span.selected{ background:var(--cc-gold); color:var(--cc-green-dark); font-weight:700; box-shadow:0 0 0 2px var(--cc-green-dark) inset; }
  .cal-selected-info{ font-size:13px; color:var(--cc-green-dark); margin-top:10px; font-weight:600; }
  .cal-slots{ flex:1 1 160px; max-height:260px; overflow-y:auto; display:flex; flex-direction:column; gap:8px; }
  .cal-slots button{
    border:1px solid rgba(26,63,34,.2); background:#fff; border-radius:10px; padding:8px 10px;
    font-size:13px; color:var(--cc-green-dark); text-align:left;
  }
  .cal-slots button.active{ background:var(--cc-green-dark); color:#fff; border-color:var(--cc-green-dark); }
  .modal-trust-bar{ display:flex; gap:18px; flex-wrap:wrap; justify-content:center; margin-top:22px; padding-top:18px; border-top:1px solid rgba(26,63,34,.1); font-size:13px; color:#555; }

  /* ---------- Modal pagamento ---------- */
  .pagamento-resumo{ background:var(--cc-green-soft); color:var(--cc-green-dark); font-weight:600; font-size:14px; padding:12px 16px; border-radius:10px; margin-bottom:20px; }
  .pix-box{ max-width:360px; margin:0 auto; }
  .pix-qr{ width:160px; height:160px; margin:0 auto 16px; display:flex; align-items:center; justify-content:center; background:#fff; border:2px dashed rgba(26,63,34,.25); border-radius:14px; font-size:80px; color:var(--cc-green-dark); }
  .pix-instrucao{ font-size:14px; color:#555; margin-bottom:14px; }
  #pixCodigo{ font-size:12px; }
  .modal-trust-bar .item{ display:flex; align-items:center; gap:6px; }
  .modal-trust-bar i{ color:var(--cc-green); }

  /* ---------- Trabalhe Conosco (card compacto) ---------- */
  .trabalhe-card{
    background:#f3efe6; border-radius:28px; padding:22px;
    display:flex; align-items:center; gap:28px; flex-wrap:wrap;
  }
  .trabalhe-photo{ flex:0 0 260px; align-self:stretch; overflow:hidden; border-radius:20px; }
  .trabalhe-photo img{ width:100%; height:100%; min-height:200px; max-height:260px; object-fit:cover; border-radius:20px; display:block; }
  .trabalhe-content{ min-width:280px; }
  .trabalhe-icons{ display:flex; gap:0; margin-top:18px; flex-wrap:wrap; }
  .trabalhe-icon-item{
    display:flex; align-items:center; gap:10px; padding:0 20px;
    border-right:1px solid rgba(26,63,34,.15);
  }
  .trabalhe-icon-item:first-child{ padding-left:0; }
  .trabalhe-icon-item:last-child{ border-right:none; }
  .trabalhe-icon-item i{ font-size:26px; color:var(--cc-green-dark); flex-shrink:0; }
  .trabalhe-icon-item span{ font-size:14px; color:#1a391a; font-weight:600; line-height:1.25; }
  .trabalhe-cta{ flex:0 0 240px; display:flex; flex-direction:column; align-items:flex-start; gap:14px; }
  .btn-medico-parceiro{
    display:inline-flex; align-items:center; gap:10px; background:#fff; color:var(--cc-green-dark);
    border:1px solid rgba(26,63,34,.35); border-radius:30px; padding:13px 20px; font-size:14.5px; font-weight:600;
    white-space:nowrap;
  }
  .btn-medico-parceiro:hover{ background:var(--cc-green-soft); }
  .trabalhe-link{ display:inline-flex; align-items:center; gap:6px; color:var(--cc-green-dark); font-size:14px; font-weight:600; text-decoration:none; }
  .trabalhe-link:hover{ color:var(--cc-green); }
  @media (max-width:1199.98px){
    .trabalhe-card{ flex-direction:column; align-items:stretch; text-align:center; }
    .trabalhe-photo{ flex:none; width:100%; max-width:340px; height:220px; margin:0 auto; }
    .trabalhe-content{ min-width:0; }
    .trabalhe-content p{ margin-left:auto; margin-right:auto; }
    .trabalhe-icons{ justify-content:center; }
    .trabalhe-icon-item{ border-right:none; padding:6px 14px; }
    .trabalhe-cta{ flex:none; width:100%; align-items:center; }
    .btn-medico-parceiro{ white-space:normal; max-width:100%; text-align:center; justify-content:center; }
  }

  /* ---------- Footer ---------- */
  footer.cc-footer{ background:var(--cc-green-dark); color:#e9efe9; border-top:4px solid var(--cc-gold); padding:50px 0 24px; }
  footer.cc-footer a{ color:#e9efe9; text-decoration:none; }
  footer.cc-footer a:hover{ color:var(--cc-gold); }
  footer.cc-footer .cols{ display:flex; flex-wrap:wrap; gap:40px; justify-content:space-between; }
  footer.cc-footer h6{ color:var(--cc-gold); font-family:'Poppins',sans-serif; margin-bottom:14px; }
  footer.cc-footer ul{ list-style:none; padding:0; margin:0; }
  footer.cc-footer li{ margin-bottom:8px; font-size:14px; }
  footer.cc-footer .copy{ border-top:1px solid rgba(255,255,255,.15); margin-top:34px; padding-top:18px; font-size:13px; color:#bcd0bf; text-align:center; }

  /* ---------- Responsividade geral ---------- */
  .padding-titulo-time-de-medicos{ flex-wrap:wrap; }
  @media (max-width:767.98px){
    .padding-titulo-time-de-medicos{ flex-direction:column; align-items:center !important; text-align:center; min-height:auto !important; padding-top:36px !important; padding-bottom:28px !important; gap:16px; }
  }
  @media (max-width:767.98px){
    [style*="padding:60px;"]{ padding:32px 20px !important; }
    [style*="padding:50px;"]{ padding:28px 20px !important; }
    [style*="padding:30px;"]{ padding:22px !important; }
  }
  @media (max-width:575.98px){
    [style*="padding:60px;"]{ padding:26px 16px !important; }
    [style*="padding:50px;"]{ padding:22px 16px !important; }
    .titulo-banner-topo{ font-size:32px !important; }
    .hero-teaser-bar{ flex-direction:column; align-items:flex-start; }
  }