* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* === EDITED (FONT) === */
body {
    font-family: sans-serif;
    /* Wikipedia-style font */
    background-color: #f5f3ed;
    color: #333;
}

header {
    background-color: #fff;
    /* === MODIFIED: CONTROL DESKTOP HEIGHT HERE === */
    height: 65px;
    /* Adjust this value for Desktop Height */
    padding: 0 2rem;
    /* Only horizontal padding */
    display: flex;
    align-items: center;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    position: sticky;
    top: 0;
    z-index: 100;
}

.header-container {
    width: 100%;
    /* Ensure it fills the flex parent */
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    /* === MODIFIED: justify-content removed for auto margin === */
    align-items: center;
}

/* === NEW: Rules to push nav right and logo left === */
#logo-link {
    margin-right: auto;
}

.logo-section {
    display: flex;
    align-items: center;
    gap: 1rem;
    /* === NEW: Ensure logo stays on top on mobile === */
    position: relative;
    z-index: 102;
}

/* === MODIFIED FOR "52" & ROUNDED SHAPE === */
.logo {
    width: 40px;
    /* Unchanged */
    height: 40px;
    /* Unchanged */
    background-color: #1e3a5f;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    /* Reduced from 1.5rem to fit "52" */
    line-height: 1;
    /* Added to help centering */
    font-weight: bold;
    border-radius: 50%;
    /* Changed from 8px to make it a circle */
}

/* === MODIFIED: Explicit Desktop Logo Size === */
.logo {
    width: 35px;
    /* DESKTOP SIZE */
    height: 35px;
    /* DESKTOP SIZE */
    font-size: 1.2rem;
    /* DESKTOP FONT SIZE */
}

/* === END MODIFICATION === */


.site-title {
    font-size: 1.5rem;
    font-weight: 600;
    color: #1e3a5f;
}

/* === NEW (PER REQUEST) - Style for .com === */
.site-title-domain {
    font-size: 0.75rem;
    /* Half of 1.5rem */


}

/* === REMOVED: .header-right spacer is no longer needed === */

/* === NEW: COMPACT & CREATIVE NAVBAR === */
nav {
    display: flex;
    gap: 0.3rem;
    align-items: center;
}

nav a {
    text-decoration: none;
    color: #000;
    /* CHANGED: Black color */
    font-size: 1rem;
    /* Slightly increased font size */
    font-weight: 400;
    /* CHANGED: Unbolded (Normal weight) */
    padding: 0.4rem 0.8rem;
    /* Compact padding */
    border-radius: 50px;
    /* Modern Pill Shape */
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    /* Smooth springy transition */
    letter-spacing: 0.3px;
}

nav a:hover {
    background-color: rgba(30, 58, 95, 0.08);
    /* Subtle hover tint */
    color: #1e3a5f;
    transform: none;
    /* CHANGED: Removed lift effect */
}

/* Active State: High Contrast Brand Pill */
/* Active State: High Contrast Brand Pill */
nav a.active {
    background-color: #1e3a5f;
    color: white;
    font-weight: 600;
    /* CHANGED: Removed box-shadow */
}

nav a.active:hover {
    background-color: #162c4b;
    /* Darker on hover */
    color: white;
    transform: none;
}

/* === NEW: HAMBURGER MENU STYLES === */
.hamburger-menu {
    display: none;
    /* Hidden by default */
    flex-direction: column;
    justify-content: space-around;
    width: 2.25rem;
    height: 2.25rem;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    z-index: 102;
    /* Above the mobile nav */
}

.bar {
    width: 2.25rem;
    height: 0.25rem;
    background-color: #1e3a5f;
    border-radius: 2px;
    transition: all 0.3s ease-in-out;
}

/* Hamburger animation to 'X' */
.hamburger-menu.active .bar-1 {
    transform: rotate(45deg) translate(0.5rem, 0.5rem);
}

.hamburger-menu.active .bar-2 {
    opacity: 0;
}

.hamburger-menu.active .bar-3 {
    transform: rotate(-45deg) translate(0.5rem, -0.5rem);
}

/* === END NEW === */


.contact-info {
    display: flex;
    align-items: center;
    gap: 1rem;
    font-size: 0.9rem;
    color: #666;
}

.main-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 1.6rem 2rem 1.6rem 2rem;
    /* MODIFIED: Equalized top and bottom gap (1.6rem) */
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 3rem;
    transition: grid-template-columns 0.3s ease;
}

/* === NEW: Rules to hide sidebar and expand content === */
.main-container.sidebar-hidden {
    grid-template-columns: 1fr;
    /* Content takes full width */
}

.main-container.sidebar-hidden .sidebar {
    display: none;
    /* Sidebar is vanished */
}

/* === END NEW === */

.content {
    min-width: 0;
    /* Prevent grid blowout */
}

.table-container {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.sidebar {
    background-color: white;
    padding: 2rem;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    height: fit-content;
    position: sticky;
    top: calc(65px + 1.6rem);
    /* MODIFIED: Exact match for Header (65px) + Content Gap (1.6rem) */
    transition: opacity 0.3s ease, transform 0.3s ease;
    z-index: 50;
    /* === NEW: Set z-index below header (100) but above content === */
}

/* === EDITED (SIDEBAR H2) === */
.sidebar h2 {
    font-size: 1.3rem;
    margin-bottom: 0.5rem;
    color: #1e3a5f;
}

/* === EDITED (SIDEBAR SUBTITLE) === */
.sidebar-subtitle {
    font-size: 14px;
    color: #999;
    margin-bottom: 1.5rem;
}

.toc {
    list-style: none;
    display: none;
    /* Hide all TOCs by default */
}

.toc.active {
    display: block;
    /* Show only the active one */
}

.toc li {
    padding: 0.7rem 1rem;
    margin-bottom: 0.5rem;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 0.3s;
    display: flex;
    align-items: center;
    gap: 0.8rem;
}

.toc li:hover {
    background-color: #f0f0f0;
}

.toc-number {
    background-color: #e8eef5;
    color: #1e3a5f;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    font-size: 0.85rem;
    font-weight: 600;
}

.toc-text {
    font-size: 0.95rem;
    color: #333;
}

/* === NEW: Override for Legacy, Figures and Genetics page to allow grey background on the body area === */
#zamindari-page,
#genetics-page,
#figures-page,
#mools-page,
#majmuat-page,
#home-page {
    /* === ADDED === */
    background-color: transparent;
    overflow: visible;
    box-shadow: none;
}

/* Restore standard pages with white background */
/* === MODIFICATION: Removed #origin-page === */
#about-page {
    background-color: white;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* === NEW: Apply grey bg to origin page, similar to legacy/genetics === */
#origin-page,
#mools-page,
#majmuat-page,
#surname-page {
    background-color: transparent;
    overflow: visible;
    box-shadow: none;
}


.page-content.active {
    display: block;
}

.banner-bg-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}

/* Overlay for all banners */
.banner::before,
.banner-politician-internal::before,
.banner-billionaire-internal::before,
.banner-sports-internal::before,
.banner-media-internal::before,
.banner-artists-internal::before,
.banner-legacy-wars-internal::before,
.banner-legacy-ranvir-sena-internal::before,
.banner-legacy-majmuat-internal::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.45));
    z-index: 1;
    pointer-events: none;
}

/* Ensure content is on top */
.banner h1,
.banner .banner-subtitle,
.banner .banner-label,
.banner-politician-internal h2,
.banner-politician-internal p,
.banner-billionaire-internal h2,
.banner-billionaire-internal p,
.banner-sports-internal h2,
.banner-sports-internal p,
.banner-media-internal h2,
.banner-media-internal p,
.banner-artists-internal h2,
.banner-artists-internal p,
.banner-legacy-kings-internal h2,
.banner-legacy-kings-internal p,
.banner-legacy-wars-internal h2,
.banner-legacy-wars-internal p,
.banner-legacy-ranvir-sena-internal h2,
.banner-legacy-ranvir-sena-internal p,
.banner-legacy-majmuat-internal h2,
.banner-legacy-majmuat-internal p {
    position: relative;
    z-index: 2;
    color: #fff;
    /* Ensure text is white */
}

/* === MODIFIED: Shared Banner Layout === */
.banner,
.banner-politician-internal,
.banner-billionaire-internal,
.banner-sports-internal,
.banner-media-internal,
.banner-artists-internal,
.banner-legacy-ranvir-sena-internal,
.banner-legacy-majmuat-internal {
    padding: 4rem 3rem 2rem 3rem;
    position: relative;
    min-height: 400px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    overflow: hidden;
}

/* === MODIFIED PER REQUEST === */


/* === NEW (ORIGIN BANNER IMAGE) - MODIFIED === */
#origin-page .banner,
#surname-page .banner,
#home-page .banner {
    /* Background image removed */
    /* === NEW: Add radius and fix adjoining corners === */
    border-radius: 12px;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

