/* Styles moved from index.html for FAB and hero buttons */

/* Floating services button (above WhatsApp) */
.services-fab{
    position: fixed;
    right: 22px;
    bottom: 92px; /* sits above whatsapp which is at ~22px bottom */
    width:56px;
    height:56px;
    border-radius:50%;
    background: linear-gradient(135deg,#2ecc71,#11b35a);
    display:flex;
    align-items:center;
    justify-content:center;
    box-shadow:0 6px 18px rgba(17,179,90,0.22);
    z-index: 99999;
    color:#fff;
    text-decoration:none;
    transition: transform 0.18s ease, opacity 0.25s ease;
}
.services-fab:focus{outline:3px solid rgba(17,179,90,0.25)}
.services-fab.hidden{opacity:0;transform:translateY(12px) scale(0.98);pointer-events:none}
.services-fab .bi{font-size:1.4rem}
.services-fab .fab-label{
    position: absolute;
    right: 70px;
    bottom: 50%;
    transform: translateY(50%);
    background: #fff;
    color: #0b2142;
    padding: 8px 12px;
    border-radius: 999px;
    font-weight:600;
    box-shadow: 0 6px 20px rgba(11,33,66,0.12);
    white-space:nowrap;
    opacity:0;
    transition: all 0.35s cubic-bezier(.2,.9,.2,1);
    font-size:0.95rem;
}
.services-fab.show-label .fab-label{opacity:1; right: 74px}
/* small pulse to draw attention briefly */
@keyframes fab-pulse{0%{transform:scale(1)}50%{transform:scale(1.06)}100%{transform:scale(1)}}
.services-fab.attention{animation: fab-pulse 1.2s ease-in-out 2}

/* Hero quick service button */
.btn-service-quick{
    background:#29c76f;
    border:0;
    color:#fff;
    padding:12px 22px;
    border-radius:28px;
    font-weight:600;
}
.btn-service-quick:focus{outline:3px solid rgba(41,199,111,0.16)}

/* Hero buttons: unified design, different colors, centered and responsive */
.hero-buttons{display:flex;align-items:center;justify-content:center;gap:16px}
.hero-cta, .btn-service-quick{
    --btn-height:56px;
    min-width:260px;
    max-width:360px;
    height: var(--btn-height);
    padding:0 28px; /* vertical padding removed, height controls vertical size */
    border-radius:30px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:0.6px;
    box-shadow:0 8px 20px rgba(11,33,66,0.08);
    border:0;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    color:#fff !important;
    transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.12s ease;
    font-size:0.95rem;
    line-height:1.05; /* allow wrapping but keep compact */
    text-align:center;
    white-space:normal;
    padding-top:4px; /* tiny nudge for vertical centering of two-line labels */
}
.hero-cta{ background: linear-gradient(90deg,#24b04a,#18a34a); }
.btn-service-quick{ background: linear-gradient(90deg,#11b35a,#29c76f); }
.hero-cta:hover, .btn-service-quick:hover{ transform: translateY(-3px); box-shadow:0 14px 28px rgba(11,33,66,0.12)}
@media (max-width: 576px){
    .hero-buttons{flex-direction:column;gap:12px}
    .hero-cta, .btn-service-quick{width:100%;min-width:0;max-width:100%;height:auto;padding:12px 20px}
    /* Keep the same stacking as desktop on small screens: the services FAB sits above the WhatsApp FAB
       so both are vertically aligned at the right edge. Use fixed bottom offset to avoid visual misalignment. */
    .services-fab{right:18px;bottom:92px;width:56px;height:56px;transform:none}
    /* Position the pill label vertically centered with the FAB */
    .services-fab .fab-label{right:74px;bottom:50%;transform:translateY(50%);font-size:0.9rem}
}