:root {
    /* =========================
   STICKY CTA VARIABLES
========================= */

--sticky-cta-bottom:22px;
--sticky-cta-right:22px;
--sticky-cta-gap:12px;
--sticky-cta-z:9999;

/* icon */

--sticky-icon-width:54px;
--sticky-icon-height:54px;

--sticky-icon-radius:14px;

--sticky-icon-color:#fff;
--sticky-icon-size:20px;

--sticky-icon-bg:rgba(20,22,26,0.85);

--sticky-icon-border:rgba(255,255,255,0.08);

--sticky-icon-blur:10px;

--sticky-icon-shadow:0 10px 30px rgba(0,0,0,0.35);

/* hover */

--sticky-icon-hover-border:rgba(255,255,255,0.18);
--sticky-icon-hover-y:-4px;
--sticky-icon-hover-scale:1.05;

/* whatsapp */

--sticky-whatsapp-bg:rgba(37,211,102,0.12);
--sticky-whatsapp-border:rgba(37,211,102,0.35);
--sticky-whatsapp-color:#25d366;

/* pulse */

--sticky-pulse-radius:14px;
--sticky-pulse-border:rgba(255,255,255,0.2);
--sticky-pulse-duration:2.5s;
--sticky-pulse-start-opacity:.6;
--sticky-pulse-scale:1.6;

/* mobile */

--sticky-mobile-bottom:16px;
--sticky-mobile-right:16px;
--sticky-mobile-width:52px;
--sticky-mobile-height:52px;
--sticky-mobile-icon-size:18px;
}


/* =========================
   WRAPPER
========================= */

.sticky-cta-icons{
    position:fixed;
    bottom:var(--sticky-cta-bottom);
    right:var(--sticky-cta-right);

    display:flex;
    flex-direction:row;
    gap:var(--sticky-cta-gap);

    z-index:var(--sticky-cta-z);
}


/* =========================
   BASE ICON
========================= */

.cta-icon{
    width:var(--sticky-icon-width);
    height:var(--sticky-icon-height);

    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:var(--sticky-icon-radius);

    color:var(--sticky-icon-color);
    font-size:var(--sticky-icon-size);

    background:var(--sticky-icon-bg);
    border:1px solid var(--sticky-icon-border);

    backdrop-filter:blur(var(--sticky-icon-blur));
    box-shadow:var(--sticky-icon-shadow);

    transition:.25s ease;

    position:relative;
    overflow:hidden;
}

/* hover */

.cta-icon:hover{
    transform:
        translateY(var(--sticky-icon-hover-y))
        scale(var(--sticky-icon-hover-scale));

    border-color:var(--sticky-icon-hover-border);
}


/* =========================
   VARIANTS
========================= */

.cta-icon.call{
    border-color:rgba(255,255,255,0.10);
}

.cta-icon.whatsapp{
    background:var(--sticky-whatsapp-bg);
    border:1px solid var(--sticky-whatsapp-border);
    color:var(--sticky-whatsapp-color);
}

.cta-icon.email,
.cta-icon.location{
    border:1px solid rgba(255,255,255,0.10);
}


/* =========================
   PULSE
========================= */

.cta-icon::after{
    content:"";
    position:absolute;

    width:100%;
    height:100%;

    border-radius:var(--sticky-pulse-radius);
    border:1px solid var(--sticky-pulse-border);

    animation:pulse var(--sticky-pulse-duration) infinite;
    opacity:0;
}

@keyframes pulse{
    0%{
        transform:scale(1);
        opacity:var(--sticky-pulse-start-opacity);
    }
    70%{
        transform:scale(var(--sticky-pulse-scale));
        opacity:0;
    }
    100%{
        opacity:0;
    }
}


/* =========================
   DEVICE SWITCH
========================= */

.mobile-only{
    display:flex;
}

.desktop-only{
    display:none;
}

@media (min-width:601px){
    .mobile-only{
        display:none;
    }

    .desktop-only{
        display:flex;
    }
}


/* =========================
   MOBILE ADJUSTMENTS
========================= */

@media(max-width:600px){

    .sticky-cta-icons{
        bottom:var(--sticky-mobile-bottom);
        right:var(--sticky-mobile-right);
    }

    .cta-icon{
        width:var(--sticky-mobile-width);
        height:var(--sticky-mobile-height);
        font-size:var(--sticky-mobile-icon-size);
    }
}