/* === NEW (GENETICS BANNER IMAGE) - MODIFIED === */
#genetics-page .banner {
    /* Background image removed */
    /* === NEW: Add radius and fix adjoining corners === */
    border-radius: 12px;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

/* === NEW (CLANS BANNER IMAGE) === */
#mools-page .banner {
    border-radius: 12px;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

/* === NEW (MISCELLANEOUS BANNER IMAGE) === */
#majmuat-page .banner,
#majmuat-page .banner-legacy-majmuat-internal,
#majmuat-page .banner-legacy-ranvir-sena-internal {
    border-radius: 12px;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

/* === MODIFIED PER REQUEST === */
#zamindari-page .banner {
    /* Background image removed */
    /* === NEW: Add radius and margin since parent no longer clips === */
    border-radius: 12px;
    /* === MODIFICATION: Removed margin-bottom to adjoin content === */
    /* margin-bottom: 3rem; */
    /* === NEW: Fix adjoining corners === */
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

/* === NEW (FIGURES BANNER IMAGE) === */
#figures-page .banner,
#characteristic-page .banner {
    /* Background image removed */
    /* === NEW: Add radius and margin since parent no longer clips === */
    border-radius: 12px;
    /* === NEW: Fix adjoining corners === */
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

/* === END NEW === */

/* === NEW (ABOUT BANNER IMAGE) - MODIFIED === */


/* === REMOVED: .banner-billionaire rule === */
/* This is now handled by .banner-billionaire-internal */


.banner-label {
    font-size: 0.9rem;
    color: #333;
    margin-bottom: 1rem;
}

/* === MODIFIED: Unified Banner Heading Styles === */
.banner h1,
.banner-politician-internal h2,
.banner-billionaire-internal h2,
.banner-sports-internal h2,
.banner-media-internal h2,
.banner-artists-internal h2,
.banner-legacy-kings-internal h2,
.banner-legacy-wars-internal h2,
.banner-legacy-ranvir-sena-internal h2,
.banner-legacy-majmuat-internal h2 {
    font-size: 3.5rem;
    color: #fff;
    /* Unified to white for all banners */
    margin-bottom: 1rem;
    font-weight: 700;
}

/* === MODIFIED: Unified Banner Subtitle Styles === */
.banner .banner-subtitle,
.banner-politician-internal p,
.banner-billionaire-internal p,
.banner-sports-internal p,
.banner-media-internal p,
.banner-artists-internal p,
.banner-legacy-kings-internal p,
.banner-legacy-wars-internal p,
.banner-legacy-ranvir-sena-internal p,
.banner-legacy-majmuat-internal p {
    font-size: 1.2rem;
    color: #fff;
    /* Unified to white for all banners */
    font-style: italic;
    max-width: 600px;
    margin-bottom: 0;
    /* === NEW: Remove bottom margin to match origin === */
    line-height: normal;
    /* === NEW: Fix line spacing === */
}

/* === NEW: Content Wrapper Styles for internal banners === */
.politician-content-wrapper,
.billionaire-content-wrapper,
.sports-content-wrapper,
.media-content-wrapper,
.artists-content-wrapper,
.ranvir-sena-content-wrapper,
.majmuat-content-wrapper {
    padding: 3rem;
    background-color: #fff;
}

/* === REMOVED: Redundant ID-specific color overrides are no longer strictly needed if the above rules apply, 
   but keeping them or simplifying is fine. Since above rules enforce white, we can leave or clean up. 
   For SAFETY, I will rely on the specific classes above. 
   The following blocks were setting colors for specific pages, they can remain or be simplified.
   I will remove the chunks that only corrected color, as the main rule now does it.
*/


/* === NEW (BANNER TEXT COLOR FOR NEW IMAGES) === */
#home-page .banner .banner-label,
#genetics-page .banner .banner-label,
#zamindari-page .banner .banner-label,
#figures-page .banner .banner-label,
/* === ADDED === */
#about-page .banner .banner-label {
    color: #fff;
}

#home-page .banner h1,
#genetics-page .banner h1,
#zamindari-page .banner h1,
#figures-page .banner h1,
/* === ADDED === */
#about-page .banner h1 {
    color: #fff;
}

#home-page .banner .banner-subtitle,
#genetics-page .banner .banner-subtitle,
#zamindari-page .banner .banner-subtitle,
#figures-page .banner .banner-subtitle,
/* === ADDED === */
#about-page .banner .banner-subtitle {
    color: #fff;
}


.article-content {
    /* === REVERTED: Back to a single white content block === */
    padding: 3rem;
    background-color: #fff;
}

/* === NEW: Remove margin from last child to fix footer gap === */
.article-content> :last-child,
.article-content section:last-child> :last-child {
    margin-bottom: 0;
}

/* === NEW: Style for origin page article to be a card === */
#origin-page .article-content,
#surname-page .article-content,
#genetics-page .article-content,
#characteristic-page .article-content,
#home-page .article-content {
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    margin-bottom: 3rem;
    /* Space before the new cards */
    /* === NEW: Fix adjoin to banner === */
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

/* === NEW: Surname Page Headings === */
#surname-page h3 {
    color: #1e3a5f;
    margin-bottom: 0.5rem;
    margin-top: 1.5rem;
}

/* === NEW: Style for clans page article to be a card === */
/* === NEW: Style for clans page article to be a card === */
/* === NEW: Style for clans page article to be a card === */
#mools-page .content-card {
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    margin-bottom: 3rem;
    /* Space before the new cards */
}

/* === NEW: British Report Block Styles === */
.report-block {
    background-color: #f8f9fa;
    border-left: 4px solid #1e3a5f;
    padding: 1.5rem;
    margin-bottom: 2rem;
    border-radius: 0 4px 4px 0;
    font-style: normal;
}

.report-block:nth-of-type(even) {
    border-left: none;
    border-right: 4px solid #1e3a5f;
    border-radius: 4px 0 0 4px;
}

.report-block p {
    margin-bottom: 1rem;
    color: #000;
}

.report-block .report-quote {
    font-family: serif;
    font-style: normal;
    color: #000;
    font-size: 1.1em;
    padding: 1rem;
    background-color: #fffbe6;
    border-radius: 4px;
    margin-top: 1rem;
    position: relative;
    /* box-shadow: inset 3px 0 0 #1e3a5f; REMOVED per user request */
}

/* Subtle decorative quote mark */
.report-block .report-quote::before {
    content: "“";
    position: absolute;
    top: -10px;
    left: 10px;
    font-size: 4rem;
    color: #1e3a5f;
    font-family: serif;
    z-index: 0;
    line-height: 1;
}

/* Ensure text sits above the icon */
.report-block .report-quote p,
.report-block .report-quote {
    z-index: 1;
}

/* === NEW: Standalone Quote (No outer grey block) === */
.standalone-quote {
    font-family: serif;
    font-style: normal;
    color: #000;
    font-size: 1.1em;
    padding: 1rem;
    background-color: #fffbe6;
    border-radius: 4px;
    margin-top: 1rem;
    position: relative;
    z-index: 0;
    /* Establish stacking context */
}

.standalone-quote::before {
    content: "“";
    position: absolute;
    top: -10px;
    left: 10px;
    font-size: 4rem;
    color: #1e3a5f;
    font-family: serif;
    z-index: -1;
    /* Behind text, above background */
    line-height: 1;
}

/* === NEW: Style for miscellaneous page content === */
#majmuat-page .article-content {
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    margin-bottom: 0;
}

/* === FIX: Remove nested white card on Clans page === */
#mools-page .article-content {
    background-color: transparent;
    padding: 0;
    box-shadow: none;
    border-radius: 0;
}

/* Specific fix for the first card (mool intro) to adjoin the banner */
#mools-page #intro,
#majmuat-page .article-content {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

/* === NEW: General class for new white cards === */
.content-card {
    background-color: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    padding: 3rem;
    margin-bottom: 3rem;
    overflow: hidden;
}

/* === NEW: Remove margin from last card === */
#origin-page .content-card:last-child,
#majmuat-page .content-card:last-child,
#surname-page .content-card:last-child,
#mools-page .content-card:last-child,
#zamindari-page .content-card:last-child,
#genetics-page .content-card:last-child,
#characteristic-page .content-card:last-child,
#home-page .content-card:last-child {
    margin-bottom: 0;
}


.content-card-image-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

.content-card-image-grid img {
    width: 100%;
    height: 250px;
    object-fit: cover;
    border-radius: 8px;
    background-color: #eee;
}

/* === END NEW CARD STYLES === */


