/* Team member detail page styles (converted from the static team-member.php). */

/* ========================================= */
    /* HERO BANNER STYLES                        */
    /* ========================================= */
    .member-hero {
        background-color: #1a1c1e;
        /* Dark background matching the image */
        position: relative;
        padding: 150px 0;
        overflow: hidden;
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 400px;
    }

    /* Large Outline Watermark Text */
    .hero-watermark {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        font-size: 14vw;
        font-family: 'Arial', sans-serif;
        font-weight: 800;
        color: transparent;
        -webkit-text-stroke: 1.5px rgba(255, 255, 255, 0.06);
        white-space: nowrap;
        z-index: 1;
        user-select: none;
        letter-spacing: -2px;
    }

    /* Main Foreground Title */
    .hero-title {
        position: relative;
        z-index: 2;
        color: #DDB66C;
        /* Gold theme color */
        font-size: 3.5rem;
        font-weight: 600;
        text-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
    }

    /* Faint Circle Decoration (Left) */
    .deco-circle {
        position: absolute;
        left: 8%;
        bottom: 25%;
        width: 120px;
        height: 120px;
        border: 4px solid rgba(255, 255, 255, 0.04);
        border-radius: 50%;
        z-index: 1;
        pointer-events: none;
    }

    /* Faint Arrow Decoration (Right) */
    .deco-arrow {
        position: absolute;
        right: 5%;
        bottom: 10%;
        width: 150px;
        opacity: 0.1;
        z-index: 1;
        pointer-events: none;
    }

    /* ========================================= */
    /* DETAILS SECTION STYLES                    */
    /* ========================================= */
    .member-image {
        width: 100%;
        border-radius: 12px;
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
        object-fit: contain;
        background-color: #f8f9fa;
    }

    .highlight-box {
        background-color: #fff;
        border: 1px solid #edf1ef;
        border-radius: 12px;
        padding: 2rem;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04);
        border-left: 4px solid #DDB66C;
    }

    .specialization-tag {
        background-color: #f0fdf4;
        color: #045453;
        border: 1px solid #045453;
        border-radius: 50px;
        padding: 0.5rem 1.25rem;
        font-size: 0.9rem;
        font-weight: 500;
        display: inline-block;
        margin-right: 0.5rem;
        margin-bottom: 0.75rem;
    }

    .theme-text-primary {
        color: #045453;
    }

    .theme-text-gold {
        color: #DDB66C;
    }

    /* ========================================= */
    /* EXPERIENCE FLOATING BADGE                 */
    /* ========================================= */
    .experience-badge {
        position: absolute;
        bottom: 2.5rem;
        /* Distance from bottom */
        left: -1rem;
        /* Slight overlap on the left */
        background-color: #045453;
        /* Dark green matching your theme */
        color: #ffffff;
        padding: 1rem 1.25rem;
        border-radius: 8px;
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        line-height: 1;
        z-index: 2;
    }

    .experience-badge .exp-number {
        font-size: 3rem;
        font-weight: 800;
        margin-bottom: 0.25rem;
    }

    .experience-badge .exp-text {
        font-size: 0.75rem;
        font-weight: 600;
        letter-spacing: 1px;
        text-transform: uppercase;
    }