/* ===== PROCESS SZEKCIÓ ===== */
.process-row               { min-height: 480px; }          /* közös „keret” */
@media (max-width: 991.98px){
  .process-row             { min-height: 360px; }
}

/* a két oszlop rugalmas – a benne lévő kép kitölti a helyet */
.process-row > [class*="col-"]{
  display: flex;
}

/* közös kép‑szabályok */
.process-row img{
  width: 100%;
  height: 100%;
  display: block;
}

/* finomhangolás: bal oldali SVG teljes tartalom, jobb oldali fotó kitölt */
.object-contain { object-fit: contain; }
.object-cover   { object-fit: cover;   }

/* ===== HERO overlay ================================================= */
.overlay{
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  background: rgba(0,0,0,.55);
  color: #fff;

  /* alapbeállítás – mobil (xs) */
  width: 90%;
  max-width: 600px;          /* sose menjen 600 px fölé */
  padding: 1rem;
  border-radius: .5rem;
}

@media (min-width: 576px){   /* ≥ sm */
  .overlay{ width: 80%; }
}
@media (min-width: 768px){   /* ≥ md */
  .overlay{ width: 60%; padding: 1.25rem; }
}
@media (min-width: 992px){   /* ≥ lg */
  .overlay{ width: 45%; padding: 2rem; }
}

/* ---- Typo: fluid méretek ------------------------------------------ */
.overlay h1{
  /* 1.5rem–3rem közt skálázódik:    clamp(min, preferred, max) */
  font-size: clamp(1.5rem, 3vw + 1rem, 3rem);
}
.overlay p{
  font-size: clamp(1rem,   2vw + .5rem, 1.25rem);
}



/*footer */
/* ===== Footer dizájn ============================================== */
.footer-dark{
  background:#2b2b2b;          /* grafitszürke */
  color:#f8f9fa;
}
.footer-link{
  color:#f8f9fa;
  text-decoration:none;
}
.footer-link:hover{
  text-decoration:underline;
}
.opacity-10{ opacity:.1; }     /* finom elválasztó vonal */

.footer-dark a.footer-link .bi { transition: transform .2s ease; }
.footer-dark a.footer-link:hover .bi { transform: scale(1.15); }

/*szolgáltatások menü */

.icon-box {
  width: 50px;
  height: 50px;
  flex: 0 0 50px;
  border: 2px solid #d0d0d0;   /* vékony szürke keret */
  border-radius: 6px;          /* enyhén kerek */
  display: flex;
  align-items: center;
  justify-content: center;
}
.icon-box img {
  max-width: 70%;              /* pici margó a kereten belül */
}
/* ↓  Monitor‑keret + talp   ------------------------------------ */
.device-frame {
  position: relative;
  border: 6px solid #000;        /* vastag fekete keret */
  border-radius: 6px;
  display: inline-block;
  max-width: 260px;              /* igény szerint */
  background: #000;
}
.device-frame img {
  display: block;
  width: 100%;
  height: auto;
}
.device-stand {
  position: absolute;
  left: 50%;
  bottom: -14px;                 /* talp „kilóg” */
  transform: translateX(-50%);
  width: 65%;
  height: 12px;
  background: #ccc;
  border-radius: 0 0 4px 4px;
}
/* ---- Hatszög (hexagon) képkeret ---------------------------- */
.hexagon {
  width: 260px;               /* igény szerint */
  aspect-ratio: 1;
  clip-path: polygon(25% 4%, 75% 4%, 100% 50%, 75% 96%, 25% 96%, 0% 50%);
  overflow: hidden;
  background: #000;
}
@media (min-width: 768px) {
  .hexagon { width: 300px; }
}