/* === MODIFIED: Restored rounded corners and increased separation for genetics article === */
#genetics-page .article-content {
    background-color: #fff;
    padding: 3rem;

    /* === FIX: Add shadow === */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);

    /* === FIX: Fix adjoin to banner === */
    border-top-left-radius: 0;
    border-top-right-radius: 0;

    border-bottom-left-radius: 12px;
    /* Restored */
    border-bottom-right-radius: 12px;
    /* Restored */
    margin-bottom: 3rem;
    /* Increased separation from 2rem to 3rem (standard) */
}


#zamindari-page .article-content {
    /* === MODIFIED: On legacy page, make it transparent to join banner === */
    background-color: transparent;
    padding: 0;
    /* Cards inside will manage their own padding/margins */
}

/* === NEW: Style for Figures page to match legacy page bg === */
#figures-page .article-content {
    /* === MODIFIED: On figures page, make it the grey background */
    background-color: #f5f3ed;
    padding: 0;
    /* Cards inside will manage their own padding/margins */
}


/* === NEW: This class groups the main legacy sections === */
.legacy-main-content {
    background-color: #fff;
    padding: 3rem;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    margin-bottom: 3rem;
    /* This creates the separation */

    /* === FIX: Re-applied adjoining corner fix === */
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

/* === NEW: Remove extra margin on the last section *inside* the main card === */
.legacy-main-content section:last-child {
    margin-bottom: 0;
}


/* === EDITED (FONT SIZE) - H2 FONT SIZE DECREASED PER REQUEST === */
section h2 {
    font-size: 1.8rem;
    /* CHANGED from 2rem to 1.8rem */
    color: #1e3a5f;
    margin-bottom: 1.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid #e0e0e0;
}

section h5 {
    font-size: 1.1rem;
    color: #1e3a5f;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid #e0e0e0;
    font-weight: 700;
}

/* === EDITED (FONT SIZE & LINE HEIGHT) - FONT SIZE INCREASED PER REQUEST === */
section p {
    line-height: 1.6;
    /* Wikipedia-style line height */
    font-size: 1rem;
    /* CHANGED from 0.9rem to 1rem */
    color: #000;
    /* MODIFIED: Changed from #444 to black */
    margin-bottom: 1rem;
}

/* === NEW: Style for highlighting key terms (e.g., Kangs, Babhans) === */
.highlight-lineage {
    font-size: 1.1rem;
    /* Slightly larger than 1rem default */
    font-weight: 700;
    color: #1e3a5f;
}

/* === END NEW === */

/* === NEW: Style for bullet points === */
.article-content ul {
    list-style-type: disc;
    /* Standard bullet points */
    margin-left: 2rem;
    /* Indentation */
    margin-bottom: 1rem;
}

/* This style is needed for lists *inside* the new legacy sections */
/* === MODIFIED: Only apply list style to lists inside main content (not card content) === */
.legacy-main-content ul {
    list-style-type: disc;
    margin-left: 2rem;
    margin-bottom: 1rem;
}

.article-content li {
    font-size: 1rem;
    color: #000;
    /* MODIFIED: Changed from #444 to black */
    line-height: 1.6;
    margin-bottom: 0.5rem;
    /* Space between list items */
}

/* === NEW: KANGS GALLERY STYLES (3-column responsive) === */

/* Wrapper for the Kangs section, making it a distinct card */
.genetics-gallery-wrapper {
    background-color: #fff;
    padding: 3rem;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    margin-bottom: 3rem;
    /* Standard separation from the bottom */
    margin-top: 0;
}

/* === NEW: Remove bottom margin from last genetics card (desktop) === */
#genetics-kangs {
    margin-bottom: 0;
}

/* === END NEW === */

.genetics-gallery-wrapper h2 {
    /* === MODIFIED: Match standard section h2 === */
    font-size: 1.8rem;
    color: #1e3a5f;
    margin-bottom: 1.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid #e0e0e0;
    text-align: left;
    /* Revert from center */
}

/* === MODIFIED: Increased gap for equal spacing and made columns equal fractionally === */
.kangs-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    /* Increased gap */
    margin-top: 2rem;
    /* === NEW: Add space after description === */
}

/* === NEW: Grid for Harvard section (MODIFIED to 1-column) === */
.harvard-grid {
    display: grid;
    grid-template-columns: 1fr;
    /* MODIFIED: Single column */
    gap: 2rem;
    /* Increased gap */
    margin: 2rem auto 0 auto;
    /* MODIFIED: Center grid */
    max-width: 800px;
    /* MODIFIED: Limit width */
}

/* === END NEW === */

/* === NEW: Style for rectangular Harvard image === */
.harvard-grid .kang-image-wrapper {
    padding-top: 0;
    /* Remove square aspect ratio enforcement */
    height: auto;
    /* Allow wrapper to size to content */
    overflow: hidden;
    /* Keep this for the radius */
    box-shadow: none;
    border: 1px solid #000;
    /* MODIFIED: Remove shadow */
}

.harvard-grid .kang-image-wrapper img {
    position: static;
    /* Remove absolute positioning */
    height: auto;
    /* Maintain aspect ratio */
    width: 100%;
    /* Fit to wrapper */
    object-fit: contain;
    /* Show the full image */
    border-radius: 8px;
    /* Keep the radius */
    /* MODIFIED: Add thin black border */
}

/* === END NEW === */


/* === MODIFIED: Removed all card styling from .kang-card. This is now just a text container. */
.kang-card {
    background-color: transparent;
    padding: 0;
    border-radius: 0;
    box-shadow: none;
    text-align: center;
    transition: none;
}

/* === NEW: Image wrapper for sizing, shadow, and hover effect */
.kang-image-wrapper {
    width: 100%;
    padding-top: 100%;
    /* Creates a square aspect ratio (1:1) */
    position: relative;
    background-color: #eee;
    /* Placeholder background */
    margin-bottom: 0.75rem;
    /* Increased space before description */
    border-radius: 8px;
    /* Slightly larger radius for a cleaner look */
    overflow: hidden;
    /* Ensure placeholder text doesn't escape */

    /* Initial appearance/shadow */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);

    /* Hover transition setup */
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
    /* cursor: pointer; -- MODIFIED: Removed cursor pointer */
}

/* === NEW: Style for the actual image inside the wrapper === */
.kang-image-wrapper img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
    /* Apply radius to the image */
}

/* === NEW: Hover effect for the image wrapper */
/* === MODIFIED: Removed hover effect === */
/*
.kang-image-wrapper:hover {
    transform: translateY(-5px) scale(1.02);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}
*/

/* Content inside the image wrapper (placeholder text) */
.kang-card-image {
    /* This is now only used for the text if the image fails to load */
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;

    font-size: 1.5rem;
    /* Increased text size for a bigger canvas */
    font-weight: 600;
    color: #1e3a5f;
    line-height: 1;
    /* Ensure centering works well */

    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #eee;
    /* Ensure background shows if image fails */
}

.kang-card-description {
    font-size: 1rem;
    /* Slightly increased description size */
    color: #000;
    /* MODIFIED: Changed from #444 to black */
    line-height: 1.4;
    margin-bottom: 0;
}

/* === END NEW: KANGS GALLERY STYLES === */


/* === NEW: Styles for self-contained Politician section === */
/* === RENAMED: from #legacy-politicians to #figures-politicians === */
#figures-politicians {
    background-color: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    padding: 0;
    /* Remove default section padding */
    overflow: hidden;
    /* To contain the banner's rounded corners */
    margin-bottom: 3rem;
    /* === MODIFIED: Added bottom margin for separation === */
}

.banner-politician-internal {
    position: relative;
    overflow: hidden;
    min-height: 400px;
    padding: 4rem 3rem 2rem 3rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.banner-politician-internal h2 {
    /* Re-style, as it's not a default section h2 */
    font-size: 3.5rem;
    color: #fff;
    margin-bottom: 1rem;
    font-weight: 700;
    padding-bottom: 0;
    border-bottom: none;
}

.banner-politician-internal p {
    color: #eee;
    font-size: 1.2rem;
    /* Match other subtitle */
    font-style: italic;
    max-width: 600px;
    margin-bottom: 0;
}

.politician-content-wrapper {
    padding: 3rem;
    /* Standard content padding */
}

/* === END NEW === */


/* === NEW: Styles for self-contained Billionaire section === */
/* === RENAMED: from #legacy-billionaires to #figures-billionaires === */
#figures-billionaires {
    background-color: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    padding: 0;
    /* Remove default section padding */
    overflow: hidden;
    /* To contain the banner's rounded corners */
    margin-bottom: 3rem;
    /* === MODIFIED: Added margin === */
}

