```css
/* ============================================================
   RAEES IMPORT & EXPORT
   ULTRA PREMIUM TIMELINE COMPONENT SYSTEM
   ------------------------------------------------------------
   File: /assets/css/components/timeline.css
   Full Path:
   /public_html/assets/css/components/timeline.css

   Version: 1.0

   Used For:
   - Production Process
   - Export Process
   - Company Journey
   - Founder Experience Timeline
   - Product Processing Steps
   - Quality Process
   - Future Dynamic Process Sections

   Depends On:
   - variables.css
   - reset.css
   - typography.css
   - utilities.css
   - global.css
   - badges.css
   - cards.css
   ============================================================ */


/* ============================================================
   01. TIMELINE
   ============================================================ */

.timeline {
    position: relative;

    width: 100%;

    margin: 0;
    padding: 0;

    list-style: none;
}


/* ============================================================
   02. TIMELINE VERTICAL
   ============================================================ */

.timeline-vertical {
    position: relative;

    display: flex;

    flex-direction: column;

    gap: 0;

    padding-left: 72px;
}


/* ============================================================
   03. VERTICAL MAIN LINE
   ============================================================ */

.timeline-vertical::before {
    content: "";

    position: absolute;

    top: 18px;
    bottom: 18px;
    left: 25px;

    width: 1px;

    background:
        linear-gradient(
            180deg,
            transparent 0%,
            rgba(183, 138, 61, 0.30) 8%,
            rgba(183, 138, 61, 0.30) 92%,
            transparent 100%
        );
}


/* ============================================================
   04. TIMELINE ITEM
   ============================================================ */

.timeline-item {
    position: relative;

    width: 100%;

    padding-bottom:
        clamp(1.5rem, 4vw, 2.5rem);
}


/* ============================================================
   05. LAST TIMELINE ITEM
   ============================================================ */

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


/* ============================================================
   06. TIMELINE MARKER
   ============================================================ */

.timeline-marker {
    position: absolute;

    top: 0;
    left: -72px;

    z-index: 3;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    width: 50px;
    height: 50px;

    border:
        1px solid var(--border-gold);

    border-radius:
        var(--radius-circle);

    color:
        var(--color-secondary-dark);

    background:
        #ffffff;

    box-shadow:
        0 10px 28px rgba(183, 138, 61, 0.10);

    font-family:
        var(--font-ui);

    font-size:
        0.52rem;

    font-weight:
        var(--font-bold);

    line-height: 1;

    transition:
        color var(--transition),
        border-color var(--transition),
        background var(--transition),
        box-shadow var(--transition),
        transform var(--transition-premium);
}


/* ============================================================
   07. MARKER INNER RING
   ============================================================ */

.timeline-marker::before {
    content: "";

    position: absolute;

    inset: 5px;

    border:
        1px dashed rgba(183, 138, 61, 0.30);

    border-radius:
        inherit;

    pointer-events: none;

    transition:
        border-color var(--transition),
        transform var(--transition-premium);
}


/* ============================================================
   08. ITEM HOVER MARKER
   ============================================================ */

.timeline-item:hover
.timeline-marker {
    color:
        var(--color-primary-deep);

    border-color:
        rgba(183, 138, 61, 0.44);

    background:
        var(--gradient-gold);

    box-shadow:
        0 14px 34px rgba(183, 138, 61, 0.17);

    transform:
        scale(1.06);
}

.timeline-item:hover
.timeline-marker::before {
    border-color:
        rgba(11, 43, 32, 0.20);

    transform:
        rotate(20deg);
}


/* ============================================================
   09. TIMELINE MARKER ICON
   ============================================================ */

.timeline-marker-icon {
    position: relative;

    z-index: 2;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    line-height: 1;
}


/* ============================================================
   10. TIMELINE MARKER NUMBER
   ============================================================ */

.timeline-marker-number {
    position: relative;

    z-index: 2;

    font-variant-numeric:
        tabular-nums;
}


/* ============================================================
   11. TIMELINE CARD
   ============================================================ */

.timeline-card {
    position: relative;

    width: 100%;

    padding:
        clamp(1.25rem, 3vw, 1.8rem);

    border:
        1px solid var(--border-light);

    border-radius:
        var(--radius-xl);

    background:
        rgba(255, 255, 255, 0.97);

    box-shadow:
        0 12px 38px rgba(11, 43, 32, 0.045);

    overflow: hidden;

    isolation: isolate;

    transition:
        border-color var(--transition),
        box-shadow var(--transition-premium),
        transform var(--transition-premium);
}


/* ============================================================
   12. TIMELINE CARD GOLD LINE
   ============================================================ */

.timeline-card::before {
    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 3px;
    height: 100%;

    background:
        var(--gradient-gold);

    opacity: 0.42;

    transition:
        opacity var(--transition),
        width var(--transition);
}


/* ============================================================
   13. TIMELINE CARD GLOW
   ============================================================ */

.timeline-card::after {
    content: "";

    position: absolute;

    top: -110px;
    right: -100px;

    z-index: -1;

    width: 220px;
    height: 220px;

    border-radius:
        var(--radius-circle);

    background:
        radial-gradient(
            circle,
            rgba(183, 138, 61, 0.10),
            rgba(183, 138, 61, 0) 70%
        );

    opacity: 0;

    transition:
        opacity var(--transition-premium);
}


/* ============================================================
   14. TIMELINE CARD HOVER
   ============================================================ */

.timeline-item:hover
.timeline-card {
    border-color:
        rgba(183, 138, 61, 0.25);

    box-shadow:
        0 20px 50px rgba(11, 43, 32, 0.08);

    transform:
        translateY(-3px);
}

.timeline-item:hover
.timeline-card::before {
    width: 4px;

    opacity: 1;
}

.timeline-item:hover
.timeline-card::after {
    opacity: 1;
}


/* ============================================================
   15. TIMELINE META
   ============================================================ */

.timeline-meta {
    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap:
        8px
        var(--space-3);

    margin-bottom:
        var(--space-3);
}


/* ============================================================
   16. TIMELINE STEP
   ============================================================ */

.timeline-step {
    display: inline-flex;

    align-items: center;

    gap: 6px;

    color:
        var(--color-secondary-dark);

    font-family:
        var(--font-ui);

    font-size:
        0.44rem;

    font-weight:
        var(--font-bold);

    line-height: 1;

    letter-spacing:
        0.075em;

    text-transform:
        uppercase;
}


/* ============================================================
   17. TIMELINE STEP DOT
   ============================================================ */

.timeline-step::before {
    content: "";

    width: 5px;
    height: 5px;

    flex:
        0 0 5px;

    border-radius:
        var(--radius-circle);

    background:
        var(--color-secondary);
}


/* ============================================================
   18. TIMELINE DATE
   ============================================================ */

.timeline-date {
    display: inline-flex;

    align-items: center;

    gap: 6px;

    color:
        var(--text-muted);

    font-family:
        var(--font-ui);

    font-size:
        0.45rem;

    font-weight:
        var(--font-medium);

    line-height: 1.4;
}


/* ============================================================
   19. TIMELINE TITLE
   ============================================================ */

.timeline-title {
    margin: 0;

    color:
        var(--color-primary-deep);

    font-family:
        var(--font-heading);

    font-size:
        clamp(1.25rem, 2.5vw, 1.75rem);

    font-weight:
        var(--font-semibold);

    line-height:
        1.2;

    letter-spacing:
        -0.02em;
}


/* ============================================================
   20. TIMELINE DESCRIPTION
   ============================================================ */

.timeline-description {
    max-width: 720px;

    margin:
        var(--space-3)
        0
        0;

    color:
        var(--text-body);

    font-size:
        0.58rem;

    line-height:
        1.78;
}


/* ============================================================
   21. TIMELINE DETAILS
   ============================================================ */

.timeline-details {
    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap:
        8px
        var(--space-4);

    margin-top:
        var(--space-4);
}


/* ============================================================
   22. TIMELINE DETAIL
   ============================================================ */

.timeline-detail {
    display: inline-flex;

    align-items: center;

    gap: 7px;

    color:
        var(--text-muted);

    font-family:
        var(--font-ui);

    font-size:
        0.47rem;

    font-weight:
        var(--font-medium);

    line-height: 1.4;
}


/* ============================================================
   23. TIMELINE DETAIL ICON
   ============================================================ */

.timeline-detail-icon {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    color:
        var(--color-secondary-dark);

    font-size:
        0.44rem;
}


/* ============================================================
   24. TIMELINE TAGS
   ============================================================ */

.timeline-tags {
    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 7px;

    margin-top:
        var(--space-4);
}


/* ============================================================
   25. TIMELINE TAG
   ============================================================ */

.timeline-tag {
    display: inline-flex;

    align-items: center;

    min-height: 27px;

    padding:
        0
        10px;

    border:
        1px solid var(--border-light);

    border-radius:
        var(--radius-pill);

    color:
        var(--text-muted);

    background:
        var(--bg-soft);

    font-family:
        var(--font-ui);

    font-size:
        0.43rem;

    font-weight:
        var(--font-semibold);

    line-height: 1;
}


/* ============================================================
   26. GOLD TIMELINE TAG
   ============================================================ */

.timeline-tag-gold {
    color:
        var(--color-secondary-dark);

    border-color:
        var(--border-gold);

    background:
        var(--bg-gold-soft);
}


/* ============================================================
   27. TIMELINE ACTION
   ============================================================ */

.timeline-action {
    display: inline-flex;

    align-items: center;

    gap: 7px;

    margin-top:
        var(--space-4);

    color:
        var(--color-primary-deep);

    font-family:
        var(--font-ui);

    font-size:
        0.48rem;

    font-weight:
        var(--font-bold);

    line-height: 1;

    text-decoration: none;

    transition:
        color var(--transition);
}


/* ============================================================
   28. TIMELINE ACTION ICON
   ============================================================ */

.timeline-action-icon {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    color:
        var(--color-secondary-dark);

    transition:
        transform var(--transition);
}


/* ============================================================
   29. TIMELINE ACTION HOVER
   ============================================================ */

.timeline-action:hover {
    color:
        var(--color-secondary-dark);
}

.timeline-action:hover
.timeline-action-icon {
    transform:
        translateX(4px);
}


/* ============================================================
   30. FEATURED TIMELINE ITEM
   ============================================================ */

.timeline-item-featured
.timeline-card {
    border-color:
        rgba(183, 138, 61, 0.27);

    background:
        linear-gradient(
            145deg,
            #ffffff,
            rgba(250, 248, 242, 0.98)
        );

    box-shadow:
        0 16px 46px rgba(183, 138, 61, 0.07);
}


/* ============================================================
   31. FEATURED MARKER
   ============================================================ */

.timeline-item-featured
.timeline-marker {
    color:
        var(--color-primary-deep);

    border-color:
        rgba(183, 138, 61, 0.40);

    background:
        var(--gradient-gold);

    box-shadow:
        0 12px 30px rgba(183, 138, 61, 0.16);
}


/* ============================================================
   32. DARK TIMELINE CARD
   ============================================================ */

.timeline-card-dark {
    border-color:
        rgba(255, 255, 255, 0.09);

    background:
        linear-gradient(
            145deg,
            var(--color-primary-deep),
            var(--color-primary)
        );

    box-shadow:
        0 18px 50px rgba(0, 0, 0, 0.14);
}


/* ============================================================
   33. DARK TIMELINE TITLE
   ============================================================ */

.timeline-card-dark
.timeline-title {
    color:
        #ffffff;
}


/* ============================================================
   34. DARK TIMELINE DESCRIPTION
   ============================================================ */

.timeline-card-dark
.timeline-description {
    color:
        rgba(255, 255, 255, 0.52);
}


/* ============================================================
   35. DARK TIMELINE DATE
   ============================================================ */

.timeline-card-dark
.timeline-date {
    color:
        rgba(255, 255, 255, 0.38);
}


/* ============================================================
   36. DARK TIMELINE DETAIL
   ============================================================ */

.timeline-card-dark
.timeline-detail {
    color:
        rgba(255, 255, 255, 0.42);
}


/* ============================================================
   37. DARK TIMELINE TAG
   ============================================================ */

.timeline-card-dark
.timeline-tag {
    color:
        rgba(255, 255, 255, 0.48);

    border-color:
        rgba(255, 255, 255, 0.09);

    background:
        rgba(255, 255, 255, 0.045);
}


/* ============================================================
   38. DARK TIMELINE ACTION
   ============================================================ */

.timeline-card-dark
.timeline-action {
    color:
        #ffffff;
}


/* ============================================================
   39. DARK TIMELINE CARD HOVER
   ============================================================ */

.timeline-item:hover
.timeline-card-dark {
    border-color:
        rgba(212, 175, 104, 0.22);

    box-shadow:
        0 24px 58px rgba(0, 0, 0, 0.20);
}


/* ============================================================
   40. ALTERNATE TIMELINE
   ============================================================ */

.timeline-alternate {
    position: relative;

    display: grid;

    grid-template-columns:
        1fr 1fr;

    column-gap:
        clamp(4rem, 8vw, 7rem);

    row-gap:
        var(--space-6);

    padding: 0;
}


/* ============================================================
   41. ALTERNATE CENTER LINE
   ============================================================ */

.timeline-alternate::before {
    content: "";

    position: absolute;

    top: 0;
    bottom: 0;
    left: 50%;

    width: 1px;

    background:
        linear-gradient(
            180deg,
            transparent,
            rgba(183, 138, 61, 0.35) 8%,
            rgba(183, 138, 61, 0.35) 92%,
            transparent
        );

    transform:
        translateX(-50%);
}


/* ============================================================
   42. ALTERNATE ITEM
   ============================================================ */

.timeline-alternate
.timeline-item {
    padding-bottom: 0;
}


/* ============================================================
   43. ODD ALTERNATE ITEM
   ============================================================ */

.timeline-alternate
.timeline-item:nth-child(odd) {
    grid-column: 1;

    text-align: right;
}


/* ============================================================
   44. EVEN ALTERNATE ITEM
   ============================================================ */

.timeline-alternate
.timeline-item:nth-child(even) {
    grid-column: 2;
}


/* ============================================================
   45. ALTERNATE ODD MARKER
   ============================================================ */

.timeline-alternate
.timeline-item:nth-child(odd)
.timeline-marker {
    top: 22px;
    right:
        calc(
            clamp(2rem, 4vw, 3.5rem) * -1
            - 25px
        );

    left: auto;
}


/* ============================================================
   46. ALTERNATE EVEN MARKER
   ============================================================ */

.timeline-alternate
.timeline-item:nth-child(even)
.timeline-marker {
    top: 22px;
    left:
        calc(
            clamp(2rem, 4vw, 3.5rem) * -1
            - 25px
        );
}


/* ============================================================
   47. ALTERNATE ODD META
   ============================================================ */

.timeline-alternate
.timeline-item:nth-child(odd)
.timeline-meta,

.timeline-alternate
.timeline-item:nth-child(odd)
.timeline-details,

.timeline-alternate
.timeline-item:nth-child(odd)
.timeline-tags {
    justify-content:
        flex-end;
}


/* ============================================================
   48. ALTERNATE DESCRIPTION
   ============================================================ */

.timeline-alternate
.timeline-description {
    max-width: none;
}


/* ============================================================
   49. HORIZONTAL TIMELINE
   ============================================================ */

.timeline-horizontal {
    position: relative;

    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap:
        var(--space-4);

    padding-top:
        70px;
}


/* ============================================================
   50. HORIZONTAL MAIN LINE
   ============================================================ */

.timeline-horizontal::before {
    content: "";

    position: absolute;

    top: 25px;
    right: 8%;
    left: 8%;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(183, 138, 61, 0.34) 8%,
            rgba(183, 138, 61, 0.34) 92%,
            transparent
        );
}


/* ============================================================
   51. HORIZONTAL ITEM
   ============================================================ */

.timeline-horizontal
.timeline-item {
    padding-bottom: 0;
}


/* ============================================================
   52. HORIZONTAL MARKER
   ============================================================ */

.timeline-horizontal
.timeline-marker {
    top: -70px;
    left: 50%;

    transform:
        translateX(-50%);
}


/* ============================================================
   53. HORIZONTAL HOVER MARKER
   ============================================================ */

.timeline-horizontal
.timeline-item:hover
.timeline-marker {
    transform:
        translateX(-50%)
        scale(1.06);
}


/* ============================================================
   54. HORIZONTAL CARD
   ============================================================ */

.timeline-horizontal
.timeline-card {
    height: 100%;

    text-align: center;
}


/* ============================================================
   55. HORIZONTAL META
   ============================================================ */

.timeline-horizontal
.timeline-meta,

.timeline-horizontal
.timeline-details,

.timeline-horizontal
.timeline-tags {
    justify-content:
        center;
}


/* ============================================================
   56. PROCESS TIMELINE
   ============================================================ */

.process-timeline {
    counter-reset:
        process-step;
}


/* ============================================================
   57. PROCESS ITEM COUNTER
   ============================================================ */

.process-timeline
.timeline-item {
    counter-increment:
        process-step;
}


/* ============================================================
   58. AUTOMATIC PROCESS NUMBER
   ============================================================ */

.process-timeline
.timeline-marker-number::before {
    content:
        counter(process-step, decimal-leading-zero);
}


/* ============================================================
   59. PROCESS CARD
   ============================================================ */

.process-timeline
.timeline-card {
    padding:
        clamp(1.4rem, 3vw, 2rem);
}


/* ============================================================
   60. PROCESS STEP LABEL
   ============================================================ */

.process-step-label {
    display: inline-flex;

    align-items: center;

    gap: 7px;

    margin-bottom:
        var(--space-3);

    color:
        var(--color-secondary-dark);

    font-family:
        var(--font-ui);

    font-size:
        0.44rem;

    font-weight:
        var(--font-bold);

    line-height: 1;

    letter-spacing:
        0.08em;

    text-transform:
        uppercase;
}


/* ============================================================
   61. PROCESS STEP LABEL LINE
   ============================================================ */

.process-step-label::after {
    content: "";

    width: 26px;
    height: 1px;

    background:
        var(--border-gold);
}


/* ============================================================
   62. COMPACT TIMELINE
   ============================================================ */

.timeline-compact {
    padding-left:
        55px;
}


/* ============================================================
   63. COMPACT LINE
   ============================================================ */

.timeline-compact::before {
    left:
        18px;
}


/* ============================================================
   64. COMPACT MARKER
   ============================================================ */

.timeline-compact
.timeline-marker {
    left:
        -55px;

    width:
        37px;

    height:
        37px;

    font-size:
        0.45rem;
}


/* ============================================================
   65. COMPACT CARD
   ============================================================ */

.timeline-compact
.timeline-card {
    padding:
        var(--space-4);
}


/* ============================================================
   66. MINIMAL TIMELINE
   ============================================================ */

.timeline-minimal
.timeline-card {
    padding:
        0
        0
        var(--space-5);

    border: 0;

    border-radius: 0;

    background:
        transparent;

    box-shadow:
        none;

    overflow: visible;
}


/* ============================================================
   67. MINIMAL CARD DECORATIONS
   ============================================================ */

.timeline-minimal
.timeline-card::before,

.timeline-minimal
.timeline-card::after {
    display: none;
}


/* ============================================================
   68. MINIMAL CARD HOVER
   ============================================================ */

.timeline-minimal
.timeline-item:hover
.timeline-card {
    border: 0;

    box-shadow: none;

    transform: none;
}


/* ============================================================
   69. TIMELINE YEAR
   ============================================================ */

.timeline-year {
    display: inline-block;

    margin-bottom:
        var(--space-2);

    color:
        var(--color-secondary-dark);

    font-family:
        var(--font-heading);

    font-size:
        clamp(1.25rem, 2vw, 1.7rem);

    font-weight:
        var(--font-semibold);

    line-height: 1;
}


/* ============================================================
   70. TIMELINE CONNECTOR DOT
   ============================================================ */

.timeline-connector-dot {
    position: absolute;

    top: 50%;
    right: -4px;

    width: 7px;
    height: 7px;

    border-radius:
        var(--radius-circle);

    background:
        var(--color-secondary);

    box-shadow:
        0 0 0 5px rgba(183, 138, 61, 0.08);

    transform:
        translateY(-50%);
}


/* ============================================================
   71. TIMELINE PROGRESS
   ============================================================ */

.timeline-progress {
    position: absolute;

    top: 18px;
    bottom: 18px;
    left: 25px;

    z-index: 1;

    width: 2px;

    background:
        var(--gradient-gold);

    transform:
        scaleY(var(--timeline-progress, 0));

    transform-origin:
        top center;

    transition:
        transform 1s cubic-bezier(0.2, 0.7, 0.2, 1);
}


/* ============================================================
   72. TIMELINE STATUS
   ============================================================ */

.timeline-status {
    display: inline-flex;

    align-items: center;

    gap: 6px;

    min-height: 26px;

    padding:
        0
        9px;

    border:
        1px solid rgba(23, 99, 59, 0.14);

    border-radius:
        var(--radius-pill);

    color:
        #17633b;

    background:
        rgba(23, 99, 59, 0.055);

    font-family:
        var(--font-ui);

    font-size:
        0.42rem;

    font-weight:
        var(--font-bold);

    line-height: 1;

    letter-spacing:
        0.04em;

    text-transform:
        uppercase;
}


/* ============================================================
   73. TIMELINE STATUS DOT
   ============================================================ */

.timeline-status::before {
    content: "";

    width: 5px;
    height: 5px;

    border-radius:
        var(--radius-circle);

    background:
        currentColor;
}


/* ============================================================
   74. TIMELINE IMAGE
   ============================================================ */

.timeline-image {
    position: relative;

    width: 100%;

    margin-bottom:
        var(--space-4);

    border-radius:
        var(--radius-lg);

    overflow: hidden;
}


/* ============================================================
   75. TIMELINE IMAGE ELEMENT
   ============================================================ */

.timeline-image img {
    display: block;

    width: 100%;

    aspect-ratio:
        16 / 9;

    object-fit: cover;

    transition:
        transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1);
}


/* ============================================================
   76. TIMELINE IMAGE HOVER
   ============================================================ */

.timeline-item:hover
.timeline-image img {
    transform:
        scale(1.045);
}


/* ============================================================
   77. TIMELINE CHECK LIST
   ============================================================ */

.timeline-check-list {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap:
        9px
        var(--space-4);

    margin:
        var(--space-4)
        0
        0;

    padding: 0;

    list-style: none;
}


/* ============================================================
   78. TIMELINE CHECK ITEM
   ============================================================ */

.timeline-check-item {
    display: flex;

    align-items: flex-start;

    gap: 8px;

    color:
        var(--text-body);

    font-size:
        0.5rem;

    line-height:
        1.55;
}


/* ============================================================
   79. TIMELINE CHECK ICON
   ============================================================ */

.timeline-check-icon {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    width: 18px;
    height: 18px;

    flex:
        0 0 18px;

    margin-top: 1px;

    border:
        1px solid var(--border-gold);

    border-radius:
        var(--radius-circle);

    color:
        var(--color-secondary-dark);

    background:
        var(--bg-gold-soft);

    font-size:
        0.34rem;
}


/* ============================================================
   80. DARK CHECK ITEM
   ============================================================ */

.timeline-card-dark
.timeline-check-item {
    color:
        rgba(255, 255, 255, 0.52);
}


/* ============================================================
   81. TIMELINE FOCUS
   ============================================================ */

.timeline-card[tabindex]:focus-visible,
.timeline-action:focus-visible {
    outline:
        2px solid var(--color-secondary);

    outline-offset:
        4px;
}


/* ============================================================
   82. LARGE DESKTOP
   ============================================================ */

@media (min-width: 1400px) {

    .timeline-vertical {
        padding-left:
            78px;
    }

    .timeline-vertical
    .timeline-marker {
        left:
            -78px;
    }

}


/* ============================================================
   83. LAPTOP
   ============================================================ */

@media (max-width: 1199.98px) {

    .timeline-horizontal {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap:
            5rem
            var(--space-4);
    }

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

    .timeline-horizontal
    .timeline-item {
        padding-top:
            60px;
    }

    .timeline-horizontal
    .timeline-marker {
        top: 0;
    }

}


/* ============================================================
   84. TABLET
   ============================================================ */

@media (max-width: 991.98px) {

    .timeline-alternate {
        display: flex;

        flex-direction: column;

        gap: 0;

        padding-left:
            72px;
    }

    .timeline-alternate::before {
        top: 18px;
        bottom: 18px;
        left: 25px;

        transform: none;
    }

    .timeline-alternate
    .timeline-item:nth-child(odd),

    .timeline-alternate
    .timeline-item:nth-child(even) {
        width: 100%;

        padding-bottom:
            var(--space-6);

        text-align: left;
    }

    .timeline-alternate
    .timeline-item:last-child {
        padding-bottom: 0;
    }

    .timeline-alternate
    .timeline-item:nth-child(odd)
    .timeline-marker,

    .timeline-alternate
    .timeline-item:nth-child(even)
    .timeline-marker {
        top: 0;
        right: auto;
        left: -72px;
    }

    .timeline-alternate
    .timeline-item:nth-child(odd)
    .timeline-meta,

    .timeline-alternate
    .timeline-item:nth-child(odd)
    .timeline-details,

    .timeline-alternate
    .timeline-item:nth-child(odd)
    .timeline-tags {
        justify-content:
            flex-start;
    }

}


/* ============================================================
   85. MOBILE
   ============================================================ */

@media (max-width: 767.98px) {

    .timeline-vertical,
    .timeline-alternate {
        padding-left:
            58px;
    }

    .timeline-vertical::before,
    .timeline-alternate::before {
        left:
            18px;
    }

    .timeline-progress {
        left:
            18px;
    }

    .timeline-vertical
    .timeline-marker,

    .timeline-alternate
    .timeline-item:nth-child(odd)
    .timeline-marker,

    .timeline-alternate
    .timeline-item:nth-child(even)
    .timeline-marker {
        left:
            -58px;

        width:
            38px;

        height:
            38px;

        font-size:
            0.44rem;
    }

    .timeline-marker::before {
        inset: 4px;
    }

    .timeline-card {
        border-radius:
            var(--radius-lg);
    }

    .timeline-horizontal {
        grid-template-columns:
            1fr;

        gap:
            var(--space-6);

        padding-top: 0;
    }

    .timeline-horizontal
    .timeline-item {
        padding:
            0
            0
            0
            58px;
    }

    .timeline-horizontal
    .timeline-marker {
        top: 0;
        left: 0;

        width: 38px;
        height: 38px;

        transform: none;
    }

    .timeline-horizontal
    .timeline-item:hover
    .timeline-marker {
        transform:
            scale(1.04);
    }

    .timeline-horizontal
    .timeline-card {
        text-align: left;
    }

    .timeline-horizontal
    .timeline-meta,

    .timeline-horizontal
    .timeline-details,

    .timeline-horizontal
    .timeline-tags {
        justify-content:
            flex-start;
    }

}


/* ============================================================
   86. SMALL MOBILE
   ============================================================ */

@media (max-width: 479.98px) {

    .timeline-vertical,
    .timeline-alternate {
        padding-left:
            48px;
    }

    .timeline-vertical::before,
    .timeline-alternate::before,
    .timeline-progress {
        left:
            14px;
    }

    .timeline-vertical
    .timeline-marker,

    .timeline-alternate
    .timeline-item:nth-child(odd)
    .timeline-marker,

    .timeline-alternate
    .timeline-item:nth-child(even)
    .timeline-marker {
        left:
            -48px;

        width:
            30px;

        height:
            30px;

        font-size:
            0.38rem;
    }

    .timeline-marker::before {
        inset:
            3px;
    }

    .timeline-card {
        padding:
            var(--space-4);
    }

    .timeline-title {
        font-size:
            clamp(1.12rem, 6vw, 1.4rem);
    }

    .timeline-description {
        font-size:
            0.56rem;
    }

    .timeline-check-list {
        grid-template-columns:
            1fr;
    }

    .timeline-details {
        align-items:
            flex-start;

        flex-direction:
            column;
    }

    .timeline-horizontal
    .timeline-item {
        padding-left:
            48px;
    }

    .timeline-horizontal
    .timeline-marker {
        width:
            30px;

        height:
            30px;
    }

}


/* ============================================================
   87. VERY SMALL MOBILE
   ============================================================ */

@media (max-width: 374.98px) {

    .timeline-vertical,
    .timeline-alternate {
        padding-left:
            42px;
    }

    .timeline-vertical
    .timeline-marker,

    .timeline-alternate
    .timeline-item:nth-child(odd)
    .timeline-marker,

    .timeline-alternate
    .timeline-item:nth-child(even)
    .timeline-marker {
        left:
            -42px;
    }

    .timeline-card {
        padding:
            14px;
    }

    .timeline-tags {
        gap:
            5px;
    }

}


/* ============================================================
   88. TOUCH DEVICES
   ============================================================ */

@media (hover: none) {

    .timeline-item:hover
    .timeline-marker,

    .timeline-item:hover
    .timeline-card {
        transform:
            none;
    }

    .timeline-item:hover
    .timeline-marker::before {
        transform:
            none;
    }

    .timeline-item:hover
    .timeline-image img {
        transform:
            none;
    }

    .timeline-horizontal
    .timeline-item:hover
    .timeline-marker {
        transform:
            translateX(-50%);
    }

}


/* ============================================================
   89. REDUCED MOTION
   ============================================================ */

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

    .timeline-marker,
    .timeline-marker::before,
    .timeline-card,
    .timeline-card::before,
    .timeline-card::after,
    .timeline-action-icon,
    .timeline-progress,
    .timeline-image img {
        transition:
            none;
    }

    .timeline-item:hover
    .timeline-marker,

    .timeline-item:hover
    .timeline-card,

    .timeline-item:hover
    .timeline-marker::before,

    .timeline-item:hover
    .timeline-image img {
        transform:
            none;
    }

}


/* ============================================================
   END OF ULTRA PREMIUM TIMELINE COMPONENT SYSTEM
   ============================================================ */
```