:root {
        --paper: #f4ece1; 
        --royal-burgundy: #4a0404; 
        --border-gold: #b8860b; 
        --text-main: #2c2c2c; 
    }

    .timeline-page-wrapper {
        background-color: #dcd3c1;
        padding-bottom: 60px;
    }

    .sticky-dynasty-nav {
        position: sticky;
        top: 0; 
        background: var(--royal-burgundy);
        z-index: 998;
        padding: 10px 0;
        box-shadow: 0 4px 10px rgba(0,0,0,0.2);
        border-bottom: 2px solid var(--border-gold);
    }

    .sticky-dynasty-nav ul {
        display: flex;
        justify-content: center;
        list-style: none;
        margin: 0;
        padding: 0;
        gap: 15px;
        flex-wrap: wrap;
    }

    .sticky-dynasty-nav a {
        color: #fff;
        text-decoration: none;
        font-size: 0.9rem;
        font-weight: bold;
        padding: 5px 12px;
        border-radius: 20px;
        transition: 0.3s;
        border: 1px solid transparent;
    }

    .sticky-dynasty-nav a:hover, 
    .sticky-dynasty-nav a.active {
        background: var(--border-gold);
        color: var(--royal-burgundy);
        border-color: #fff;
    }

    .main-container {
        max-width: 950px;
        margin: 40px auto;
        background-color: var(--paper);
        padding: 60px 40px;
        box-shadow: 0 0 40px rgba(0,0,0,0.2);
        border-left: 2px solid var(--border-gold);
        border-right: 2px solid var(--border-gold);
        min-height: 100vh;
        font-family: 'Times New Roman', serif;
    }

    .timeline-header {
        text-align: center;
        border-bottom: 2px solid var(--royal-burgundy);
        padding-bottom: 30px;
        margin-bottom: 50px;
    }

    .timeline-header h1 {
        font-size: 2.5rem;
        color: var(--royal-burgundy);
        margin: 0;
        text-transform: uppercase;
    }

    .dynasty-section { 
        margin-bottom: 80px; 
        scroll-margin-top: 100px; 
    }

    .dynasty-title {
        background: var(--royal-burgundy);
        color: #fff;
        padding: 15px;
        text-align: center;
        font-size: 1.8rem;
        border-radius: 4px;
        margin-bottom: 40px;
    }

    /* სექციის სათაურის ლინკის სტილი */
    .dynasty-title a {
        color: #fff;
        text-decoration: none;
        transition: 0.3s;
    }

    .dynasty-title a:hover {
        color: var(--border-gold);
    }

    .timeline { position: relative; max-width: 800px; margin: 0 auto; }

    .timeline::after {
        content: '';
        position: absolute;
        width: 2px;
        background: var(--border-gold);
        top: 0;
        bottom: 0;
        left: 50%;
        margin-left: -1px;
    }

    .king-item {
        padding: 15px 40px;
        position: relative;
        width: 50%;
        box-sizing: border-box;
    }

    .king-item::after {
        content: '';
        position: absolute;
        width: 12px;
        height: 12px;
        right: -6px;
        background: var(--paper);
        border: 2px solid var(--royal-burgundy);
        top: 50%;
        transform: translateY(-50%);
        border-radius: 50%;
        z-index: 1;
    }

    .left { left: 0; }
    .right { left: 50%; }
    .right::after { left: -6px; }

    .content {
        padding: 20px;
        background: #fff;
        border-radius: 10px;
        border: 1px solid #e0d5c5;
        text-align: center !important; 
        display: flex;
        flex-direction: column;
        align-items: center;
        transition: 0.3s;
    }

    .content h3 { 
        margin: 0; 
        color: var(--royal-burgundy); 
        font-size: 1.15rem;
    }

    .content span { 
        display: inline-block !important;
        margin-top: 10px;
        background-color: var(--royal-burgundy); 
        color: #ffffff !important; 
        padding: 4px 12px;
        border-radius: 15px;
        font-weight: bold; 
        font-size: 0.9rem; 
    }

    @media screen and (max-width: 700px) {
        .timeline::after { left: 20px; }
        .king-item { width: 100%; padding-left: 50px; }
        .king-item::after { left: 14px; }
        .right { left: 0%; }
    }