.banner-billionaire-internal {
    position: relative;
    overflow: hidden;
    min-height: 400px;
    padding: 4rem 3rem 2rem 3rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.banner-billionaire-internal h2 {
    /* Re-style, as it's not a default section h2 */
    font-size: 3.5rem;
    color: #fff;
    margin-bottom: 1rem;
    font-weight: 700;
    padding-bottom: 0;
    border-bottom: none;
}

.banner-billionaire-internal p {
    color: #eee;
    font-size: 1.2rem;
    /* Match other subtitle */
    font-style: italic;
    max-width: 600px;
    margin-bottom: 0;
}

.billionaire-content-wrapper {
    padding: 3rem;
    /* Standard content padding */
}

/* === END NEW === */

/* === NEW: Styles for self-contained Sports section === */
#figures-sports {
    background-color: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    padding: 0;
    overflow: hidden;
    margin-bottom: 3rem;
    /* Standard separation */
}

.banner-sports-internal {
    position: relative;
    overflow: hidden;
    min-height: 400px;
    padding: 4rem 3rem 2rem 3rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.banner-sports-internal h2 {
    font-size: 3.5rem;
    color: #fff;
    margin-bottom: 1rem;
    font-weight: 700;
    padding-bottom: 0;
    border-bottom: none;
}

.banner-sports-internal p {
    color: #eee;
    font-size: 1.2rem;
    font-style: italic;
    max-width: 600px;
    margin-bottom: 0;
}

.sports-content-wrapper {
    padding: 3rem;
}

/* === END NEW === */

/* === NEW: Styles for self-contained Media section === */
#figures-media {
    background-color: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    padding: 0;
    overflow: hidden;
    margin-bottom: 3rem;
    /* Standard separation */
}

.banner-media-internal {
    position: relative;
    overflow: hidden;
    min-height: 400px;
    padding: 4rem 3rem 2rem 3rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.banner-media-internal h2 {
    font-size: 3.5rem;
    color: #fff;
    margin-bottom: 1rem;
    font-weight: 700;
    padding-bottom: 0;
    border-bottom: none;
}

.banner-media-internal p {
    color: #eee;
    font-size: 1.2rem;
    font-style: italic;
    max-width: 600px;
    margin-bottom: 0;
}

.media-content-wrapper {
    padding: 3rem;
}

/* === END NEW === */

/* === NEW: Styles for self-contained Artists section === */
#figures-artists {
    background-color: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    padding: 0;
    overflow: hidden;
    margin-bottom: 0;
    /* Last section, no margin */
}

.banner-artists-internal {
    position: relative;
    overflow: hidden;
    min-height: 400px;
    padding: 4rem 3rem 2rem 3rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.banner-artists-internal h2 {
    font-size: 3.5rem;
    color: #fff;
    margin-bottom: 1rem;
    font-weight: 700;
    padding-bottom: 0;
    border-bottom: none;
}

.banner-artists-internal p {
    color: #eee;
    font-size: 1.2rem;
    font-style: italic;
    max-width: 600px;
    margin-bottom: 0;
}

.artists-content-wrapper {
    padding: 3rem;
}

/* === END NEW === */

/* === NEW: Styles for Legacy Kings Section === */
#legacy-kings {
    background-color: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    /* padding: 0; handled by inline style */
    /* overflow: hidden; handled by inline style */
    margin-bottom: 3rem;
    /* MODIFIED: Added margin */
}

.banner-legacy-kings-internal {
    position: relative;
    overflow: hidden;
    min-height: 400px;
    padding: 4rem 3rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.banner-legacy-kings-internal h2 {
    font-size: 3.5rem;
    color: #fff;
    margin-bottom: 1rem;
    font-weight: 700;
    padding-bottom: 0;
    border-bottom: none;
}

.banner-legacy-kings-internal p {
    color: #eee;
    font-size: 1.2rem;
    font-style: italic;
    max-width: 600px;
}

.kings-content-wrapper {
    padding: 3rem;
}

/* NEW: Portrait image style for Kings */
/* === MODIFICATION: Removed portrait-specific styles === */
/* .profile-image-portrait ... (style removed) */
/* .profile-image-portrait img ... (style removed) */
/* === END MODIFICATION === */


/* === NEW: Styles for Legacy Wars Section === */
#legacy-wars {
    background-color: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    /* padding: 0; handled by inline style */
    /* overflow: hidden; handled by inline style */
    margin-bottom: 3rem;
    /* MODIFIED: Added margin */
}

.banner-legacy-wars-internal {
    position: relative;
    overflow: hidden;
    min-height: 400px;
    padding: 4rem 3rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.banner-legacy-wars-internal h2 {
    font-size: 3.5rem;
    color: #fff;
    margin-bottom: 1rem;
    font-weight: 700;
    padding-bottom: 0;
    border-bottom: none;
}

.banner-legacy-wars-internal p {
    color: #eee;
    font-size: 1.2rem;
    font-style: italic;
    max-width: 600px;
}

.wars-content-wrapper {
    padding: 3rem;
}

/* === END NEW === */

/* === NEW: Styles for Legacy Ranvir Sena Section === */
#legacy-ranvir-sena {
    background-color: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    /* padding: 0; handled by inline style/HTML structure */
    overflow: hidden;
    /* Enforce curved edges */
    /* margin-bottom: 0; handled by inline style */
}

/* === NEW: Styles for Legacy Majmuat Section === */
#legacy-majmuat {
    background-color: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    padding: 0;
    overflow: hidden;
    margin-bottom: 5rem;
    /* Increased margin */
}

.banner-legacy-majmuat-internal {
    position: relative;
    overflow: hidden;
    min-height: 400px;
    padding: 4rem 3rem 2rem 3rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.banner-legacy-majmuat-internal h2 {
    font-size: 3.5rem;
    color: #fff;
    margin-bottom: 1rem;
    font-weight: 700;
    padding-bottom: 0;
    border-bottom: none;
}

.banner-legacy-majmuat-internal p {
    color: #eee;
    font-size: 1.2rem;
    font-style: italic;
    max-width: 600px;
    margin-bottom: 0;
}

.majmuat-content-wrapper {
    padding: 3rem;
}


.banner-legacy-ranvir-sena-internal {
    position: relative;
    overflow: hidden;
    min-height: 400px;
    padding: 4rem 3rem 2rem 3rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.banner-legacy-ranvir-sena-internal h2 {
    font-size: 3.5rem;
    color: #fff;
    margin-bottom: 1rem;
    font-weight: 700;
    padding-bottom: 0;
    border-bottom: none;
}

.banner-legacy-ranvir-sena-internal p {
    color: #eee;
    font-size: 1.2rem;
    font-style: italic;
    max-width: 600px;
    margin-bottom: 0;
}

.ranvir-sena-content-wrapper {
    padding: 3rem;
}

/* === END NEW === */


/* === MODIFIED: Replaced gallery styles with profile list styles === */
.profile-list {
    display: flex;
    flex-direction: column;
    gap: 3rem;
    /* Space between entries */
    margin-top: 1.5rem;
}

.profile-entry {
    display: flex;
    align-items: center;
    gap: 2rem;
}

.profile-entry:nth-child(even) {
    flex-direction: row-reverse;
}

.profile-image {
    flex-shrink: 0;
    /* Prevent image from shrinking */
    width: 200px;
    height: 200px;
}

.profile-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
    background-color: #eee;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.profile-description h4 {
    font-size: 1.5rem;
    font-weight: 600;
    color: #1e3a5f;
    margin-bottom: 0.5rem;
}

.profile-description p {
    font-size: 1rem;
    line-height: 1.6;
    color: #000;
    /* MODIFIED: Changed from #444 to black */
    margin-bottom: 0;
    /* Remove default paragraph margin */
}

/* === END MODIFICATION === */

/* === NEW: References Container Margin === */
.table-container {
    margin: 2rem 0;
    /* Add margin to separate from content above */
}

/* === NEW: Styles for article table === */
.article-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 1.5rem;
    /* Space above the table */
    margin-bottom: 1rem;
    font-size: 0.95rem;
}

.article-table caption {
    font-size: 1.1rem;
    font-weight: 600;
    color: #1e3a5f;
    margin-bottom: 1rem;
    text-align: left;
}

.article-table th,
.article-table td {
    border: 1px solid #ddd;
    padding: 0.75rem 1rem;
    text-align: left;
    vertical-align: top;
}

.article-table tr:nth-child(even) {
    background-color: #fdfdfd;
}

.article-table ul {
    list-style-type: disc;
    margin-left: 1.25rem;
    /* Indent list inside table */
    margin-bottom: 0;
    padding-left: 0;
}

.article-table li {
    margin-bottom: 0.5rem;
    line-height: 1.5;
    font-size: 0.95rem;
    /* Match table font size */
}

.article-table li:last-child {
    margin-bottom: 0;
}

/* === END NEW === */

