.elementor-2 .elementor-element.elementor-element-346e777{--display:flex;--min-height:100vh;--justify-content:center;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;overflow:visible;}.elementor-2 .elementor-element.elementor-element-b4b3d4d{width:100%;max-width:100%;padding:0px 0px 0px 0px;transition:background 3s;}.elementor-2 .elementor-element.elementor-element-b4b3d4d.elementor-element{--align-self:center;}:root{--page-title-display:none;}@media(max-width:767px){.elementor-2 .elementor-element.elementor-element-346e777{--min-height:100vh;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:72px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-2 .elementor-element.elementor-element-346e777.e-con{--align-self:center;}.elementor-2 .elementor-element.elementor-element-b4b3d4d{padding:66px 0px 0px 0px;}.elementor-2 .elementor-element.elementor-element-b4b3d4d.elementor-element{--align-self:center;}}@media(min-width:768px){.elementor-2 .elementor-element.elementor-element-346e777{--width:100%;}}/* Start custom CSS for html, class: .elementor-element-b4b3d4d *//* ===== HERO — mobile layout fix ===== */
:root{
  /* If your header height on mobile is different, change this value */
  --mg-header-h: 72px;
  /* Tiny cushion between header and hero content */
  --mg-hero-gap: 12px;
}

@media (max-width: 767px){

  /* Pull the hero background up under the sticky header,
     then add padding so the content sits just below it */
  .mg-hero{
    position: relative;
    isolation: isolate;                    /* keeps the glow behind */
    margin-top: calc(-1 * var(--mg-header-h));
    padding: calc(var(--mg-header-h) + var(--mg-hero-gap)) 16px 24px;
  }

  /* Make sure the glow stays behind everything */
  .mg-gradient{
    position: absolute;
    inset: -25% -15% -15% -15%;
    pointer-events: none;
    z-index: 0;
  }
  .mg-hero > *:not(.mg-gradient){
    position: relative;
    z-index: 1;
  }

  /* Center the badge and give it space above the card */
  .mg-badge{
    display: block;             /* becomes block so margin auto works */
    width: max-content;         /* shrink to its text width */
    margin: 0 auto 14px !important;  /* centered + gap below */
    max-width: calc(100% - 32px);    /* safe side gutters on narrow phones */
  }

  /* The card can sit right after the badge; spacing comes from the badge */
  .mg-card{ margin-top: 0 !important; }
}
/* ── Mobile: nudge the hero content up a touch ────────────────── */
@media (max-width: 767px){
  /* If you want, you can shave the built-in gap a bit more */
  :root{ --mg-hero-gap: 6px; }      /* try 6px, 4px, or even 0px */

  /* Lift the content group slightly without touching the background */
  .mg-wrap{ transform: translateY(-80px); }  /* adjust: -6…-16px */

  /* Keep clean spacing under the pill */
  .mg-badge{ margin-bottom: 16px !important; }

  /* Make sure no extra top margin creeps in from the card */
  .mg-card{ margin-top: 0 !important; }
}

/* Mobile: hard-center the ALERTS pill without squashing the card */
@media (max-width: 767px){
  /* turn the hero inner wrapper into a tiny grid so we can aim items precisely */
  .mg-wrap{
    display: grid !important;
    grid-auto-rows: max-content;
    row-gap: 16px;                 /* space between pill and card */
  }

  /* center the pill itself */
  .mg-wrap > .mg-badge{
    justify-self: center !important;   /* true center horizontally */
    margin: 0 !important;              /* kill inherited offsets */
    left: auto !important;
    right: auto !important;
    transform: none !important;        /* in case an earlier transform was set */
    width: max-content !important;     /* shrink to text width */
  }

  /* make sure the main card still spans the width it needs */
  .mg-wrap > .mg-card{
    justify-self: stretch !important;
  }
}/* End custom CSS */