.elementor-91769 .elementor-element.elementor-element-f6e9507{--display:flex;}/* Start custom CSS */<!-- ===== Add this CSS (Site Settings → Custom CSS, or page CSS) ===== -->
<style>
/* Icon Box → Advanced → CSS Classes: pressable-box */

/* Base card look */
.pressable-box .elementor-widget-container{
  position: relative;
  border-radius: 16px;
  background: rgba(255,255,255,.78);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(3,8,28,.08);
  box-shadow: 0 2px 8px rgba(16,24,40,.06);
  padding: 24px;
  transition: transform .18s ease, box-shadow .18s ease,
              border-color .18s ease, background .18s ease;
  cursor: pointer;  /* looks clickable */
}

/* Keep all text visible (DO NOT stretch inner links) */
/* (intentionally no rules that position .pressable-box a absolutely) */

/* Hover + active feedback */
.pressable-box:hover .elementor-widget-container{
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(16,24,40,.14);
  border-color: rgba(4,107,210,.25);
  background: rgba(255,255,255,.9);
}
.pressable-box:active .elementor-widget-container{
  transform: translateY(0);
}

/* Title color shift on hover */
.pressable-box:hover .elementor-icon-box-title,
.pressable-box:hover .elementor-icon-box-title a{
  color:#046BD2;
}

/* Keyboard focus ring (for the widget when it contains focus) */
.pressable-box:focus-within .elementor-widget-container{
  outline: 3px solid #B8EE44;   /* brand lime */
  outline-offset: 3px;
}

/* Optional: chevron hint in the corner */
.pressable-box .elementor-widget-container::after{
  content:"›";
  position:absolute; right:16px; bottom:14px;
  font-size:22px; line-height:1;
  color:#046BD2;
  opacity:0; transform:translateX(-6px);
  transition:transform .18s ease, opacity .18s ease;
}
.pressable-box:hover .elementor-widget-container::after{
  opacity:1; transform:translateX(0);
}

/* Responsive spacing (optional) */
@media (max-width: 1024px){
  .pressable-box .elementor-widget-container{ padding:20px; }
}
</style>

<!-- ===== Add this JS once (Site Settings → Custom Code → Body end) ===== -->
<script>
/* Make the whole Icon Box behave like a link without hiding the title */
(function () {
  function getLink(el){
    return el.querySelector('.elementor-icon-box-title a') ||
           el.querySelector('a.elementor-icon-box-title') ||
           el.querySelector('.elementor-icon-box-wrapper a') ||
           el.querySelector('a');
  }

  // Click anywhere on the box -> follow its main link
  document.addEventListener('click', function(e){
    const box = e.target.closest('.pressable-box');
    if(!box) return;

    // If the user clicked an actual link or button inside, let it work normally
    if (e.target.closest('a, button, [role="button"]')) return;

    const link = getLink(box);
    if(link && link.href){
      // Open in same tab unless link specifies otherwise
      window.location.assign(link.href);
    }
  });

  // Keyboard: Enter on focused box triggers navigation
  document.addEventListener('keydown', function(e){
    if(e.key !== 'Enter') return;
    const box = e.target.closest('.pressable-box');
    if(!box) return;
    const link = getLink(box);
    if(link && link.href){
      window.location.assign(link.href);
    }
  });
})();
</script>/* End custom CSS */