/* === NEW: Style for images embedded in articles === */
.article-image {
    width: 100%;
    height: auto;
    max-width: 700px;
    /* Limit max width to prevent pixelation */
    display: block;
    /* Center it */
    margin: 1.5rem auto 1rem auto;
    /* Add spacing */
    border-radius: 8px;
    /* background-color: #eee; */
    /* Removed bg color */
    /* box-shadow: 0 2px 8px rgba(0,0,0,0.1); */
    /* Removed shadow */
    /* border: 1px solid #1e3a5f; */
    /* MODIFIED: Border removed as requested */
}

/* === END NEW === */

/* === NEW: Wikipedia-style Image Box === */
.wiki-infobox {
    float: right;
    clear: right;
    width: 300px;
    margin: 0.5rem 0 1rem 1.5rem;
    border: 1px solid #a2a9b1;
    /* Standard Wiki border color */
    background-color: #f8f9fa;
    padding: 3px;
    font-size: 0.85rem;
    color: #202122;
}

.wiki-infobox img {
    width: 100%;
    height: auto;
    display: block;
    border: 1px solid #a2a9b1;
    /* Wiki often has a light border on the image too */
    margin-bottom: 0.5rem;
}

.wiki-infobox .wiki-caption {
    padding: 0.2rem 0.4rem;
    text-align: left;
    line-height: 1.4;
}

@media (max-width: 768px) {
    .wiki-infobox {
        float: none;
        margin: 1.5rem auto;
        width: 100%;
        max-width: 450px;
    }
}

/* === END NEW === */

/* === NEW: Styles for Balwantnana Slider === */
.slider-container {
    position: relative;
    width: 100%;
    margin-top: 1.5rem;
    /* Add some space above the slider */
    border-radius: 8px;
    /* Match image radius */
    overflow: hidden;
    /* Clip the track */
}

.slider-track {
    display: flex;
    overflow-x: auto;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    /* Smooth scrolling on iOS */
    scrollbar-width: none;
    /* Hide scrollbar Firefox */
}

.slider-track::-webkit-scrollbar {
    display: none;
    /* Hide scrollbar Chrome/Safari/Edge */
}

.slider-slide {
    flex: 0 0 100%;
    width: 100%;
    scroll-snap-align: start;
    position: relative;
    aspect-ratio: 16 / 9;
    /* Force a 16:9 aspect ratio */
    background-color: #eee;
}

.slider-slide img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    /* Use 'contain' to see the whole image */
    display: block;
}

.slider-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    border: none;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    font-size: 1.5rem;
    font-weight: bold;
    cursor: pointer;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.3s ease;
}

.slider-btn:hover {
    background-color: rgba(0, 0, 0, 0.8);
}

.slider-btn.prev {
    left: 1rem;
}

.slider-btn.next {
    right: 1rem;
}

/* === END NEW SLIDER STYLES === */


@media (max-width: 1200px) {

    /* === EDITED: Apply 1fr grid to both states for responsive === */
    .main-container,
    .main-container.sidebar-hidden {
        grid-template-columns: 1fr;
    }

    .sidebar {
        position: relative;
        top: 0;
        z-index: 50;
        /* === NEW: Explicitly add z-index for mobile stacking === */
    }

    nav {
        gap: 1rem;
    }

    .banner h1 {
        font-size: 2.5rem;
    }
}

