/* fontes e reset simples */
:root{
  --dark-blue: #2b3a42;
  --muted: #6c757d;
}
body{
  font-family: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  color:#333;
  line-height:1.45;
}

/* HERO: imagem de fundo com overlay */
.bg-image{
  background-image: url("https://picsum.photos/1600/420?random=200");
  background-size: cover;
  background-position: center;
  min-height: 320px;
  position: relative;
}
.hero-overlay{
  background: rgba(0,0,0,0.35);
  min-height: 320px;
  display:flex;
  align-items:center;
  justify-content:center;
}

/* central small circular logo overlapping navbar */
.logo-center{
  position: absolute;
  left:50%;
  transform: translateX(-50%);
  top: -26px;
  width:84px;
  height:84px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.navbar .logo-center img{ width:80px; height:80px; object-fit:cover; }

/* section title underline style used in dark section */
.section-title{
  font-weight:500;
  font-size:1.5rem;
  position: relative;
  display:inline-block;
  padding-bottom:0.6rem;
}
.section-title::after{
  content:'';
  width:120px;
  height:3px;
  background: rgba(255,255,255,0.35);
  display:block;
  margin:6px auto 0;
}

/* dark bluish background for second big section */
.bg-dark-blue{
  background: #2d3b44; /* azul-acinzentado escuro */
}

/* small circular thumbnails used across layout */
.small-thumb{
  width:72px;
  height:72px;
  object-fit:cover;
  border: 3px solid rgba(255,255,255,0.06);
}

/* rounded card images style already applied via bootstrap, we add minor shadow */
.card img, img.rounded-3{
  box-shadow: 0 4px 10px rgba(0,0,0,0.06);
}

/* ensure big white card in section 2 stands out */
.bg-dark-blue .card{
  background: #fff;
}

/* spacing helpers to keep layout airy */
.pt-5{ padding-top:3rem!important; }
.pb-5{ padding-bottom:3rem!important; }
.py-6{ padding-top:4rem!important; padding-bottom:4rem!important; }

/* smaller text muted */
.text-muted.small{ font-size:0.92rem; color:var(--muted); }

/* responsive tweaks */
@media (max-width: 991px){
  .logo-center{ top:-40px; }
  .hero-overlay{ min-height:260px; }
}