/* Hero Section - Fix for Magic Cursor Interaction */
/* Ensure hero section content is above the ripple canvas and can receive mouse events */

/* Make sure the hero section has proper positioning */
.hero-section-1 {
    position: relative !important;
}

/* Container needs to be above canvas */
.hero-section-1 .container-fluid {
    position: relative !important;
    z-index: 10 !important;
}

/* All content elements need high z-index and pointer events enabled */
.hero-section-1 .hero-content {
    position: relative !important;
    z-index: 10 !important;
}

.hero-section-1 .hero-wrapper {
    position: relative !important;
    z-index: 10 !important;
}

.hero-section-1 .banner-title-section {
    position: relative !important;
    z-index: 10 !important;
}

/* Titles must be able to receive mouse events */
.hero-section-1 .banner-title,
.hero-section-1 h1,
.hero-section-1 h2,
.hero-section-1 h3,
.hero-section-1 h4,
.hero-section-1 h5,
.hero-section-1 h6 {
    position: relative !important;
    z-index: 15 !important;
    pointer-events: auto !important;
    cursor: pointer !important;
}

/* Force the ripple canvas to stay behind and not block mouse events */
.hero-section-1 canvas,
.hero-section-1.jquery-ripples canvas {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 0 !important;
    pointer-events: none !important;
}

/* The jquery-ripples wrapper should not block events */
.hero-section-1.jquery-ripples {
    pointer-events: none !important;
}

/* But all children should receive events */
.hero-section-1.jquery-ripples>*:not(canvas) {
    pointer-events: auto !important;
}

/* Ensure all interactive elements work */
.hero-section-1 a,
.hero-section-1 button,
.hero-section-1 .theme-btn {
    position: relative !important;
    z-index: 20 !important;
    pointer-events: auto !important;
}