/* ==========================================================
   FIXED CTA THEME 1
========================================================== */

:root {

    /* ==========================================
       BACKGROUND
    ========================================== */

    --ebctaf1-theme1-call-background: #06266B;

    --ebctaf1-theme1-whatsapp-background: #2A9658;

    --ebctaf1-theme1-container-background: #FFFAF3;


    /* ==========================================
       TEXT
    ========================================== */

    --ebctaf1-theme1-call-text: #FFFAF3;

    --ebctaf1-theme1-whatsapp-text: #ffffff;


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

    --ebctaf1-theme1-call-icon-background: #06266B;

    --ebctaf1-theme1-call-icon-color: #FFFAF3;

    --ebctaf1-theme1-whatsapp-icon-background: #2A9658;

    --ebctaf1-theme1-whatsapp-icon-color: #fff;


    /* ==========================================
       DECORATION
    ========================================== */

    --ebctaf1-theme1-accent: #06266B;

    --ebctaf1-theme1-overlay: rgba(37, 99, 235, .08);

}






/* ==========================================================
   CONTAINER
========================================================== */

.ebctaf1-contact-buttons {

    display: flex;

    justify-content: center;

    flex-wrap: wrap;
    gap: 0.8rem;

}

/* ==========================================================
   BUTTON
========================================================== */

.ebctaf1-btn {

    position: relative;

    display: flex;

    align-items: center;

    text-decoration: none;

    gap: 0.4rem;

    overflow: hidden;

    direction: ltr;

    font-size: clamp(.95rem, 2vw, 1.1rem);

    font-weight: 700;

    padding: 0.8rem;

    transition: all .35s cubic-bezier(.4, 0, .2, 1);

}





.ebctaf1-btn::before {

    content: "";

    position: absolute;

    inset: 0;

    background: linear-gradient(135deg,

            transparent,

            rgba(255, 255, 255, .08),

            transparent);

    transform: translateX(-180%);

}





.ebctaf1-btn:hover::before {

    animation: ebctaf1-theme1-light 1s linear;

}





@keyframes ebctaf1-theme1-light {

    to {

        transform: translateX(220%);

    }

}






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

.ebctaf1-btn-icon {

    display: flex;

    align-items: center;

    justify-content: center;

    aspect-ratio: 1;

    font-size: 1.15rem;

    flex-shrink: 0;


}

/* ==========================================================
   CALL BUTTON
========================================================== */

.ebctaf1-call {

    background: var(--ebctaf1-theme1-call-background);

    color: var(--ebctaf1-theme1-call-text);

}




.ebctaf1-call::after {

    content: "";

    position: absolute;

    top: 0;

    right: 0;

    bottom: 0;

    width: 5px;

    background: var(--ebctaf1-theme1-accent);

}





/* ==========================================================
   WHATSAPP BUTTON
========================================================== */

.ebctaf1-whatsapp {

    background: var(--ebctaf1-theme1-whatsapp-background);

    color: var(--ebctaf1-theme1-whatsapp-text);

}





.ebctaf1-whatsapp::after {

    content: "";

    position: absolute;

    top: 0;

    right: 0;

    bottom: 0;

    width: 5px;

    background: rgba(255, 255, 255, .22);

}





/* ==========================================================
   ICON STYLE
========================================================== */

.ebctaf1-call .ebctaf1-btn-icon {

    background: var(--ebctaf1-theme1-call-icon-background);

    color: var(--ebctaf1-theme1-call-icon-color);

}

.ebctaf1-whatsapp .ebctaf1-btn-icon {

    background: var(--ebctaf1-theme1-whatsapp-icon-background);

    color: var(--ebctaf1-theme1-whatsapp-icon-color);

}


.ebctaf1-btn-icon i {

    font-size: 1.2rem;

}





/* ==========================================================
   HOVER
========================================================== */

.ebctaf1-btn:hover {

    transform: translateY(-4px);

}

.ebctaf1-whatsapp:hover {
    filter: brightness(1.08);
}

.ebctaf1-btn:active {

    transform: translateY(-1px);

}





/* ==========================================================
   RESPONSIVE
========================================================== */





@media (max-width:480px) {

    .ebctaf1-btn {

        justify-content: center;

    }

}