/* Responsive hero background
   - Desktop: tekas_smarthub.webp (fills viewport)
   - Mobile (<=768px): tekas_smarthub_mobile.webp with 9:16 aspect ratio
*/

body {
  margin: 0;
  background: #042a63;
}

.hero {
  width: 100%;
  min-height: 100vh;
  background-image: url("/assets/images/tekas_smarthub.webp");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover; /* fill the viewport while preserving aspect */
}

@media (max-width: 768px) {
  .hero {
    background-image: url("/assets/images/tekas_smarthub_mobile.webp");
    background-size: contain; /* ensure full image visible on narrow screens */
    background-position: center;
    min-height: auto;
    aspect-ratio: 9 / 16; /* keep mobile image aspect */
    width: 100%;
  }
}