.elementor-540 .elementor-element.elementor-element-f678b8b{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-540 .elementor-element.elementor-element-840051e{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-540 .elementor-element.elementor-element-9761fe8{width:100%;max-width:100%;}.elementor-540 .elementor-element.elementor-element-8982715{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-540 .elementor-element.elementor-element-c2c2bae{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-540 .elementor-element.elementor-element-62ffe27{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-540 .elementor-element.elementor-element-941473c{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-540 .elementor-element.elementor-element-3353370{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-540 .elementor-element.elementor-element-0ddad48{--display:flex;}.elementor-540 .elementor-element.elementor-element-c5051cf .elementor-icon-wrapper{text-align:center;}:root{--page-title-display:none;}/* Start custom CSS for icon, class: .elementor-element-c5051cf *//* =========================================================
   FLOATING WHATSAPP BUTTON - LEFT SIDE
========================================================= */

.whatsappicon {

    position: fixed !important;

    left: 25px;
    right: auto;
    bottom: 25px;

    width: 58px;
    height: 58px;

    z-index: 99999;

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

    border-radius: 50%;

    isolation: isolate;
}


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

.whatsappicon a,
.whatsappicon .elementor-icon {

    position: relative;

    z-index: 3;

    width: 58px !important;
    height: 58px !important;

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

    padding: 0 !important;

    border: none !important;
    border-radius: 50% !important;

    background: #25D366 !important;

    color: #ffffff !important;

    text-decoration: none !important;

    box-shadow:
        0 8px 25px rgba(0, 0, 0, 0.25),
        0 0 20px rgba(37, 211, 102, 0.20);

    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease,
        background 0.35s ease;
}


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

.whatsappicon i {

    color: #ffffff !important;

    font-size: 29px !important;
}


.whatsappicon svg {

    width: 29px !important;
    height: 29px !important;

    fill: #ffffff !important;

    color: #ffffff !important;
}


/* =========================================================
   WAVE 1
========================================================= */

.whatsappicon::before {

    content: "";

    position: absolute;

    z-index: 1;

    inset: 0;

    border-radius: 50%;

    border: 2px solid rgba(37, 211, 102, 0.55);

    pointer-events: none;

    animation:
        whatsappWave 2.1s ease-out infinite;
}


/* =========================================================
   WAVE 2
========================================================= */

.whatsappicon::after {

    content: "";

    position: absolute;

    z-index: 1;

    inset: 0;

    border-radius: 50%;

    border: 2px solid rgba(37, 211, 102, 0.35);

    pointer-events: none;

    animation:
        whatsappWave 2.1s ease-out 0.7s infinite;
}


/* =========================================================
   WAVE ANIMATION
========================================================= */

@keyframes whatsappWave {

    0% {

        transform: scale(1);

        opacity: 0.8;
    }


    70% {

        transform: scale(1.65);

        opacity: 0;
    }


    100% {

        transform: scale(1.65);

        opacity: 0;
    }

}


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

.whatsappicon:hover a,
.whatsappicon:hover .elementor-icon {

    background: #20BA5A !important;

    transform:
        translateY(-4px)
        scale(1.08);

    box-shadow:
        0 12px 30px rgba(0, 0, 0, 0.28),
        0 0 30px rgba(37, 211, 102, 0.35);
}


/* موجة أسرع وقت الـ Hover */

.whatsappicon:hover::before {

    animation-duration: 1.2s;
}


.whatsappicon:hover::after {

    animation-duration: 1.2s;
}


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

@media (max-width: 768px) {

    .whatsappicon {

        left: 17px;
        right: auto;
        bottom: 17px;

        width: 54px;
        height: 54px;
    }


    .whatsappicon a,
    .whatsappicon .elementor-icon {

        width: 54px !important;
        height: 54px !important;
    }


    .whatsappicon i {

        font-size: 27px !important;
    }


    .whatsappicon svg {

        width: 27px !important;
        height: 27px !important;
    }

}/* End custom CSS */