/* === MODIFIED: MOBILE 1200px STYLES === */
@media (max-width: 1200px) {

    /* === NEW (REQUEST): Reduce header side padding === */
    /* === NEW (REQUEST): CONTROL MOBILE HEIGHT HERE === */
    header {
        height: 55px;
        /* Adjust this value for Mobile Height */
        padding: 0 0.5rem;
        /* Only horizontal padding */
        display: flex;
        align-items: center;
    }

    /* === NEW: Reduce side margins for main content === */
    .main-container {
        padding: 1rem 0.5rem;
        /* MODIFIED: Override desktop 2rem */
        gap: 2.1rem;
        /* MODIFIED: Reduced from 3rem to 0.5rem for mobile */
    }

    /* === END NEW === */

    .header-container {
        flex-direction: row;
        /* MODIFIED: Back to row */
        justify-content: space-between;
        /* MODIFIED: This overrides desktop */
        align-items: center;
        width: 100%;
        /* Ensure it spans */
    }

    /* === NEW (REQUEST): Reduce logo gap === */
    .logo-section {
        gap: 0.5rem;
    }



    /* === NEW (REQUEST): Reduce site title size === */
    .site-title {
        font-size: 1.25rem;
    }

    .site-title-domain {
        font-size: 0.6rem;
    }

    /* === END NEW === */

    /* === NEW (REQUEST): Adjust logo size for mobile === */
    .logo {
        width: 30px;
        /* MOBILE SIZE */
        height: 30px;
        /* MOBILE SIZE */
        font-size: 1rem;
        /* MOBILE FONT SIZE */
    }

    /* === END NEW === */

    /* === NEW (REQUEST): Reduce hamburger size === */
    .hamburger-menu {
        display: flex;
        /* NEW: Show hamburger */
        width: 1.8rem;
        /* MODIFIED: Reduced size */
        height: 1.8rem;
        /* MODIFIED: Reduced size */
    }

    .bar {
        width: 1.8rem;
        /* MODIFIED: Reduced size */
        height: 0.2rem;
        /* MODIFIED: Reduced size */
    }

    /* Hamburger animation to 'X' */
    .hamburger-menu.active .bar-1 {
        transform: rotate(45deg) translate(0.4rem, 0.4rem);
        /* MODIFIED: Adjusted for new size */
    }

    .hamburger-menu.active .bar-3 {
        transform: rotate(-45deg) translate(0.4rem, -0.4rem);
        /* MODIFIED: Adjusted for new size */
    }

    /* === END NEW === */

    /* === REMOVED: .header-right spacer is no longer needed === */

    nav {
        /* MODIFIED: Full-screen mobile menu */
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        background-color: rgba(255, 255, 255, 0.98);
        backdrop-filter: blur(5px);

        /* Center links */
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        /* MODIFIED: Moderate gap */
        gap: 0.6rem;

        flex-wrap: nowrap;
        /* MODIFIED: No wrapping */
        z-index: 101;
        /* Below hamburger, above content */

        /* NEW: Slide-in animation */
        transition: transform 0.3s ease-in-out;
        transform: translateX(100%);
        /* Hidden off-screen */
    }

    /* NEW: 'open' class toggled by JS */
    nav.open {
        transform: translateX(0);
        /* Slide into view */
    }

    nav a {
        /* MODIFIED: Moderate font size */
        font-size: 1.25rem;
        /* Make links tappable */
        font-weight: 400;
        /* CHANGED: Unbolded (Normal weight) */
        color: #000;
        /* CHANGED: Explicit black color */
        padding: 0.6rem 2rem;
        /* MODIFIED: Moderate padding */
        border-radius: 50px;
        /* Keep pill shape */
        width: auto;
    }

    /* === MODIFICATION: Remove hover effect on mobile === */
    nav a:hover {
        transform: none;
        background-color: transparent;
        /* Remove hover bg on mobile */
        color: #333;
    }

    /* === NEW: Keep active style on mobile nav === */
    nav a.active {
        /* MODIFIED: Match Desktop Active Color */
        background-color: #1e3a5f;
        color: white;
        font-weight: 700;

    }

    /* === END NEW === */


    /* --- End of Nav modifications --- */

    .contact-info {
        flex-direction: column;
        gap: 0.5rem;
    }

    .banner {
        padding: 2rem 0.75rem 1rem 0.75rem;
        min-height: 250px;
        /* MODIFIED: Further reduced L/R padding */
    }

    .banner h1 {
        font-size: 2rem;
    }

    .article-content {
        padding: 1.5rem 0.75rem;
        /* MODIFIED: Further reduced L/R padding */
    }

    /* === MODIFIED: More specific rule for identical Origin page margins === */
    #origin-page .article-content,
    #origin-page .content-card,
    #surname-page .article-content,
    #surname-page .content-card,
    #mools-page .article-content,
    #mools-page .content-card,
    #genetics-page .article-content,
    #genetics-page .content-card,
    #characteristic-page .article-content,
    #characteristic-page .content-card {
        margin-bottom: 2rem;
        /* Ensure all cards have identical 2rem bottom margin */
    }

    /* === NEW: Responsive for new card grid === */
    .content-card {
        padding: 1.5rem 0.75rem;
        /* Match mobile article padding */
        /* margin-bottom: 2rem; */
        /* MODIFIED: Handled by the more specific rule above */
    }

    .content-card-image-grid {
        grid-template-columns: 1fr;
        /* Stack images on mobile */
        gap: 1rem;
    }

    .content-card-image-grid img {
        height: 200px;
        /* Adjust height for mobile */
    }

    /* === END NEW === */


    /* === NEW: Mobile separation and styling for Genetics page === */
    #genetics-page .article-content {
        margin-bottom: 2rem;
        /* Adjusted from 3rem to fit mobile spacing better */
        padding: 1.5rem 0.75rem;
        /* Match mobile article padding */
    }

    .genetics-gallery-wrapper {
        padding: 1.5rem 0.75rem;
        margin-bottom: 2rem;
        /* Mobile separation */
    }

    /* === NEW: Remove bottom margin from last genetics card on mobile === */
    #genetics-kangs {
        margin-bottom: 0;
    }

    /* === END NEW === */

    /* === NEW: Mobile padding for legacy page === */
    #zamindari-page .article-content {
        padding: 0;
        /* Override article padding */
    }



    /* === NEW: Mobile padding for figures page === */
    #figures-page .article-content {
        padding: 0;
        /* Override article padding */
    }

    /* === NEW: Mobile padding for the new main content card === */
    .legacy-main-content {
        padding: 1.5rem 0.75rem;
        margin-bottom: 2rem;
        /* Adjust mobile separation */
    }


    /* === NEW: Adjust list padding for mobile === */
    .article-content ul,
    .legacy-main-content ul {
        margin-left: 1.5rem;
        /* Reduce indentation on mobile */
    }

    /* === NEW: Adjust politician section for mobile === */
    /* === MODIFIED: Apply mobile margin to all sections *except* the last one === */
    #figures-politicians,
    #figures-billionaires,
    #figures-sports,
    #figures-media {
        margin-bottom: 2rem;
    }

    #figures-artists {
        margin-bottom: 0;
        /* Last section, no margin on mobile */
    }

    .banner-politician-internal {
        padding: 2rem 0.75rem;
        min-height: 250px;
        /* Smaller on mobile */
    }

    .banner-politician-internal h2 {
        font-size: 2rem;
    }

    .politician-content-wrapper {
        padding: 1.5rem 0.75rem;
    }

    /* === END NEW === */

    /* === NEW: Adjust billionaire section for mobile === */
    .banner-billionaire-internal {
        padding: 2rem 0.75rem;
        min-height: 250px;
        /* Smaller on mobile */
    }

    .banner-billionaire-internal h2 {
        font-size: 2rem;
    }

    .billionaire-content-wrapper {
        padding: 1.5rem 0.75rem;
    }

    /* === END NEW === */

    /* === NEW: Adjust sports section for mobile === */
    .banner-sports-internal {
        padding: 2rem 0.75rem;
        min-height: 250px;
    }

    .banner-sports-internal h2 {
        font-size: 2rem;
    }

    .sports-content-wrapper {
        padding: 1.5rem 0.75rem;
    }

    /* === END NEW === */

    /* === NEW: Adjust media section for mobile === */
    .banner-media-internal {
        padding: 2rem 0.75rem;
        min-height: 250px;
    }

    .banner-media-internal h2 {
        font-size: 2rem;
    }

    .media-content-wrapper {
        padding: 1.5rem 0.75rem;
    }

    /* === END NEW === */

    /* === NEW: Adjust artists section for mobile === */
    .banner-artists-internal {
        padding: 2rem 0.75rem;
        min-height: 250px;
    }

    .banner-artists-internal h2 {
        font-size: 2rem;
    }

    .artists-content-wrapper {
        padding: 1.5rem 0.75rem;
    }

    /* === END NEW === */

    /* === NEW: Adjust legacy-kings section for mobile === */
    #legacy-kings {
        margin-bottom: 2rem;
    }

    .banner-legacy-kings-internal {
        padding: 2rem 0.75rem;
        min-height: 250px;
    }

    .banner-legacy-kings-internal h2 {
        font-size: 2rem;
    }

    .kings-content-wrapper {
        padding: 1.5rem 0.75rem;
    }

    /* === MODIFICATION: Removed portrait-specific mobile style === */
    /* .profile-image-portrait ... (style removed) */
    /* === END MODIFICATION === */

    /* === NEW: Mobile padding for balwantnana section === */
    #legacy-balwantnana {
        margin-bottom: 0 !important;
        padding: 1.5rem 0.75rem !important;
    }

    /* === NEW: Mobile padding for balwantnana slider === */
    .slider-btn {
        width: 30px;
        height: 30px;
        font-size: 1.2rem;
    }

    .slider-btn.prev {
        left: 0.5rem;
    }

    .slider-btn.next {
        right: 0.5rem;
    }


    /* === NEW: Adjust legacy-wars section for mobile === */
    #legacy-wars {
        margin-bottom: 2rem;
        /* Add margin on mobile */
    }

    .banner-legacy-wars-internal {
        padding: 2rem 0.75rem;
        min-height: 250px;
    }

    .banner-legacy-wars-internal h2 {
        font-size: 2rem;
    }

    .wars-content-wrapper {
        padding: 1.5rem 0.75rem;
    }

    /* === END NEW === */

    /* === NEW: Adjust legacy-ranvir-sena section for mobile === */
    #legacy-ranvir-sena {
        margin-bottom: 0;
        /* Last section, no margin */
    }

    .banner-legacy-ranvir-sena-internal {
        padding: 2rem 0.75rem;
        min-height: 250px;
    }

    .banner-legacy-ranvir-sena-internal h2 {
        font-size: 2rem;
    }

    .ranvir-sena-content-wrapper {
        padding: 1.5rem 0.75rem;
    }

    /* === END NEW === */

    /* === NEW: Adjust Majmuat section for mobile === */
    .banner-legacy-majmuat-internal {
        padding: 2rem 0.75rem;
        min-height: 250px;
    }

    .banner-legacy-majmuat-internal h2 {
        font-size: 2rem;
    }

    /* === END NEW === */


    /* === MODIFIED: Adjust profile list for mobile === */
    .profile-entry,
    .profile-entry:nth-child(even) {
        flex-direction: column;
        /* Stack on mobile */
        text-align: center;
        gap: 1rem;
    }

    .profile-image {
        width: 150px;
        height: 150px;
    }

    .profile-description h4 {
        font-size: 1.25rem;
    }

    /* === NEW: Align description text left on mobile === */
    .profile-description p {
        text-align: left;
    }

    /* === END NEW === */

    /* Responsive: Single column for mobile for Kangs section */
    .kangs-grid {
        grid-template-columns: 1fr;
        /* Single column for mobile view */
        gap: 1.5rem;
    }

    /* === NEW: Responsive override for Harvard grid === */
    .harvard-grid {
        grid-template-columns: 1fr;
        /* Single column for mobile view */
    }

    /* === NEW: Adjust Majmuat section for mobile === */
    .majmuat-content-wrapper {
        padding: 1.5rem 0.75rem;
    }

    /* === NEW: Adjust Content Card for mobile (References Section) === */
    .content-card {
        padding: 1.5rem 0.75rem;
    }

    /* === END NEW === */
}

/* === NEW: FAQ Styling for Misconceptions (Global) === */
.faq-item {
    margin-bottom: 2rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid #eee;
}

.faq-item:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.faq-question {
    font-size: 1.1rem;
    font-weight: 700;
    color: #1e3a5f;
    margin-bottom: 0.5rem;
}

.faq-answer {
    font-size: 1rem;
    color: #000;
    line-height: 1.6;
    margin-bottom: 1rem;
}

.faq-quote {
    background-color: #f9f9f9;
    border-left: 4px solid #1e3a5f;
    padding: 1rem;
    font-style: italic;
    color: #555;
    margin-top: 0.5rem;
    border-radius: 0 4px 4px 0;
}

/* === END NEW === */
/* === NEW: REFERENCES SYSTEM STYLES === */

/* Citation Marker [1] */
.citation-wrapper {
    position: relative;
    display: inline-block;
    cursor: pointer;
}

.citation-marker {
    color: #007bff;
    /* MODIFIED: Match Go to References color */
    font-weight: normal;
    /* MODIFIED: No bold */
    font-size: 0.8em;
    vertical-align: super;
    text-decoration: none;
    margin-left: 2px;
}

.citation-marker:hover {
    text-decoration: underline;
}

/* Tooltip Box */
.citation-tooltip {
    visibility: hidden;
    width: 250px;
    /* Increased width */
    background-color: #fffbe6;
    /* MODIFIED: Light yellow background */
    color: #333;
    text-align: center;
    border-radius: 6px;
    padding: 10px;
    position: absolute;
    z-index: 1000;
    top: 115%;
    /* MODIFIED: Position below the text */
    left: 50%;
    transform: translateX(-50%);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    border: 1px solid #ddd;
    opacity: 0;
    transition: opacity 0.3s;
    font-size: 0.9rem;
    line-height: 1.4;
}

