/* 1. Fix the Mobile Menu Hamburger Icon (Replace 2 bars with 3 bars) */
.elementor-menu-toggle i,
.elementor-menu-toggle svg,
.elementor-menu-toggle .e-font-icon-svg {
    display: none !important; /* Hide the existing 2-bar SVG */
}

/* Ensure the toggle container is visible and functioning */
.elementor-menu-toggle {
    display: flex !important;
    align-items: center;
    justify-content: center;
    background: transparent !important;
    border: none !important;
    width: 40px !important;
    height: 40px !important;
    padding: 0 !important;
    z-index: 9999;
}

/* Create the 3-bar hamburger icon */
.elementor-menu-toggle::before {
    content: "" !important;
    display: block !important;
    width: 24px !important;
    height: 2px !important;
    background-color: #ffffff !important;
    box-shadow: 0 -7px 0 #ffffff, 0 7px 0 #ffffff !important;
}

/* 2. Yantra SVG Fixes */
/* Ensure the wrapper doesn't clip the SVG strokes */
.sva-yantra-wrap {
    overflow: visible !important;
}

/* Ensure the SVG itself doesn't clip its bounding box */
.sva-yantra-svg-bg {
    overflow: visible !important;
    transition: transform 0.3s ease-out !important;
}

/* Target specific paths or polygons within the Yantra for hover, not the whole SVG */
.sva-yantra-svg-bg path,
.sva-yantra-svg-bg polygon,
.sva-yantra-svg-bg circle {
    transition: all 0.3s ease-out !important;
}

/* Only highlight the specific element being hovered, smooth transition, no jerky movement */
.sva-yantra-svg-bg path:hover,
.sva-yantra-svg-bg polygon:hover,
.sva-yantra-svg-bg circle:hover {
    fill: rgba(212, 175, 55, 0.4) !important; /* Gold highlight */
    stroke: #ffffff !important;
    transform: none !important;
}

/* Ensure the label text below the yantra is visible */
#sva-yantra-label {
    color: #ffffff !important;
    font-size: 1.1rem !important;
    margin-top: 15px !important;
    text-align: center !important;
    opacity: 1 !important;
    visibility: visible !important;
    min-height: 24px !important; 
}

/* 3. Birth Chart SVG Fixes */
.sva-chart-house {
    transition: fill 0.3s ease, opacity 0.3s ease !important;
    cursor: pointer !important;
}

.sva-chart-house:hover {
    fill: rgba(212, 175, 55, 0.3) !important; 
}

#sva-chart-info {
    display: block !important;
    color: #ffffff !important;
    text-align: center !important;
    margin-top: 15px !important;
    min-height: 20px !important;
}