/* Container & General Setup */
.fellow-single-container {
    /*font-family: Arial, sans-serif;*/ /* Adjust to match your theme */
    color: #333;
}
.fellow-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Header Section */
.fellow-header-section {
    background: #fff;
    padding-top: 20px;
    border-bottom: 1px solid #eaeaea;
}
.fellow-breadcrumbs {
    font-size: 13px;
    color: #275453;
    margin-bottom: 20px;
}
.fellow-breadcrumbs a {
    text-decoration: none;
    color:#275453;
    font-size: 14px;
}
.fellow-breadcrumbs a:hover{color:#e47b02;}

.fellow-profile-top {
    display: flex;
    align-items: center;
    padding-bottom: 0; /* Removed to allow overlap */
    margin-top: 40px;
}
.fellow-image-wrapper {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0; /* Prevents the image from being squished */
    margin-bottom: -30px; /* The magic number: pulls the grey section up to overlap exactly halfway */
    position: relative;
    z-index: 10;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    background-color: #fff;
}

.fellow-image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.fellow-title-area {
    margin-left: 40px; /* Fixes the massive gap */
    flex-grow: 1;
    transform: translateY(-25px); /* Pulls text up slightly to center perfectly with the top half of the image */
}
.fellow-title-area h1 {
    font-size: 32px;
    font-weight: bold;
    margin: 0 0 -50px 0;
}
.fellow-company {
    color: #e47b02;
    font-size: 16px;
    font-weight: bold;
    text-transform: uppercase;
    margin: 0;
}
.fellow-action-area {
    transform: translateY(-25px); /* Keeps the button aligned with the title */
}
.btn-encouragement {
    background-color: #e47b02;
    color: #fff;
    padding: 12px 24px;
    border-radius: 30px;
    text-decoration: none;
    font-weight: bold;
    transition: 0.3s;
}
.btn-encouragement:hover {
    background-color: #a83240;
}

/* Meta Section (Grey Area) */
.fellow-meta-section {
    background-color: #f7f7f7;
    padding: 40px 0;
    min-height: 120px; /* Accounts for overlapping image */
}
.fellow-meta-grid {
    display: flex;
    justify-content: space-between;
    align-items: center;
    /*margin-left: 230px;*/ /* Match offset of the image */
    width: calc(100% - 230px);
}
.meta-stats {
    display: flex;
    gap: 40px;
}
.stat-item {
    text-align: center;
}
.stat-icon {
    display: block;
    font-size: 24px;
    margin-bottom: 8px;
    color: #555;
}
.stat-label {
    font-size: 12px;
    font-weight: bold;
    color: #333;
}
.stat-value {
    font-size: 12px;
    font-weight: bold;
    color: #e47b02;
    /* text-transform: uppercase; */
}
.stat-value a{text-decoration: none!important;}
.share-story-card {
    background: #fff;
    padding: 15px 25px;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    text-align: center;
}
.share-story-card h4 {
    margin: 0 0 10px 0;
    font-size: 14px;
}
.social-icons {
    display: flex;
    gap: 10px;
}
.social-btn {
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    text-decoration: none;
    border-radius: 3px;
    font-weight: bold;
}
.social-btn.fb { background: #3b5998; }
.social-btn.x { background: #000; }
.social-btn.pin { background: #bd081c; }
.social-btn.wa { background: #25d366; }

/* Main Content Area */
.fellow-content-section {
    padding: 50px 0;
    background: #fff;
}
.fellow-layout-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 60px;
}
.fellow-main-content h2 {
    font-size: 22px;
    margin-bottom: 20px;
}
.fellow-main-content p {
    line-height: 1.8;
    color: #444;
    margin-bottom: 30px;
}

/* Sidebar Styles */
.year-heading {
    color: #e47b02;
    font-size: 24px;
    border-bottom: 1px solid #eaeaea;
    padding-bottom: 10px;
    margin-bottom: 20px;
}
/* Sidebar Main Title */
.sidebar-main-title {
    font-size: 22px;
    margin-top: 0;
    margin-bottom: 30px;
    color: #333;
    text-transform: none;
}
.sidebar-fellows-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 25px 20px; /* More space between rows */
}
.sidebar-fellow-card {
    font-size: 14px;
}
.sidebar-img-wrap {
    position: relative;
    margin-bottom: 12px;
    display: flex; /* Removes bottom space under the image */
}
/* Sidebar Link Styling */
.sidebar-img-wrap a {
    display: block;
    width: 100%;
    height: 100%;
}
.sidebar-img-wrap img {
    width: 100%;
    height: 160px; /* Slightly taller to match screenshot aspect ratio */
    object-fit: cover;
    border-radius: 2px;
}
/* The Country Badge */
.country-badge {
    position: absolute;
    bottom: 0;
    left: 0;
    background: #fff;
    color: #333;
    padding: 4px 8px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    line-height: 1;
}
/* Sidebar Typography */
.sidebar-fellow-card h4 {
    margin: 0 0 6px 0;
    font-size: 13px;
    text-transform: uppercase; /* Forces the name to be uppercase like "ZINZIA ADHIAMBO" */
    color: #444;
    letter-spacing: 0.5px;
}
.sidebar-fellow-card h4 a {
    color: #444;
    text-decoration: none;
    transition: color 0.3s ease;
    text-transform: none;
}

/* Adds a nice red hover effect to the clickable name */
.sidebar-fellow-card h4 a:hover {
    color: #e47b02; 
}
.sidebar-fellow-card p {
    margin: 0;
    color: #666;
    line-height: 1.4;
    font-size: 12px;
}

/* Responsive Design */
@media (max-width: 992px) {
    .fellow-layout-grid {
        grid-template-columns: 1fr;
    }
    .fellow-meta-grid {
        flex-direction: column;
        align-items: flex-start;
        gap: 30px;
    }
}
@media (max-width: 768px) {
    .fellow-image-wrapper {
        position: relative;
        width: 120px;
        height: 120px;
        margin: 0 auto 40px auto;
    }
    
    .fellow-profile-top {
        flex-direction: column;
        text-align: center;
        margin-top: 20px;
    }
    .fellow-title-area, .fellow-meta-grid {
        margin-left: 0;
        width: 100%;
        margin-bottom: 30px;
    }
    .fellow-action-area {
        margin-top: 20px;
    }
    .meta-stats {
        flex-wrap: wrap;
        justify-content: center;
    }
}
/* Hide mobile share by default (Desktop View) */
.share-mobile-wrapper {
    display: none;
}

/* Hide desktop share and show mobile share on smaller screens */
@media (max-width: 768px) {
    .share-desktop-wrapper {
        display: none;
    }
    
    .share-mobile-wrapper {
        display: block;
        margin-top: 2rem; /* Adds some spacing above the buttons */
    }
    /* Center the text/heading inside the mobile share card */
    .share-mobile-wrapper .share-story-card {
        text-align: center; 
    }
    
    /* Force the social icons wrapper to center its contents */
    .share-mobile-wrapper .social-icons {
        display: flex;
        justify-content: center; /* This centers the icons horizontally */
        align-items: center;
        flex-wrap: wrap; 
        gap: 10px; /* Adjust this value if you need more/less space between icons */
    }
}


.fellow-share-circle { 
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;          /* Size of the circle */
    height: 34px;         /* Size of the circle */
    border-radius: 50%;   /* Makes it perfectly round */
    color: #ffffff !important; /* Forces the SVGs to be white */
    text-decoration: none !important;
    transition: opacity 0.2s ease, transform 0.2s ease; 
}
.fellow-share-circle:hover { 
    opacity: 0.8;         /* Slight fade on hover */
    transform: translateY(-2px); 
}
/* Specific Brand Colors for the backgrounds */
.fb-circle { background-color: #3b5998 !important; }
.x-circle  { background-color: #000000 !important; }
.in-circle { background-color: #007bb5 !important; }
.wa-circle { background-color: #25d366 !important; }

/* SVG Icon Styling */
.stat-icon svg {
    width: 28px;
    height: 28px;
    color: #275453; /* Dark almost-black color matching your screenshot */
    margin-bottom: 5px;
}