/* Tooltip Arrow Border (Outer) */
.citation-tooltip::before {
    content: "";
    position: absolute;
    bottom: 100%;
    left: var(--arrow-left, 50%);
    margin-left: -9px;
    /* Increased from -6px */
    border-width: 9px;
    /* Increased from 6px */
    border-style: solid;
    border-color: transparent transparent #ddd transparent;
    pointer-events: none;
}

/* Tooltip Arrow Fill (Inner) */
.citation-tooltip::after {
    content: "";
    position: absolute;
    bottom: 100%;
    left: var(--arrow-left, 50%);
    margin-left: -8px;
    /* Increased from -5px */
    border-width: 8px;
    /* Increased from 5px */
    border-style: solid;
    border-color: transparent transparent #fffbe6 transparent;
    margin-bottom: -1px;
    /* Overlap the box border */
    pointer-events: none;
}

/* Show tooltip on hover or when active class is added (for click) */
.citation-wrapper:hover .citation-tooltip,
.citation-wrapper.active .citation-tooltip {
    visibility: visible;
    opacity: 1;
}

.citation-author {
    font-weight: bold;
    display: block;
    margin-bottom: 5px;
    color: #1e3a5f;
}

.citation-link {
    color: #007bff;
    text-decoration: none;
    font-size: 0.85rem;
}

.citation-link:hover {
    text-decoration: underline;
}

/* References Section */
/* References Section */
/* #references-section styles removed as it now uses .content-card */
#references-section h2 {
    font-size: 1.8rem;
    color: #1e3a5f;
    margin-bottom: 1.5rem;
}

#references-section h2 {
    font-size: 1.8rem;
    color: #1e3a5f;
    margin-bottom: 1.5rem;
}

/* References Table */
/* References Table */
.references-table {
    width: 100%;
    border-collapse: collapse;
    background-color: #fff;
    /* box-shadow: 0 2px 8px rgba(0,0,0,0.05); -- REMOVED */
    /* border-radius: 8px; -- REMOVED */
    /* overflow: hidden; -- REMOVED */
    border: 1px solid #ddd;
    /* Add outer border */
}

.references-table th,
.references-table td {
    padding: 12px 15px;
    text-align: center;
    /* MODIFIED: Center align all table content */
    border: 1px solid #ddd;
    /* MODIFIED: Added full border for column separation */
    vertical-align: top;
}

.references-table th {
    background-color: #1e3a5f;
    color: #fff;
    font-weight: 600;
    text-align: center;
    /* MODIFIED: Center align headings */
}

.references-table tr:last-child td {
    border-bottom: none;
}

.references-table tr:hover {
    background-color: #f9f9f9;
}

/* Column specific widths */
.col-id {
    width: 5%;
    text-align: center;
    font-weight: bold;
    color: #1e3a5f;
}

.references-table .col-source {
    width: 35%;
    text-align: left;
}

.col-author {
    width: 25%;
}

.col-year {
    width: 10%;
}

.col-snippet {
    width: 15%;
}

/* Snippet View Button */
.view-snippet-btn {
    background-color: transparent;
    border: 1px solid #007bff;
    color: #007bff;
    padding: 5px 10px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.9rem;
    transition: all 0.2s;
}

.view-snippet-btn:hover {
    background-color: #007bff;
    color: white;
}

/* Modal (Lightbox) */
.modal {
    display: none;
    position: fixed;
    z-index: 2000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    /* Prevent scrolling background */
    background-color: rgba(0, 0, 0, 0.9);
    /* Flexbox for centering */
    align-items: center;
    justify-content: center;
}

.modal-content {
    display: block;
    width: auto;
    max-width: 95vw;
    /* MODIFIED: Ensure it fits on mobile */
    max-height: 90vh;
    object-fit: contain;
    border-radius: 4px;
    animation-name: zoom;
    animation-duration: 0.3s;
}

@keyframes zoom {
    from {
        transform: scale(0)
    }

    to {
        transform: scale(1)
    }
}

.close-modal {
    position: absolute;
    top: 15px;
    right: 35px;
    color: #ff0000;
    font-size: 40px;
    font-weight: bold;
    transition: 0.3s;
    cursor: pointer;
}

.close-modal:hover,
.close-modal:focus {
    color: #cc0000;
    text-decoration: none;
    cursor: pointer;
}

/* Mobile Responsive for Table */
/* Removed as per user request to keep simple scrolling table */
/* @media (max-width: 768px) { ... } */
.citation-title {
    display: block;
    font-style: italic;
    margin-bottom: 3px;
    font-size: 0.85rem;
    color: #555;
}

/* === Genetics Table Styles === */
.article-table tbody tr {
    color: #000;
}

.table-container {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    /* smooth scrolling on iOS */
    margin-bottom: 1rem;
}

.article-table {
    width: 100%;
    border-collapse: collapse;
}

.article-table th,
.article-table td {
    padding: 1rem;
    border: 1px solid #ddd;
    text-align: left;
}

/* Mobile optimizations for Genetics table */
@media (max-width: 768px) {

    .article-table th:nth-child(3),
    .article-table td:nth-child(3) {
        min-width: 250px;
        /* Force wider column to reduce vertical height */
    }

    /* === NEW: Normalize card gaps on mobile === */
    .content-card,
    #home-page .article-content,
    #origin-page .article-content,
    #surname-page .article-content,
    #genetics-page .article-content,
    #characteristic-page .article-content {
        margin-bottom: 1.5rem;
        /* Reduce form 3rem to 1.5rem on mobile */
    }

    /* Ensure last child has no margin */
    #home-page .content-card:last-child,
    .content-card:last-child {
        margin-bottom: 0;
    }


}

/* === Bhumihar Genetics Image Styling === */
#genetics-bhumihar .finding-block img,
#genetics-bhumihar img.article-image {
    border: 1px solid #ccc;
}

/* === Styled Quote Block === */
.quote-highlight {
    border-left: 4px solid #1e3a5f;
    background-color: #f9f9f9;
    padding: 1rem;
    font-style: italic;
    color: #000;
    margin-bottom: 1rem;
    display: block;
    /* Ensure it behaves like a block */
}

/* === NEW: Responsive Footer === */
/* === NEW: Responsive Footer === */
footer {
    /* === NEW: Gradient Background === */
    /* Darker, rich gradient with slight transparency */
    background: linear-gradient(135deg, rgba(30, 58, 95, 0.95) 0%, rgba(10, 20, 35, 0.98) 100%);
    color: #fff;
    /* === CONTROL DESKTOP FOOTER HEIGHT === */
    padding: 1.5rem 5rem;
    /* Adjust padding to control height */
    /* min-height: 200px; */
    /* Optional: Set explicit min-height */
    margin-top: 0;
    width: 100%;

    /* === NEW: Glass/Premium Look === */
    border-top: 1px solid rgba(255, 255, 255, 0.3);
    /* Stronger top light */
    box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.2);
    /* Depth shadow */
    position: relative;
    /* For z-index if needed */
    backdrop-filter: blur(12px);
    /* Increased blur */
    -webkit-backdrop-filter: blur(12px);
    /* Safari support */
}

.footer-container {
    max-width: 1400px;
    margin: 0 auto;
    /* === MODIFIED: Use Flex for side-by-side (formerly Grid 3-col) === */
    display: flex;
    justify-content: space-between;
    /* Left and Right edges */
    align-items: center;
    gap: 1.5rem;
}

.footer-left {
    font-size: 0.95rem;
    color: #e0e0e0;
    /* Ensure it aligns to the left */
    justify-self: start;
}

.footer-left strong {
    color: #fff;
    font-weight: 700;
}

/* === NEW: Footer Legal Links === */
.footer-legal {
    display: flex;
    gap: 1.5rem;
    justify-self: end;
}

.footer-legal a {
    color: #e0e0e0;
    text-decoration: none;
    font-size: 0.9rem;
    position: relative;
    transition: color 0.3s ease;
}

.footer-legal a:hover {
    color: #fff;
    text-decoration: none;
}

.footer-legal a::after {
    content: '';
    position: absolute;
    width: 0;
    height: 1px;
    bottom: -2px;
    left: 0;
    background-color: #fff;
    transition: width 0.3s ease;
}

.footer-legal a:hover::after {
    width: 100%;
}

.footer-links {
    display: flex;
    gap: 0.8rem;
    /* Ensure it aligns to the center */
    justify-self: center;
}

.footer-links a {
    display: inline-block;
    color: #1e3a5f;
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 600;
    padding: 0.4rem 1rem;
    margin: 0;
    border-radius: 50px;
    background: linear-gradient(135deg, #ffffff 0%, #e6e6e6 100%);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}

.footer-links a:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
    filter: brightness(1.1);
}



.footer-social {
    display: flex;
    align-items: center;
    /* Ensure it aligns to the right */
    justify-self: end;
}

.footer-social a svg {
    width: 32px;
    /* Increased from 24px */
    height: 32px;
    transition: transform 0.3s ease;
}

.footer-social a {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #e0e0e0;
    transition: color 0.3s ease, transform 0.3s ease;
}

.footer-social a:hover {
    color: #fff;
    transform: translateY(-2px);
    filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.5));
    /* Icon glow */
}

