.elementor-1471 .elementor-element.elementor-element-61687a6a{--display:flex;}.elementor-1471 .elementor-element.elementor-element-a4a7a51 .e-contact-buttons{--e-contact-buttons-button-icon:#FFFFFF;--e-contact-buttons-button-bg:#000000;--e-contact-buttons-button-icon-hover:#FFFFFF;--e-contact-buttons-button-bg-hover:#B6B6B6;--e-contact-buttons-contact-button-icon:#FFFFFF;--e-contact-buttons-contact-button-bg:#000000;--e-contact-buttons-contact-button-icon-hover:#FFFFFF;--e-contact-buttons-contact-button-bg-hover:#F42355;--e-contact-buttons-horizontal-offset:40px;--e-contact-buttons-vertical-offset:30px;}@media(max-width:1024px){.elementor-1471 .elementor-element.elementor-element-a4a7a51 .e-contact-buttons{--e-contact-buttons-horizontal-offset:10px;--e-contact-buttons-vertical-offset:25px;}}/* Start custom CSS for contact-buttons-var-4, class: .elementor-element-a4a7a51 *//* 1. Reset the main button to a circle and allow the separate box to show outside of it */
.elementor-1471 .elementor-element.elementor-element-a4a7a51 .e-contact-buttons__chat-button {
    width: 60px !important; 
    height: 60px !important;
    border-radius: 50% !important; /* Makes the logo button perfectly round again */
    position: relative !important;
    overflow: visible !important; /* Crucial: stops Elementor from cutting off the separate text box */
}

/* 2. Create the detached text box */
.elementor-1471 .elementor-element.elementor-element-a4a7a51 .e-contact-buttons__chat-button::before {
    content: " تواصل معنا";
    position: absolute;
    right: 120%;
    top: 50%;
    transform: translateY(-50%); /* Centers the text box vertically with the logo */
    
    /* 3. Style the separate text box */
    background-color: #ffffff; /* Background color of the text box */
    color: #333333; /* Text color */
    padding: 10px 20px;
    border-radius: 8px; /* Slightly rounded corners for the box */
    box-shadow: 0px 4px 15px rgba(0,0,0,0.1); /* Adds a drop shadow so it floats */
    
    font-size: 16px;
    font-weight: 600;
    white-space: nowrap;
}
/* --- ARC MENU CSS (USING YOUR SELECTOR) --- */

/* 1. Target the correct wrapper to break the vertical layout */
.elementor-1471 .elementor-element.elementor-element-a4a7a51 .e-contact-buttons__contact-links {
    display: block !important; 
    position: relative !important;
}

/* 2. Anchor all the individual icons to the same starting point */
.elementor-1471 .elementor-element.elementor-element-a4a7a51 .e-contact-buttons__contact-links > * {
    position: absolute !important;
    bottom: 0 !important;
    right: 0 !important;
    margin: 0 !important;
}

/* 3. Position the 1st Icon: STRAIGHT UP */
.elementor-1471 .elementor-element.elementor-element-a4a7a51 .e-contact-buttons__contact-links > *:nth-child(1) {
    bottom: 0px !important; 
    right: 10px !important;
}

/* 4. Position the 2nd Icon: DIAGONAL (Up and Left) */
.elementor-1471 .elementor-element.elementor-element-a4a7a51 .e-contact-buttons__contact-links > *:nth-child(2) {
    top: 60px !important; 
    right: 70px !important;
}

/* 5. Position a 3rd Icon (if needed): STRAIGHT LEFT */
.elementor-1471 .elementor-element.elementor-element-a4a7a51 .e-contact-buttons__contact-links > *:nth-child(3) {
    top: 0px !important; 
    right: 70px !important;
}

/* --- ARC MENU ANIMATIONS --- */

/* 1. Create the "Spring Pop" animation */
@keyframes arcPopIn {
    0% { 
        transform: scale(0); 
        opacity: 0; 
    }
    70% { 
        transform: scale(1.15); /* Slightly overshoots the size for a bounce effect */
        opacity: 1; 
    }
    100% { 
        transform: scale(1); 
        opacity: 1; 
    }
}

/* 2. Apply the animation to the icons so it triggers when the menu opens */
.elementor-1471 .elementor-element.elementor-element-a4a7a51 .e-contact-buttons__contact-links > * {
    /* The base state before animation starts */
    opacity: 0; 
    animation: arcPopIn 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
    transition: transform 0.2s ease; /* Prepares the hover effect below */
}

/* 3. Stagger the timing so they pop in one after the other (1st, then 2nd) */
.elementor-1471 .elementor-element.elementor-element-a4a7a51 .e-contact-buttons__contact-links > *:nth-child(1) {
    animation-delay: 0.05s;
}

.elementor-1471 .elementor-element.elementor-element-a4a7a51 .e-contact-buttons__contact-links > *:nth-child(2) {
    animation-delay: 0.15s;
}

.elementor-1471 .elementor-element.elementor-element-a4a7a51 .e-contact-buttons__contact-links > *:nth-child(3) {
    animation-delay: 0.25s;
}

/* 4. Add a Hover Effect so they grow slightly when touched/hovered */
.elementor-1471 .elementor-element.elementor-element-a4a7a51 .e-contact-buttons__contact-links > *:hover {
    transform: scale(1.15) !important;
    cursor: pointer;
}/* End custom CSS */