/* Why Me D3.js Diagram Styles */
.why-me-d3-container {
    width: 100%;
    height: 600px;
    position: relative;
    background: linear-gradient(135deg, rgba(178, 78, 71, 0.05) 0%, rgba(124, 77, 255, 0.05) 100%);
    border-radius: 20px;
    overflow: hidden;
    margin: 2rem 0;
}

.why-me-d3-svg {
    width: 100%;
    height: 100%;
    display: block;
}



@keyframes profilePulse {

    0%,
    100% {
        opacity: 0.8;
        stroke-width: 3;
    }

    50% {
        opacity: 1;
        stroke-width: 4;
    }
}

.profile-image {
    border-radius: 50%;
    filter: drop-shadow(0 8px 32px rgba(124, 77, 255, 0.3));
}

.profile-label {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 16px;
    font-weight: 600;
    fill: white;
    text-anchor: middle;
    dominant-baseline: middle;
    filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.5));
}

/* Why Me Cards */
.why-me-card-bg {
    fill: rgba(255, 255, 255, 0.1);
    stroke: rgba(255, 255, 255, 0.2);
    stroke-width: 1;
    backdrop-filter: blur(10px);
    border-radius: 15px;
    filter: drop-shadow(0 8px 32px rgba(124, 77, 255, 0.15));
}

.why-me-icon-circle {
    fill: linear-gradient(135deg, #7C4DFF 0%, #B24E47 100%);
    stroke: rgba(255, 255, 255, 0.3);
    stroke-width: 2;
    filter: drop-shadow(0 4px 16px rgba(124, 77, 255, 0.3));
}

.why-me-icon-text {
    font-size: 24px;
    text-anchor: middle;
    dominant-baseline: middle;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

.why-me-card-title {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 14px;
    font-weight: 600;
    fill: white;
    text-anchor: middle;
    dominant-baseline: middle;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));
}

.why-me-card-desc {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 11px;
    font-weight: 400;
    fill: rgba(255, 255, 255, 0.9);
    text-anchor: middle;
    dominant-baseline: middle;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5));
}

/* Connection Lines */
.connection-line {
    fill: none;
    stroke: rgba(255, 255, 255, 0.4);
    stroke-width: 2;
    opacity: 0.6;
    filter: drop-shadow(0 0 8px rgba(124, 77, 255, 0.4));
}

/* Background Grid Pattern */
.grid-pattern {
    fill: none;
    stroke: rgba(255, 255, 255, 0.1);
    stroke-width: 1;
    opacity: 0.3;
}

/* Responsive Design */
@media (max-width: 768px) {
    .why-me-d3-container {
        height: 500px;
    }

    .why-me-card-title {
        font-size: 12px;
    }

    .why-me-card-desc {
        font-size: 10px;
    }

    .profile-label {
        font-size: 14px;
    }
}

@media (max-width: 480px) {
    .why-me-d3-container {
        height: 400px;
    }

    .why-me-card-title {
        font-size: 11px;
    }

    .why-me-card-desc {
        font-size: 9px;
    }

    .profile-label {
        font-size: 12px;
    }
}