/* Footer Responsive Styles */
@media (max-width: 768px) {
    footer {
        /* === CONTROL MOBILE FOOTER HEIGHT === */
        padding: 1rem 1rem;
        /* Adjust padding for mobile height */
        /* === NEW: Center content vertically === */
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .footer-container {
        display: flex;
        flex-direction: column;
        text-align: center;
        gap: 1rem;
    }

    .footer-left,
    .footer-links,
    .footer-legal {
        justify-self: auto;
        /* Reset grid alignment for flex */
    }

    .footer-left {
        order: 3;
    }

    .footer-links {
        flex-direction: row;
        justify-content: center;
        gap: 1.5rem;
    }
}

/* === NEW: Mobile Optimization for Reports === */
@media (max-width: 768px) {
    .report-block {
        padding: 1rem 0.8rem;
        /* Reduced horizontal padding */
    }

    .report-block .report-quote {
        padding: 1rem 0.5rem;
        /* Further reduced for quote */
    }
}

/* === NEW: Responsive Visibility Helpers === */
@media (max-width: 768px) {
    .desktop-only {
        display: none !important;
    }
}

@media (min-width: 769px) {
    .mobile-only {
        display: none !important;
    }
}

/* === NEW: Note Box Style === */
.note-box {
    background-color: #fffbe6;
    border: 1px solid #000;
    padding: 1rem 0.5rem;
    margin: 1.5rem 0;
    border-radius: 4px;
    color: #000;
}

.note-box h5 {
    margin-bottom: 0;
    border-bottom: none;
    padding-bottom: 0;
}

/* === MAJMUAT CONTENT STYLES === */
.majmuat-container {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    margin-top: 2rem;
}

.majmuat-card {
    background-color: #e8eef5;
    /* Light yellow color box */
    border-radius: 8px;
    padding: 1rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.majmuat-card:last-child {
    margin-bottom: 0;
}

.majmuat-text {
    font-size: 0.92rem;
    /* Reduced from 1.05rem */
    line-height: 1.45;
    /* Reduced from 1.6 */
    color: #000;
    /* Changed to pure black */
    /* Slightly darker for contrast with smaller text */
    margin-bottom: 0.8rem;
    padding: 0 0.5rem;
    /* Very small side margins */
}

.majmuat-text strong {
    color: #1e3a5f;
    font-weight: 700;
    margin-right: 0.5rem;
}

.majmuat-images {
    display: flex;
    gap: 0.5rem;
    /* Reduced gap for collage feel */
    flex-wrap: wrap;
    margin-top: 1rem;
    justify-content: flex-start;
    /* Aligns items to start (collage like) instead of center */
}

.majmuat-images img {
    max-width: 100%;
    height: auto;
    object-fit: cover;
    /* Ensures images cover the area without distorting if we set dimensions */
    max-height: 350px;
    /* Kept reasonable max height */
    border-radius: 4px;
    /* Slightly sharper corners for collage */
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    background-color: #fff;
    border: 1px solid #ddd;
    /* Removed hover transform */
}

.majmuat-text a {
    word-break: break-all;
}

/* === NEW: Scroll Margin for Sections === */
section,
.content-card,
h2 {
    scroll-margin-top: 100px;
}

@media (max-width: 1200px) {

    section,
    .content-card,
    h2 {
        scroll-margin-top: 85px;
    }
}


.majmuat-images img {
    height: auto;
    width: auto;
    max-width: 100%;
    /* Let the image size itself naturally, constrained by container width */
    object-fit: contain;
    /* Ensure the full image is visible */
    /* ... other styles inherited or set above */
}

/* === NEW: Citation Linking Styles === */
.citation-marker {
    cursor: pointer;
    color: #1e3a5f;
    transition: color 0.3s ease;
}

.citation-marker:hover {
    text-decoration: underline;
    color: #0056b3;
}

/* Highlight animation for table row */
@keyframes highlight-fade {
    0% {
        background-color: #fff9c4;
    }

    75% {
        background-color: #fff9c4;
        /* Stay highlighted */
    }

    100% {
        background-color: transparent;
    }
}

.highlight-row {
    animation: highlight-fade 6s ease-out forwards;
}

/* === NEW: Caste Survey Specific Styles === */
#caste-survey .report-block,
#caste-survey .report-block:nth-of-type(even) {
    border-left: none;
    border-right: none;
    border: none;
    border-radius: 0;
    background-color: transparent;
    padding: 0;
    margin-bottom: 1rem;
}

#caste-survey .report-block ul {
    margin-left: 1.2rem;
    margin-bottom: 0.5rem;
}

#caste-survey .report-block li {
    line-height: 1.3;
    margin-bottom: 0.2rem;
    color: #000;
}

#caste-survey,
#caste-survey p,
#caste-survey li {
    color: #000 !important;
}

#caste-survey h5 {
    color: #1e3a5f !important;
    font-size: 1.4rem;
    margin-top: 1.5rem;
    margin-bottom: 0.5rem;
}

#caste-survey .report-block p {
    margin-bottom: 0.5rem;
    line-height: 1.3;
    color: #000;
}

/* === NEW: Caste Survey Data Tables === */
.survey-table-container {
    overflow-x: auto;
    margin-top: 1rem;
    margin-bottom: 1.5rem;
    /* border-radius removed */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}

.caste-survey-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
    background-color: #fff;
    min-width: 600px;
    /* Ensure it scrolls on mobile */
}

.caste-survey-table th,
.caste-survey-table td {
    padding: 10px;
    text-align: center;
    border: 1px solid #ddd;
    color: #333;
}

.caste-survey-table thead tr {
    background-color: #1e3a5f;
    color: #ffffff;
}

.caste-survey-table thead th {
    font-weight: 600;
    vertical-align: middle;
    color: #ffffff;
    /* Explicitly white */
}

/* Make the first column sticky or just left aligned */
.caste-survey-table td:first-child,
.caste-survey-table th:first-child {
    text-align: left;
    font-weight: 600;
}

/* Background removed for even rows to make them white */
.caste-survey-table tbody tr:nth-of-type(even) {
    background-color: transparent;
}

/* explicit hover states to prevent highlighting/flickering */
.caste-survey-table tbody tr:hover {
    background-color: #fff;
}

.caste-survey-table tbody tr:nth-of-type(even):hover {
    background-color: #fff;
}

/* Specific highlight for Bhumihar row */
.caste-survey-table tbody tr.highlight-row {
    background-color: #fff3e0 !important;
    /* Light orange highlight */
    font-weight: 500;
}

/* === NEW: Mools Table Styles === */
.mools-table-container {
    max-height: 480px;
    /* Approx 10 rows (assuming ~40px per row) + header */
    overflow-y: auto;
    border: 1px solid #ddd;
    margin-top: 20px;
}

.mools-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    /* Fix column widths */
}

.mools-table th,
.mools-table td {
    padding: 12px 15px;
    text-align: left;
    border-bottom: 1px solid #ccc;
    /* Horizontal grid only */
    border-top: none;
    border-left: none;
    border-right: none;
    word-wrap: break-word;
    /* Allow text to wrap */
    color: #000;
}

.mools-table th {
    background-color: #1e3a5f;
    /* Theme Blue */
    color: #ffffff;
    font-weight: 600;
    position: sticky;
    top: 0;
    z-index: 10;
}

.mools-table tr:hover {
    background-color: #e8eef5;
}

/* Column Widths */
.mools-table th:nth-child(1),
.mools-table td:nth-child(1) {
    width: 12%;
}

/* Serial Number */
.mools-table th:nth-child(2),
.mools-table td:nth-child(2) {
    width: 28%;
}

/* Mool */
.mools-table th:nth-child(3),
.mools-table td:nth-child(3) {
    width: 30%;
}

/* Gotra */
.mools-table th:nth-child(4),
.mools-table td:nth-child(4) {
    width: 30%;
}

/* Surname */


@media screen and (max-width: 768px) {
    .mools-table-container {
        overflow-x: auto;
    }

    .mools-table th,
    .mools-table td {
        padding: 8px 5px;
        /* Tighter padding */
        font-size: 0.9rem;
    }

    .mools-table {
        min-width: 400px;
        /* Reduced to allow fitting on larger phones */
    }
}

/* === NEW: Reduce explore image size on desktop === */
@media (min-width: 769px) {
    #home-explore .article-image {
        width: 60%;
    }
}