/* ============================================================= */
/* CONTACT US ICONS – FULLY CENTERED (covers #1 through #10+)   */
/* ============================================================= */

@import url('https://fonts.googleapis.com/css2?family=Averia+Libre:wght@400&display=swap');

/* Force full-width wrapper for every contact-us block (including the very last one) */
[id^="contact-us-icons-"].contact-us-icons,
#contact-us-icons-1, #contact-us-icons-2, #contact-us-icons-3,
#contact-us-icons-4, #contact-us-icons-5, #contact-us-icons-6,
#contact-us-icons-7, #contact-us-icons-8, #contact-us-icons-9,
#contact-us-icons-10 {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 2em !important;           /* nice spacing between icons */
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    padding: 1.5em 0 !important;
    text-align: center;
}

/* Individual icon images – all instances up to #10+ */
[id^="contact-us-icons-"] .contact-us-icon,
#contact-us-icons-1 .contact-us-icon,
#contact-us-icons-2 .contact-us-icon,
#contact-us-icons-3 .contact-us-icon,
#contact-us-icons-4 .contact-us-icon,
#contact-us-icons-5 .contact-us-icon,
#contact-us-icons-6 .contact-us-icon,
#contact-us-icons-7 .contact-us-icon,
#contact-us-icons-8 .contact-us-icon,
#contact-us-icons-9 .contact-us-icon,
#contact-us-icons-10 .contact-us-icon {
    width: 52px;
    height: 52px;
    object-fit: contain;
    transition: transform 0.3s ease;
    display: block;
}

[id^="contact-us-icons-"] .contact-us-icon:hover,
#contact-us-icons-1 .contact-us-icon:hover,
#contact-us-icons-2 .contact-us-icon:hover,
#contact-us-icons-3 .contact-us-icon:hover,
#contact-us-icons-4 .contact-us-icon:hover,
#contact-us-icons-5 .contact-us-icon:hover,
#contact-us-icons-6 .contact-us-icon:hover,
#contact-us-icons-7 .contact-us-icon:hover,
#contact-us-icons-8 .contact-us-icon:hover,
#contact-us-icons-9 .contact-us-icon:hover,
#contact-us-icons-10 .contact-us-icon:hover {
    transform: scale(1.15);
}

/* Tooltips – all instances up to #10+ */
[id^="contact-us-icon-link-"] .tooltip,
#contact-us-icon-link-email-1 .tooltip,
#contact-us-icon-link-chat-1 .tooltip,
#contact-us-icon-link-calendar-1 .tooltip,
#contact-us-icon-link-email-2 .tooltip,
#contact-us-icon-link-chat-2 .tooltip,
#contact-us-icon-link-calendar-2 .tooltip,
#contact-us-icon-link-email-3 .tooltip,
#contact-us-icon-link-chat-3 .tooltip,
#contact-us-icon-link-calendar-3 .tooltip,
#contact-us-icon-link-email-4 .tooltip,
#contact-us-icon-link-chat-4 .tooltip,
#contact-us-icon-link-calendar-4 .tooltip,
#contact-us-icon-link-email-5 .tooltip,
#contact-us-icon-link-chat-5 .tooltip,
#contact-us-icon-link-calendar-5 .tooltip,
#contact-us-icon-link-email-6 .tooltip,
#contact-us-icon-link-chat-6 .tooltip,
#contact-us-icon-link-calendar-6 .tooltip,
#contact-us-icon-link-email-7 .tooltip,
#contact-us-icon-link-chat-7 .tooltip,
#contact-us-icon-link-calendar-7 .tooltip,
#contact-us-icon-link-email-8 .tooltip,
#contact-us-icon-link-chat-8 .tooltip,
#contact-us-icon-link-calendar-8 .tooltip,
#contact-us-icon-link-email-9 .tooltip,
#contact-us-icon-link-chat-9 .tooltip,
#contact-us-icon-link-calendar-9 .tooltip,
#contact-us-icon-link-email-10 .tooltip,
#contact-us-icon-link-chat-10 .tooltip,
#contact-us-icon-link-calendar-10 .tooltip {
    visibility: hidden;
    opacity: 0;
    background-color: #A3C586;
    color: #FFFFFF;
    font-family: Verdana, sans-serif;
    font-size: 13px;
    font-weight: 600;
    text-align: center;
    padding: 8px 14px;
    border-radius: 6px;
    position: absolute;
    bottom: 130%;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    z-index: 999;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

[id^="contact-us-icon-link-"]:hover .tooltip,
#contact-us-icon-link-email-1:hover .tooltip,
#contact-us-icon-link-chat-1:hover .tooltip,
#contact-us-icon-link-calendar-1:hover .tooltip,
#contact-us-icon-link-email-2:hover .tooltip,
#contact-us-icon-link-chat-2:hover .tooltip,
#contact-us-icon-link-calendar-2:hover .tooltip,
#contact-us-icon-link-email-3:hover .tooltip,
#contact-us-icon-link-chat-3:hover .tooltip,
#contact-us-icon-link-calendar-3:hover .tooltip,
#contact-us-icon-link-email-4:hover .tooltip,
#contact-us-icon-link-chat-4:hover .tooltip,
#contact-us-icon-link-calendar-4:hover .tooltip,
#contact-us-icon-link-email-5:hover .tooltip,
#contact-us-icon-link-chat-5:hover .tooltip,
#contact-us-icon-link-calendar-5:hover .tooltip,
#contact-us-icon-link-email-6:hover .tooltip,
#contact-us-icon-link-chat-6:hover .tooltip,
#contact-us-icon-link-calendar-6:hover .tooltip,
#contact-us-icon-link-email-7:hover .tooltip,
#contact-us-icon-link-chat-7:hover .tooltip,
#contact-us-icon-link-calendar-7:hover .tooltip,
#contact-us-icon-link-email-8:hover .tooltip,
#contact-us-icon-link-chat-8:hover .tooltip,
#contact-us-icon-link-calendar-8:hover .tooltip,
#contact-us-icon-link-email-9:hover .tooltip,
#contact-us-icon-link-chat-9:hover .tooltip,
#contact-us-icon-link-calendar-9:hover .tooltip,
#contact-us-icon-link-email-10:hover .tooltip,
#contact-us-icon-link-chat-10:hover .tooltip,
#contact-us-icon-link-calendar-10:hover .tooltip {
    visibility: visible;
    opacity: 1;
}

/* Make sure the Elementor container that holds the very last icons doesn’t restrict width */
.elementor-element-806ba85,
.elementor-element[data-id="806ba85"] {
    width: 100% !important;
    max-width: 100% !important;
    text-align: center !important;
}

/* Responsive tweaks – smaller screens */
@media (max-width: 767px) {
    [id^="contact-us-icons-"].contact-us-icons {
        gap: 1.2em !important;
        padding: 1em 0 !important;
    }
    [id^="contact-us-icons-"] .contact-us-icon {
        width: 46px !important;
        height: 46px !important;
    }
    [id^="contact-us-icon-link-"] .tooltip {
        font-size: 11px !important;
        padding: 6px 10px !important;
    }
}

@media (max-width: 480px) {
    [id^="contact-us-icons-"].contact-us-icons {
        gap: 1em !important;
    }
    [id^="contact-us-icons-"] .contact-us-icon {
        width: 42px !important;
        height: 42px !important;
    }
}