.elementor-16309 .elementor-element.elementor-element-2a26f2f0{--display:flex;}.elementor-16309 .elementor-element.elementor-element-4f275a9a .e-contact-buttons{--e-contact-buttons-contact-button-icon:var( --e-global-color-primary );--e-contact-buttons-contact-button-icon-hover:#A14332;--e-contact-buttons-button-bar-bg:#DFDFDF52;--e-contact-buttons-button-bar-padding-block-end:10px;--e-contact-buttons-button-bar-padding-block-start:10px;--e-contact-buttons-button-bar-padding-inline-end:10px;--e-contact-buttons-button-bar-padding-inline-start:10px;}@media(max-width:767px){.elementor-16309 .elementor-element.elementor-element-4f275a9a .e-contact-buttons{--e-contact-buttons-button-bar-padding-block-end:10px;--e-contact-buttons-button-bar-padding-block-start:10px;--e-contact-buttons-button-bar-padding-inline-end:10px;--e-contact-buttons-button-bar-padding-inline-start:10px;}}/* Start custom CSS for contact-buttons-var-6, class: .elementor-element-4f275a9a *//* ================================================== BHUTRA MARBLE – COMPACT FLOATING CONTACT BUTTONS Elementor CSS Class: float ================================================== */ .float { --float-brand: #A14332; /* Compact dimensions */ --float-icon-size: 18px; --float-button-size: 44px; --float-active-width: 60px; width: max-content !important; max-width: calc(100vw - 20px) !important; padding: 6px !important; border: 1px solid rgba(255, 255, 255, 0.82) !important; border-radius: 100px !important; background: linear-gradient( 135deg, rgba(255, 255, 255, 0.88), rgba(255, 255, 255, 0.62) ) !important; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 8px 24px rgba(50, 36, 31, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.90); overflow: visible !important; transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease !important; } /* Remove Elementor default inner styling */ .float .e-contact-buttons, .float .e-contact-buttons__content, .float .e-contact-buttons__contact-links { background: transparent !important; border: none !important; box-shadow: none !important; } /* Horizontal icon layout */ .float .e-contact-buttons__contact-links { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: center !important; justify-content: center !important; gap: 3px !important; padding: 0 !important; margin: 0 !important; overflow: visible !important; } /* Remove Elementor item spacing */ .float .e-contact-buttons__contact-links > * { padding: 0 !important; margin: 0 !important; } /* Individual contact button */ .float .e-contact-buttons__contact-links > a, .float .e-contact-buttons__contact-links > * > a { position: relative !important; display: flex !important; align-items: center !important; justify-content: center !important; flex: 0 0 auto !important; width: var(--float-button-size) !important; min-width: var(--float-button-size) !important; height: var(--float-button-size) !important; padding: 0 !important; margin: 0 !important; color: var(--float-brand) !important; background: transparent !important; border: 1px solid transparent !important; border-radius: 15px !important; text-decoration: none !important; overflow: hidden !important; transform: translateY(0); transition: width 0.3s cubic-bezier(0.22, 1, 0.36, 1), min-width 0.3s cubic-bezier(0.22, 1, 0.36, 1), background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease !important; } /* Font Awesome icon size */ .float .e-contact-buttons__contact-links i { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 22px !important; height: 22px !important; color: var(--float-brand) !important; font-size: var(--float-icon-size) !important; line-height: 1 !important; transition: transform 0.25s ease !important; } /* SVG icon size */ .float .e-contact-buttons__contact-links svg { width: 19px !important; height: 19px !important; color: var(--float-brand) !important; fill: currentColor !important; transition: transform 0.25s ease !important; } /* Default selected WhatsApp button */ .float .e-contact-buttons__contact-links > a:first-child, .float .e-contact-buttons__contact-links > *:first-child > a { width: var(--float-active-width) !important; min-width: var(--float-active-width) !important; background: rgba(161, 67, 50, 0.08) !important; border-color: rgba(161, 67, 50, 0.05) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.80), 0 3px 10px rgba(161, 67, 50, 0.06) !important; } /* Reset WhatsApp when hovering toolbar */ .float .e-contact-buttons__contact-links:hover > a:first-child, .float .e-contact-buttons__contact-links:hover > *:first-child > a { width: var(--float-button-size) !important; min-width: var(--float-button-size) !important; background: transparent !important; border-color: transparent !important; box-shadow: none !important; } /* Expand hovered icon */ .float .e-contact-buttons__contact-links > a:hover, .float .e-contact-buttons__contact-links > * > a:hover { width: var(--float-active-width) !important; min-width: var(--float-active-width) !important; background: rgba(161, 67, 50, 0.08) !important; border-color: rgba(161, 67, 50, 0.06) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85), 0 4px 12px rgba(161, 67, 50, 0.08) !important; transform: translateY(-1px) !important; } /* Subtle icon hover animation */ .float .e-contact-buttons__contact-links > a:hover i, .float .e-contact-buttons__contact-links > * > a:hover i, .float .e-contact-buttons__contact-links > a:hover svg, .float .e-contact-buttons__contact-links > * > a:hover svg { transform: scale(1.05) !important; } /* Keyboard accessibility */ .float .e-contact-buttons__contact-links a:focus-visible { outline: 2px solid rgba(161, 67, 50, 0.40) !important; outline-offset: 2px !important; } /* Replace Waze icon with form/document icon */ .float .e-contact-buttons__contact-links i.fa-waze::before { content: "\f15c" !important; font-family: "Font Awesome 5 Free" !important; font-weight: 900 !important; } /* Email icon correction */ .float .e-contact-buttons__contact-links i.fa-envelope::before, .float .e-contact-buttons__contact-links i.fas.fa-envelope::before { content: "\f0e0" !important; font-family: "Font Awesome 5 Free" !important; font-weight: 900 !important; } /* Whole floating container hover */ .float:hover { border-color: rgba(255, 255, 255, 0.95) !important; background: linear-gradient( 135deg, rgba(255, 255, 255, 0.94), rgba(255, 255, 255, 0.72) ) !important; box-shadow: 0 10px 28px rgba(50, 36, 31, 0.12), inset 0 1px 0 rgba(255, 255, 255, 1) !important; } /* Mobile compact version */ @media (max-width: 767px) { .float { --float-icon-size: 17px; --float-button-size: 40px; --float-active-width: 55px; padding: 5px !important; } .float .e-contact-buttons__contact-links { gap: 2px !important; } .float .e-contact-buttons__contact-links > a, .float .e-contact-buttons__contact-links > * > a { border-radius: 14px !important; } .float .e-contact-buttons__contact-links i { width: 20px !important; height: 20px !important; } .float .e-contact-buttons__contact-links svg { width: 18px !important; height: 18px !important; } } /* Reduced motion accessibility */ @media (prefers-reduced-motion: reduce) { .float, .float *, .float *::before, .float *::after { transition: none !important; animation: none !important; } }/* End custom CSS */