.elementor-7624 .elementor-element.elementor-element-aa4202f{--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-7624 .elementor-element.elementor-element-16252b8d .e-contact-buttons{--e-contact-buttons-contact-button-icon:#FFFFFF;--e-contact-buttons-contact-button-bg:#B4880A;--e-contact-buttons-contact-gap:2px;--e-contact-buttons-contact-padding-block-end:8px;--e-contact-buttons-contact-padding-block-start:08px;--e-contact-buttons-contact-padding-inline-end:8px;--e-contact-buttons-contact-padding-inline-start:8px;}.elementor-7624 .elementor-element.elementor-element-16252b8d .e-contact-buttons__contact-icon-link{font-family:"Poppins", Sans-serif;font-size:14px;font-weight:500;}/* Start custom CSS for contact-buttons-var-10, class: .elementor-element-16252b8d */:root {
    /* Variables */
    --light: 0;
    --index: 0;
    
    /* For Color Changes */
    --base-color: #404a3c;
    --light-increment: 5;
    
    /*Icons*/
    --reservation-icon: url("https://verdantvillas.com.ph/wp-content/uploads/2026/03/booknow_.svg");
    --tel-icon: url("https://verdantvillas.com.ph/wp-content/uploads/2026/02/phone-call.svg");
    --map-icon: url("https://verdantvillas.com.ph/wp-content/uploads/2026/01/map.svg");
    --whatapp-icon: url("https://verdantvillas.com.ph/wp-content/uploads/2026/02/chat-dots.svg");
    --mail-icon: url("https://verdantvillas.com.ph/wp-content/uploads/2026/02/envelope.svg");
    --viber-icon:url("https://verdantvillas.com.ph/wp-content/uploads/2026/03/basil-viber-outline.svg");
}

.e-contact-buttons__contact-links {
    a {
        --light: calc((var(--index, 0)) * var(--light-increment));
        background-color: oklch(
            from var(--base-color) calc(l + (var(--light) / 100)) c h
        ) !important;
        corner-shape: squircle;
        border-radius: 100px 0px 0px 100px !important;
        transition: background-color 0.3s ease;

        &:hover {
            background-color: oklch(
                from var(--base-color) calc(l + (var(--light) / 100)) c h
            ) !important;
        }

        .e-contact-buttons__contact-icon-container i {
            visibility: hidden;
            position: relative;
            display: inline-flex;
            width: 20px;
            height: 20px;
        }

        .e-contact-buttons__contact-icon-container i:before {
            content: "";
            visibility: visible;
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-size: contain;
            background-repeat: no-repeat;
            background-position: center;
            filter: brightness(0) invert(1);
        }

        &:nth-child(1) {
            --index: 0;
        }
        &:nth-child(2) {
            --index: 1;
        }
        &:nth-child(3) {
            --index: 2;
        }
        &:nth-child(4) {
            --index: 3;
        }
        &:nth-child(5) {
            --index: 4;
        }

        &[href*="reservation"] {
            i {
                visibility: visible;
                &:before {
                    background-image: var(--reservation-icon);
                }
            }
        }

        &[href^="tel:"] {
            i:before {
                background-image: var(--tel-icon);
            }
        }
        
         &[href^="viber:"] {
            i:before {
                background-image: var(--viber-icon);
            }
        }

        &[href*="maps.app.goo.gl"] {
            i:before {
                background-image: var(--map-icon);
            }
        }

        &[href^="https://wa.me/"] {
            i:before {
                background-image: var(--whatapp-icon);
            }
        }

        &[href^="mailto:"] {
            i:before {
                background-image: var(--mail-icon);
            }
        }
    }
}/* End custom CSS */