/* ------------------- GLOBAL HERO ------------------- */
.hero {
  padding: 60px 20px;
  text-align: center;
}

/* ------------------- NAVBAR ------------------- */
nav {
  height: 72px;
  line-height: 72px;
  z-index: 999;
}

nav .brand-logo {
  padding-left: 56px;
  font-size: 1.3rem;
  white-space: nowrap;
}

/* Responsive navbar adjustments */
@media (max-width: 992px) {
  /* Center logo on tablet/mobile so it never overlaps the hamburger icon */
  nav .brand-logo {
    padding-left: 0;
    left: 50%;
    transform: translateX(-50%);
    font-size: 1.1rem;
  }
}

@media (max-width: 600px) {
  nav {
    height: 64px;
    line-height: 64px;
  }
  nav .brand-logo {
    font-size: 1rem;
  }
}

/* ------------------- CARDS (projects/services) ------------------- */
/*
  PROBLEM:
  Materialize uses floats for the grid. If cards have different heights, the next row
  can slide up under shorter columns → looks misaligned.

  FIX:
  Make only the special rows flex containers so wrapping is strict into rows.
  IMPORTANT: do NOT override Materialize gutter margins/paddings (no custom -8px).
*/

.row.flex-row,
.row.equal-height {
  display: flex;
  flex-wrap: wrap;
  /* keep Materialize default .row margins (it already handles gutters) */
}

/* Make columns flex items (and stop float behavior for these rows only) */
.row.flex-row > .col,
.row.equal-height > .col {
  float: none;              /* prevent float "masonry" stacking */
  display: flex;
  flex-direction: column;
}

/* Cards fill the column height */
.row.flex-row .card,
.row.equal-height .card {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* Card content grows to fill remaining space */
.row.flex-row .card .card-content,
.row.equal-height .card .card-content {
  flex-grow: 1;
  text-align: center;
}

/* Card images */
.card-image img {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

/* Optional: make hover effect consistent */
.card.hoverable {
  transition: transform 0.2s;
}

.card.hoverable:hover {
  transform: translateY(-5px);
}