/**
 * ============================================================
 * KCGF - Infographics & Timeline Stylesheet
 * File: assets/css/infographics.css
 * Version: 1.0.0
 *
 * Components:
 * 1. Vertical Timeline
 * 2. Horizontal Timeline
 * 3. Circular Infographic
 * 4. Milestone Cards
 * 5. Statistics Counters
 * 6. Journey Steps
 * 7. Icon Infographic
 * 8. Progress Timeline
 * 9. Achievement Cards
 * 10. Responsive Layouts
 * ============================================================
 */


/* ============================================================
   1. INFOGRAPHIC DESIGN TOKENS
   Uses global variables from style.css
   ============================================================ */

:root {
    --kcgf-info-orange: var(--kcgf-orange, #FF6B00);
    --kcgf-info-blue: var(--kcgf-blue, #164B78);
    --kcgf-info-teal: var(--kcgf-teal, #27B6B1);
    --kcgf-info-green: var(--kcgf-green, #075E4D);
    --kcgf-info-cream: var(--kcgf-cream, #FFF9EF);

    --kcgf-info-text: var(--kcgf-text, #263238);
    --kcgf-info-muted: var(--kcgf-text-muted, #718096);

    --kcgf-info-border: rgba(22, 75, 120, 0.13);
    --kcgf-info-shadow:
        0 12px 35px rgba(22, 75, 120, 0.09);

    --kcgf-info-radius: 20px;
    --kcgf-info-radius-sm: 12px;
}


/* ============================================================
   2. INFOGRAPHIC COMMON
   ============================================================ */

.kcgf-infographic {
    position: relative;
    width: 100%;
    min-width: 0;
    isolation: isolate;
}

.kcgf-infographic * {
    box-sizing: border-box;
}

.kcgf-infographic-header {
    max-width: 780px;
    margin: 0 auto 48px;
    text-align: center;
}

.kcgf-infographic-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    padding: 7px 15px;
    border: 1px solid rgba(255, 107, 0, 0.2);
    border-radius: 50px;
    background: rgba(255, 107, 0, 0.08);
    color: var(--kcgf-info-orange);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
}

.kcgf-infographic-heading {
    margin: 0 0 14px;
    color: var(--kcgf-info-blue);
    font-size: clamp(1.8rem, 4vw, 2.8rem);
    font-weight: 800;
    line-height: 1.2;
}

.kcgf-infographic-description {
    max-width: 680px;
    margin: 0 auto;
    color: var(--kcgf-info-muted);
    font-size: 1rem;
    line-height: 1.8;
}


/* ============================================================
   3. VERTICAL TIMELINE
   ============================================================ */

.kcgf-timeline {
    position: relative;
    width: 100%;
    max-width: 1050px;
    margin-inline: auto;
    padding: 20px 0;
}

.kcgf-timeline::before {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 3px;
    border-radius: 5px;
    background: linear-gradient(
        to bottom,
        var(--kcgf-info-orange),
        var(--kcgf-info-teal),
        var(--kcgf-info-blue)
    );
    content: "";
    transform: translateX(-50%);
}

.kcgf-timeline-item {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 70px minmax(0, 1fr);
    align-items: center;
    gap: 18px;
    margin-bottom: 45px;
}

.kcgf-timeline-item:last-child {
    margin-bottom: 0;
}

.kcgf-timeline-content {
    position: relative;
    padding: 25px;
    border: 1px solid var(--kcgf-info-border);
    border-radius: var(--kcgf-info-radius);
    background: var(--kcgf-card-bg, #fff);
    box-shadow: var(--kcgf-info-shadow);
    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

.kcgf-timeline-content:hover {
    transform: translateY(-5px);
    box-shadow: 0 18px 42px rgba(22, 75, 120, 0.14);
}

.kcgf-timeline-item:nth-child(odd) .kcgf-timeline-content {
    grid-column: 1;
    text-align: right;
}

.kcgf-timeline-item:nth-child(odd) .kcgf-timeline-marker {
    grid-column: 2;
    grid-row: 1;
}

.kcgf-timeline-item:nth-child(odd)::after {
    grid-column: 3;
}

.kcgf-timeline-item:nth-child(even) .kcgf-timeline-content {
    grid-column: 3;
    grid-row: 1;
    text-align: left;
}

.kcgf-timeline-item:nth-child(even) .kcgf-timeline-marker {
    grid-column: 2;
    grid-row: 1;
}

.kcgf-timeline-marker {
    z-index: 2;
    display: flex;
    width: 64px;
    height: 64px;
    align-items: center;
    justify-content: center;
    margin-inline: auto;
    border: 6px solid var(--kcgf-info-cream);
    border-radius: 50%;
    background: var(--kcgf-info-orange);
    color: #fff;
    font-size: 1.2rem;
    box-shadow: 0 0 0 2px rgba(255, 107, 0, 0.25);
}

.kcgf-timeline-item:nth-child(3n + 2) .kcgf-timeline-marker {
    background: var(--kcgf-info-blue);
    box-shadow: 0 0 0 2px rgba(22, 75, 120, 0.2);
}

.kcgf-timeline-item:nth-child(3n) .kcgf-timeline-marker {
    background: var(--kcgf-info-teal);
    box-shadow: 0 0 0 2px rgba(39, 182, 177, 0.2);
}

.kcgf-timeline-year {
    display: inline-block;
    margin-bottom: 10px;
    color: var(--kcgf-info-orange);
    font-size: 1.15rem;
    font-weight: 800;
}

.kcgf-timeline-title {
    margin: 0 0 10px;
    color: var(--kcgf-info-blue);
    font-size: 1.25rem;
    font-weight: 750;
}

.kcgf-timeline-text {
    margin: 0;
    color: var(--kcgf-info-muted);
    font-size: 0.95rem;
    line-height: 1.75;
}

.kcgf-timeline-image {
    display: block;
    width: 100%;
    max-height: 220px;
    margin-top: 16px;
    border-radius: 12px;
    object-fit: cover;
}


/* ============================================================
   4. TIMELINE WITH IMAGE RIBBON
   ============================================================ */

.kcgf-ribbon-timeline {
    position: relative;
    max-width: 950px;
    margin-inline: auto;
    padding: 10px 0;
}

.kcgf-ribbon-item {
    position: relative;
    display: grid;
    grid-template-columns: 110px minmax(0, 1fr);
    gap: 24px;
    margin-bottom: 24px;
}

.kcgf-ribbon-year {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 110px;
    padding: 15px;
    border-radius: 16px;
    background: var(--kcgf-info-orange);
    color: #fff;
    font-size: 1.2rem;
    font-weight: 800;
    text-align: center;
}

.kcgf-ribbon-item:nth-child(3n + 2) .kcgf-ribbon-year {
    background: var(--kcgf-info-blue);
}

.kcgf-ribbon-item:nth-child(3n) .kcgf-ribbon-year {
    background: var(--kcgf-info-teal);
}

.kcgf-ribbon-content {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 22px 26px;
    border: 1px solid var(--kcgf-info-border);
    border-radius: 16px;
    background: var(--kcgf-card-bg, #fff);
    box-shadow: var(--kcgf-info-shadow);
}

.kcgf-ribbon-content h3 {
    margin: 0 0 8px;
    color: var(--kcgf-info-blue);
    font-size: 1.2rem;
}

.kcgf-ribbon-content p {
    margin: 0;
    color: var(--kcgf-info-muted);
    line-height: 1.7;
}


/* ============================================================
   5. HORIZONTAL TIMELINE
   ============================================================ */

.kcgf-horizontal-timeline {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 22px;
    position: relative;
    padding-top: 35px;
}

.kcgf-horizontal-timeline::before {
    position: absolute;
    top: 48px;
    right: 8%;
    left: 8%;
    height: 3px;
    background: linear-gradient(
        to right,
        var(--kcgf-info-orange),
        var(--kcgf-info-teal),
        var(--kcgf-info-blue)
    );
    content: "";
}

.kcgf-horizontal-item {
    position: relative;
    z-index: 1;
    text-align: center;
}

.kcgf-horizontal-marker {
    display: flex;
    width: 48px;
    height: 48px;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    border: 5px solid var(--kcgf-info-cream);
    border-radius: 50%;
    background: var(--kcgf-info-orange);
    color: #fff;
    font-weight: 800;
    box-shadow: 0 0 0 2px var(--kcgf-info-orange);
}

.kcgf-horizontal-item:nth-child(even) .kcgf-horizontal-marker {
    background: var(--kcgf-info-blue);
    box-shadow: 0 0 0 2px var(--kcgf-info-blue);
}

.kcgf-horizontal-card {
    padding: 20px 15px;
    border: 1px solid var(--kcgf-info-border);
    border-radius: 16px;
    background: var(--kcgf-card-bg, #fff);
    box-shadow: var(--kcgf-info-shadow);
}

.kcgf-horizontal-card h3 {
    margin: 0 0 8px;
    color: var(--kcgf-info-blue);
    font-size: 1.05rem;
}

.kcgf-horizontal-card p {
    margin: 0;
    color: var(--kcgf-info-muted);
    font-size: 0.9rem;
    line-height: 1.7;
}


/* ============================================================
   6. CIRCULAR INFOGRAPHIC
   ============================================================ */

.kcgf-circle-infographic {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 30px;
    align-items: stretch;
}

.kcgf-circle-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.kcgf-circle-icon {
    position: relative;
    display: flex;
    width: 150px;
    height: 150px;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    border: 8px solid rgba(255, 107, 0, 0.12);
    border-radius: 50%;
    background: linear-gradient(
        145deg,
        #fff,
        var(--kcgf-info-cream)
    );
    color: var(--kcgf-info-orange);
    font-size: 2.6rem;
    box-shadow:
        0 15px 35px rgba(22, 75, 120, 0.1),
        inset 0 0 20px rgba(255, 107, 0, 0.06);
    transition:
        transform 0.35s ease,
        border-color 0.35s ease;
}

.kcgf-circle-item:nth-child(3n + 2) .kcgf-circle-icon {
    border-color: rgba(22, 75, 120, 0.14);
    color: var(--kcgf-info-blue);
}

.kcgf-circle-item:nth-child(3n) .kcgf-circle-icon {
    border-color: rgba(39, 182, 177, 0.16);
    color: var(--kcgf-info-teal);
}

.kcgf-circle-item:hover .kcgf-circle-icon {
    transform: translateY(-8px) rotate(5deg) scale(1.04);
}

.kcgf-circle-item h3 {
    margin: 0 0 8px;
    color: var(--kcgf-info-blue);
    font-size: 1.2rem;
}

.kcgf-circle-item p {
    max-width: 280px;
    margin: 0;
    color: var(--kcgf-info-muted);
    font-size: 0.92rem;
    line-height: 1.7;
}


/* ============================================================
   7. CIRCULAR PROCESS DIAGRAM
   ============================================================ */

.kcgf-process-circle {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
    align-items: center;
}

.kcgf-process-step {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.kcgf-process-number {
    display: flex;
    width: 105px;
    height: 105px;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
    border: 8px solid rgba(255, 107, 0, 0.13);
    border-radius: 50%;
    background: var(--kcgf-info-orange);
    color: #fff;
    font-size: 2rem;
    font-weight: 800;
    box-shadow: 0 12px 28px rgba(255, 107, 0, 0.2);
}

.kcgf-process-step:nth-child(4n + 2) .kcgf-process-number {
    background: var(--kcgf-info-blue);
    border-color: rgba(22, 75, 120, 0.13);
}

.kcgf-process-step:nth-child(4n + 3) .kcgf-process-number {
    background: var(--kcgf-info-teal);
    border-color: rgba(39, 182, 177, 0.13);
}

.kcgf-process-step:nth-child(4n) .kcgf-process-number {
    background: var(--kcgf-info-green);
    border-color: rgba(7, 94, 77, 0.13);
}

.kcgf-process-step h3 {
    margin: 0 0 8px;
    color: var(--kcgf-info-blue);
    font-size: 1.05rem;
}

.kcgf-process-step p {
    margin: 0;
    color: var(--kcgf-info-muted);
    font-size: 0.9rem;
    line-height: 1.7;
}


/* ============================================================
   8. STATISTICS / COUNTERS
   ============================================================ */

.kcgf-statistics {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
}

.kcgf-stat-card {
    position: relative;
    overflow: hidden;
    padding: 28px 20px;
    border: 1px solid var(--kcgf-info-border);
    border-radius: var(--kcgf-info-radius);
    background: var(--kcgf-card-bg, #fff);
    box-shadow: var(--kcgf-info-shadow);
    text-align: center;
    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

.kcgf-stat-card::before {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 5px;
    background: var(--kcgf-info-orange);
    content: "";
}

.kcgf-stat-card:nth-child(4n + 2)::before {
    background: var(--kcgf-info-blue);
}

.kcgf-stat-card:nth-child(4n + 3)::before {
    background: var(--kcgf-info-teal);
}

.kcgf-stat-card:nth-child(4n)::before {
    background: var(--kcgf-info-green);
}

.kcgf-stat-card:hover {
    transform: translateY(-7px);
    box-shadow: 0 18px 40px rgba(22, 75, 120, 0.14);
}

.kcgf-stat-icon {
    display: flex;
    width: 55px;
    height: 55px;
    align-items: center;
    justify-content: center;
    margin: 0 auto 15px;
    border-radius: 16px;
    background: rgba(255, 107, 0, 0.1);
    color: var(--kcgf-info-orange);
    font-size: 1.5rem;
}

.kcgf-stat-number {
    display: block;
    margin-bottom: 8px;
    color: var(--kcgf-info-blue);
    font-size: clamp(1.8rem, 3vw, 2.7rem);
    font-weight: 850;
    line-height: 1.1;
}

.kcgf-stat-label {
    display: block;
    color: var(--kcgf-info-muted);
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.5;
}

.kcgf-stat-note {
    display: block;
    margin-top: 8px;
    color: var(--kcgf-info-muted);
    font-size: 0.78rem;
}


/* ============================================================
   9. MILESTONE CARDS
   ============================================================ */

.kcgf-milestone-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
}

.kcgf-milestone-card {
    position: relative;
    overflow: hidden;
    padding: 28px;
    border: 1px solid var(--kcgf-info-border);
    border-radius: var(--kcgf-info-radius);
    background: var(--kcgf-card-bg, #fff);
    box-shadow: var(--kcgf-info-shadow);
    transition:
        transform 0.3s ease,
        border-color 0.3s ease;
}

.kcgf-milestone-card:hover {
    transform: translateY(-6px);
    border-color: rgba(255, 107, 0, 0.35);
}

.kcgf-milestone-year {
    display: inline-block;
    margin-bottom: 18px;
    padding: 8px 14px;
    border-radius: 50px;
    background: rgba(255, 107, 0, 0.1);
    color: var(--kcgf-info-orange);
    font-size: 0.9rem;
    font-weight: 800;
}

.kcgf-milestone-card h3 {
    margin: 0 0 12px;
    color: var(--kcgf-info-blue);
    font-size: 1.2rem;
}

.kcgf-milestone-card p {
    margin: 0;
    color: var(--kcgf-info-muted);
    font-size: 0.94rem;
    line-height: 1.75;
}

.kcgf-milestone-icon {
    display: flex;
    width: 58px;
    height: 58px;
    align-items: center;
    justify-content: center;
    margin-bottom: 18px;
    border-radius: 18px;
    background: rgba(22, 75, 120, 0.08);
    color: var(--kcgf-info-blue);
    font-size: 1.6rem;
}


/* ============================================================
   10. JOURNEY STEPS
   ============================================================ */

.kcgf-journey {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
}

.kcgf-journey-step {
    position: relative;
    padding: 25px 20px;
    border-radius: 18px;
    background: var(--kcgf-info-cream);
    text-align: center;
}

.kcgf-journey-step:nth-child(even) {
    background: rgba(39, 182, 177, 0.09);
}

.kcgf-journey-step:nth-child(3n) {
    background: rgba(22, 75, 120, 0.07);
}

.kcgf-journey-index {
    display: flex;
    width: 48px;
    height: 48px;
    align-items: center;
    justify-content: center;
    margin: 0 auto 15px;
    border-radius: 50%;
    background: var(--kcgf-info-orange);
    color: #fff;
    font-size: 1.1rem;
    font-weight: 800;
}

.kcgf-journey-step h3 {
    margin: 0 0 10px;
    color: var(--kcgf-info-blue);
    font-size: 1.05rem;
}

.kcgf-journey-step p {
    margin: 0;
    color: var(--kcgf-info-muted);
    font-size: 0.9rem;
    line-height: 1.7;
}


/* ============================================================
   11. ACHIEVEMENT / HIGHLIGHT CARDS
   ============================================================ */

.kcgf-achievement-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
}

.kcgf-achievement-card {
    position: relative;
    display: flex;
    min-height: 220px;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden;
    padding: 26px;
    border-radius: 20px;
    background: linear-gradient(
        140deg,
        var(--kcgf-info-blue),
        #23648f
    );
    color: #fff;
    box-shadow: 0 14px 35px rgba(22, 75, 120, 0.16);
    transition: transform 0.3s ease;
}

.kcgf-achievement-card:nth-child(3n + 2) {
    background: linear-gradient(
        140deg,
        #d95700,
        var(--kcgf-info-orange)
    );
}

.kcgf-achievement-card:nth-child(3n) {
    background: linear-gradient(
        140deg,
        #087c76,
        var(--kcgf-info-teal)
    );
}

.kcgf-achievement-card:hover {
    transform: translateY(-6px);
}

.kcgf-achievement-icon {
    font-size: 2rem;
    opacity: 0.95;
}

.kcgf-achievement-card h3 {
    margin: 20px 0 8px;
    color: #fff;
    font-size: 1.25rem;
}

.kcgf-achievement-card p {
    margin: 0;
    color: rgba(255, 255, 255, 0.88);
    font-size: 0.92rem;
    line-height: 1.7;
}


/* ============================================================
   12. INFOGRAPHIC WITH CENTRAL IMAGE
   ============================================================ */

.kcgf-central-infographic {
    position: relative;
    display: grid;
    grid-template-columns: 1fr minmax(220px, 300px) 1fr;
    align-items: center;
    gap: 30px;
}

.kcgf-central-image {
    position: relative;
    z-index: 2;
    width: 100%;
    aspect-ratio: 1;
    overflow: hidden;
    border: 10px solid var(--kcgf-info-cream);
    border-radius: 50%;
    background: var(--kcgf-info-cream);
    box-shadow: 0 18px 45px rgba(22, 75, 120, 0.15);
}

.kcgf-central-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.kcgf-central-list {
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.kcgf-central-point {
    padding: 18px;
    border: 1px solid var(--kcgf-info-border);
    border-radius: 16px;
    background: var(--kcgf-card-bg, #fff);
    box-shadow: var(--kcgf-info-shadow);
}

.kcgf-central-point h3 {
    margin: 0 0 6px;
    color: var(--kcgf-info-blue);
    font-size: 1.05rem;
}

.kcgf-central-point p {
    margin: 0;
    color: var(--kcgf-info-muted);
    font-size: 0.88rem;
    line-height: 1.65;
}


/* ============================================================
   13. PROGRESS / DEVELOPMENT TIMELINE
   ============================================================ */

.kcgf-progress-list {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.kcgf-progress-item {
    display: grid;
    grid-template-columns: 145px minmax(0, 1fr);
    align-items: center;
    gap: 22px;
}

.kcgf-progress-label {
    color: var(--kcgf-info-blue);
    font-weight: 750;
}

.kcgf-progress-track {
    width: 100%;
    height: 12px;
    overflow: hidden;
    border-radius: 50px;
    background: rgba(22, 75, 120, 0.09);
}

.kcgf-progress-fill {
    display: block;
    width: var(--kcgf-progress, 0%);
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(
        90deg,
        var(--kcgf-info-orange),
        var(--kcgf-info-teal)
    );
}


/* ============================================================
   14. INFOGRAPHIC IMAGE CARDS
   ============================================================ */

.kcgf-info-image-card {
    position: relative;
    overflow: hidden;
    border-radius: 20px;
    background: var(--kcgf-card-bg, #fff);
    box-shadow: var(--kcgf-info-shadow);
}

.kcgf-info-image-card img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.kcgf-info-image-card:hover img {
    transform: scale(1.05);
}

.kcgf-info-image-body {
    padding: 22px;
}

.kcgf-info-image-body h3 {
    margin: 0 0 8px;
    color: var(--kcgf-info-blue);
    font-size: 1.15rem;
}

.kcgf-info-image-body p {
    margin: 0;
    color: var(--kcgf-info-muted);
    font-size: 0.92rem;
    line-height: 1.7;
}


/* ============================================================
   15. INFOGRAPHIC BADGES
   ============================================================ */

.kcgf-info-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 7px 13px;
    border-radius: 50px;
    background: rgba(255, 107, 0, 0.1);
    color: var(--kcgf-info-orange);
    font-size: 0.78rem;
    font-weight: 750;
}

.kcgf-info-badge-blue {
    background: rgba(22, 75, 120, 0.09);
    color: var(--kcgf-info-blue);
}

.kcgf-info-badge-teal {
    background: rgba(39, 182, 177, 0.12);
    color: var(--kcgf-info-green);
}


/* ============================================================
   16. DARK THEME SUPPORT
   ============================================================ */

[data-theme="dark"] .kcgf-timeline-content,
[data-theme="dark"] .kcgf-ribbon-content,
[data-theme="dark"] .kcgf-horizontal-card,
[data-theme="dark"] .kcgf-stat-card,
[data-theme="dark"] .kcgf-milestone-card,
[data-theme="dark"] .kcgf-central-point,
[data-theme="dark"] .kcgf-info-image-card {
    background: var(--kcgf-card-bg, #1d2938);
    border-color: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .kcgf-infographic-heading,
[data-theme="dark"] .kcgf-timeline-title,
[data-theme="dark"] .kcgf-ribbon-content h3,
[data-theme="dark"] .kcgf-horizontal-card h3,
[data-theme="dark"] .kcgf-circle-item h3,
[data-theme="dark"] .kcgf-process-step h3,
[data-theme="dark"] .kcgf-stat-number,
[data-theme="dark"] .kcgf-milestone-card h3,
[data-theme="dark"] .kcgf-journey-step h3,
[data-theme="dark"] .kcgf-central-point h3 {
    color: var(--kcgf-text, #f4f6f8);
}

[data-theme="dark"] .kcgf-circle-icon {
    background: #202e3e;
    border-color: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .kcgf-journey-step {
    background: rgba(255, 255, 255, 0.05);
}

[data-theme="dark"] .kcgf-progress-track {
    background: rgba(255, 255, 255, 0.12);
}


/* ============================================================
   17. TABLET RESPONSIVE
   ============================================================ */

@media (max-width: 991px) {

    .kcgf-statistics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .kcgf-milestone-grid,
    .kcgf-achievement-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .kcgf-horizontal-timeline {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        row-gap: 30px;
    }

    .kcgf-horizontal-timeline::before {
        display: none;
    }

    .kcgf-process-circle,
    .kcgf-journey {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .kcgf-circle-infographic {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .kcgf-central-infographic {
        grid-template-columns: 1fr minmax(180px, 240px) 1fr;
        gap: 18px;
    }

}


/* ============================================================
   18. MOBILE RESPONSIVE
   ============================================================ */

@media (max-width: 767px) {

    /* Vertical timeline */

    .kcgf-timeline {
        padding-left: 0;
    }

    .kcgf-timeline::before {
        right: auto;
        left: 27px;
        transform: none;
    }

    .kcgf-timeline-item {
        grid-template-columns: 55px minmax(0, 1fr);
        gap: 12px;
        margin-bottom: 28px;
    }

    .kcgf-timeline-item:nth-child(odd) .kcgf-timeline-content,
    .kcgf-timeline-item:nth-child(even) .kcgf-timeline-content {
        grid-column: 2;
        grid-row: 1;
        text-align: left;
    }

    .kcgf-timeline-item:nth-child(odd) .kcgf-timeline-marker,
    .kcgf-timeline-item:nth-child(even) .kcgf-timeline-marker {
        grid-column: 1;
        grid-row: 1;
    }

    .kcgf-timeline-marker {
        width: 52px;
        height: 52px;
        border-width: 5px;
        font-size: 1rem;
    }

    .kcgf-timeline-content {
        padding: 20px;
    }

    /* Ribbon timeline */

    .kcgf-ribbon-item {
        grid-template-columns: 75px minmax(0, 1fr);
        gap: 12px;
    }

    .kcgf-ribbon-year {
        min-height: 90px;
        padding: 10px;
        font-size: 0.95rem;
    }

    .kcgf-ribbon-content {
        padding: 17px;
    }

    /* Circular infographic */

    .kcgf-circle-icon {
        width: 115px;
        height: 115px;
        font-size: 2rem;
        border-width: 6px;
    }

    /* Central infographic */

    .kcgf-central-infographic {
        grid-template-columns: 1fr;
    }

    .kcgf-central-image {
        width: min(230px, 70%);
        margin: 0 auto;
    }

    .kcgf-central-list {
        gap: 14px;
    }

    /* Progress */

    .kcgf-progress-item {
        grid-template-columns: 1fr;
        gap: 8px;
    }

}


/* ============================================================
   19. SMALL MOBILE
   ============================================================ */

@media (max-width: 575px) {

    .kcgf-infographic-header {
        margin-bottom: 30px;
    }

    .kcgf-statistics,
    .kcgf-milestone-grid,
    .kcgf-achievement-grid,
    .kcgf-horizontal-timeline,
    .kcgf-process-circle,
    .kcgf-journey {
        grid-template-columns: 1fr;
    }

    .kcgf-circle-infographic {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 24px 14px;
    }

    .kcgf-stat-card {
        padding: 23px 15px;
    }

    .kcgf-milestone-card {
        padding: 22px;
    }

    .kcgf-achievement-card {
        min-height: 190px;
    }

    .kcgf-horizontal-timeline {
        gap: 18px;
    }

    .kcgf-process-number {
        width: 85px;
        height: 85px;
        font-size: 1.6rem;
    }

    .kcgf-timeline-content {
        padding: 17px;
    }

    .kcgf-timeline-title {
        font-size: 1.1rem;
    }

}


/* ============================================================
   20. REDUCED MOTION
   ============================================================ */

@media (prefers-reduced-motion: reduce) {

    .kcgf-timeline-content,
    .kcgf-circle-icon,
    .kcgf-stat-card,
    .kcgf-milestone-card,
    .kcgf-achievement-card,
    .kcgf-info-image-card img {
        transition: none !important;
        transform: none !important;
    }

}


/* ============================================================
   END OF KCGF INFOGRAPHICS STYLESHEET
   ============================================================ */