/* Secure9 mobile layout fixes
   Add this file after styles.css in index.html.
*/

@media (max-width: 768px) {
  /* Keep anchored section headings clear of the fixed header */
  html {
    scroll-padding-top: 120px;
  }

  section[id] {
    scroll-margin-top: 120px;
  }

  /* Reduce the oversized empty hero illustration area on phones */
  .hero-visual {
    min-height: 430px !important;
    height: 430px !important;
  }

  /* Keep the decorative radar centred and contained */
  .hero-visual .radar-ring {
    max-width: 360px;
    max-height: 360px;
  }

  /* Bring the two service badges slightly inward on smaller screens */
  .hero-visual .dog-card {
    left: 0 !important;
    bottom: 28px !important;
  }

  .hero-visual .cctv-card {
    right: 0 !important;
    top: 28px !important;
  }
}