:root{
    /* ---- Retheme the whole thing from here ---- */
    --hub-color:      #1B4B43;   /* main hub button */
    --hub-color-hover:#123832;
    --btn-color:      #FFFFFF;   /* satellite buttons */
    --btn-icon:       #1B4B43;
    --accent:         #C9A24B;   /* chat button gets the accent */
    --label-bg:       #1B1B1B;
    --shadow:         0 6px 18px rgba(0,0,0,.22);
    --gap:            14px;      /* space between satellite buttons */
    --size-main:      68px;
    --size-btn:       68px;

    --primary-color: #092356;
    --primary-hover: #1d4ed8;
    --text-dark: #dc9737;
    --text-light: #1d4ed8;
    --bg-white: #092356;
    --border-color: #e5e7eb;
  }

  * { box-sizing: border-box; }

  /* ---------------------------------------------
     Hub container — fixed, bottom right
  --------------------------------------------- */
  .fab-hub{
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 9999;
    display: flex;
    flex-direction: column-reverse; /* main button stays at bottom */
    align-items: flex-end;
    gap: var(--gap);
  }

  /* ---------------------------------------------
     Main hub button
  --------------------------------------------- */
  .fab-main{
    width: var(--size-main);
    height: var(--size-main);
    border-radius: 50%;
    border: none;
    background: var(--primary-color);
    box-shadow: var(--shadow);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .2s ease, transform .25s ease;
    flex-shrink: 0;
  }
  .fab-main:hover{ background: var(--primary-hover); }
  .fab-main:active{ transform: scale(.94); }

  .fab-main svg{
    width: 24px; height: 24px;
    stroke: #fff;
    transition: transform .3s ease;
  }
  .fab-hub.is-open .fab-main svg{ transform: rotate(135deg); }

  /* ---------------------------------------------
     Satellite buttons list
  --------------------------------------------- */
  .fab-list{
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column-reverse;
    align-items: flex-end;
    gap: var(--gap);
  }

  .fab-item{
    display: flex;
    align-items: center;
    gap: 10px;
    /* hidden state: tucked behind the hub, slid in from the side */
    opacity: 0;
    transform: translate(24px, 16px) scale(.6);
    pointer-events: none;
    transition: opacity .28s ease, transform .28s cubic-bezier(.34,1.56,.64,1);
  }

  .fab-hub.is-open .fab-item{
    opacity: 1;
    transform: translate(0,0) scale(1);
    pointer-events: auto;
  }

  /* stagger each button as they come up */
  .fab-hub.is-open .fab-item:nth-child(1){ transition-delay: .09s; }
  .fab-hub.is-open .fab-item:nth-child(2){ transition-delay: .06s; }
  .fab-hub.is-open .fab-item:nth-child(3){ transition-delay: .03s; }
  .fab-hub.is-open .fab-item:nth-child(4){ transition-delay: 0s; }

  .fab-btn{
    width: var(--size-btn);
    height: var(--size-btn);
    border-radius: 50%;
    border: none;
    background: var(--primary-color);
    box-shadow: var(--shadow);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: transform .15s ease;
  }
  .fab-btn:hover{ transform: scale(1.08); }
  .fab-btn:active{ transform: scale(.95); }
  .fab-btn svg{ width: 35px; height: 35px; stroke: #fff; }

  .fab-item i{color: #fff;}
  .fab-item img{width: 35px; height: 35px}

  .fab-item.is-chat .fab-btn{ background: var(--primary-color); }
  .fab-item.is-chat .fab-btn svg{ stroke: #fff; stroke-width:.06rem;}

  /* label bubble, revealed to the side on hover/focus */
  .fab-label{
    background: var(--label-bg);
    color: #fff;
    font-size: 13px;
    line-height: 1;
    padding: 7px 10px;
    border-radius: 6px;
    white-space: nowrap;
    opacity: 0;
    transform: translateX(6px);
    transition: opacity .15s ease, transform .15s ease;
    pointer-events: none;
  }
  .fab-item:hover .fab-label,
  .fab-item:focus-within .fab-label{
    opacity: 1;
    transform: translateX(0);
  }

  @media (max-width: 480px) {
    body.tawk-mobile, html.tawk-mobile {max-height: 70vh!important;}}

  @media (max-width: 480px){
    .fab-label{ display:none; } /* labels get crowded on small screens */
    :root{ --size-main:65px; --size-btn:65px; }
    .fab-item img{width: 35px; height: 35px}
    .fab-item svg{width: 35px; height: 35px}
  }

  @media (prefers-reduced-motion: reduce){
    .fab-item, .fab-main svg{ transition: none; }
  }