/*************************************************/
/* HISTORY */
/*************************************************/


/*************************************************/
/* SECTION */
/*************************************************/

.history-section
{
    position:relative;

    padding:32px 0;

    background:
        linear-gradient(
            135deg,
            #f5faf3,
            #fff
        );

    overflow:hidden;
}


/*************************************************/
/* SECTION TITLE */
/*************************************************/

.history-section .section-title
{
    position:relative;

    max-width:820px;

    margin:
        0 auto 58px;

    text-align:center;
}


/*************************************************/
/* EYEBROW */
/*************************************************/

.history-section .section-title h2::before
{
    content:"HISTORIE";

    display:block;

    margin-bottom:11px;

    color:var(--main-color);

    font-size:.68rem;

    font-weight:800;

    line-height:1;

    letter-spacing:.22em;

    text-transform:uppercase;
}


/*************************************************/
/* TITLE */
/*************************************************/

.history-section .section-title h2
{
    position:relative;

    margin:0;

    color:var(--title-color);

    font-size:
        clamp(
            1.9rem,
            3vw,
            2.65rem
        );

    font-weight:800;

    line-height:1.15;

    letter-spacing:-.025em;
}


/*************************************************/
/* TITLE ACCENT */
/*************************************************/

.history-section .section-title h2::after
{
    content:"";

    display:block;

    width:64px;
    height:4px;

    margin:
        18px auto 0;

    background:
        linear-gradient(
            90deg,
            var(--main-color),
            var(--main-color-dark,#198754)
        );

    border-radius:20px;

    box-shadow:
        0 3px 10px
        rgba(76,159,56,.20);
}


/*************************************************/
/* SUBTITLE */
/*************************************************/

.history-section .section-title p
{
    max-width:680px;

    margin:
        18px auto 0;

    color:var(--text-secondary);

    font-size:.98rem;

    font-weight:500;

    line-height:1.65;

    letter-spacing:.01em;
}


/*************************************************/
/* DECORATIVE DOTS */
/*************************************************/

.history-section .section-title::before,
.history-section .section-title::after
{
    content:"";

    position:absolute;

    top:38px;

    width:7px;
    height:7px;

    background:var(--main-color);

    border-radius:50%;

    opacity:.25;
}

.history-section .section-title::before
{
    left:8%;
}

.history-section .section-title::after
{
    right:8%;
}


/*************************************************/
/* TIMELINE */
/*************************************************/

.history-timeline
{
    position:relative;

    max-width:1050px;

    margin:0 auto;
}

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

    position:absolute;

    top:0;
    bottom:0;

    left:50%;

    width:3px;

    background:
        linear-gradient(
            to bottom,
            var(--main-color),
            rgba(23,105,170,.25),
            var(--main-color)
        );

    transform:translateX(-50%);
}


/*************************************************/
/* ITEM */
/*************************************************/

.history-item
{
    position:relative;

    display:flex;

    align-items:center;

    width:100%;

    margin-bottom:50px;
}

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

.history-item:nth-child(even)
{
    justify-content:flex-end;
}


/*************************************************/
/* YEAR */
/*************************************************/

.history-year
{
    position:absolute;

    top:50%;
    left:50%;

    z-index:3;

    width:78px;
    height:78px;

    display:flex;

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

    transform:
        translate(
            -50%,
            -50%
        );

    background:
        linear-gradient(
            135deg,
            var(--main-color),
            var(--main-color-dark,#198754)
        );

    color:black !important;

    border:
        5px solid
        #b;

    border-radius:50%;

    font-size:1.05rem;
    font-weight:800;

    line-height:1;

    text-align:center;

    white-space:nowrap;

    box-shadow:
        0 8px 25px
        rgba(0,0,0,.18);
}


/*************************************************/
/* CARD */
/*************************************************/

.history-card
{
    width:calc(50% - 65px);

    padding:26px 28px;

    background:#fff;

    border:
        1px solid
        rgba(0,0,0,.06);

    border-top:
        4px solid
        var(--main-color);

    border-radius:20px;

    box-shadow:
        0 10px 30px
        rgba(0,0,0,.08);

    transition:
        transform .25s ease,
        box-shadow .25s ease;
}

.history-card:hover
{
    transform:translateY(-4px);

    box-shadow:
        0 16px 38px
        rgba(0,0,0,.13);
}


/*************************************************/
/* HEADER */
/*************************************************/

.history-card-header
{
    display:flex;

    align-items:flex-start;
    justify-content:space-between;

    gap:15px;
}

.history-label
{
    display:block;

    margin-bottom:4px;

    color:var(--main-color);

    font-size:.7rem;
    font-weight:700;

    line-height:1.2;

    text-transform:uppercase;

    letter-spacing:.1em;
}

.history-card h3
{
    margin:0;

    color:var(--title-color);

    font-size:1.3rem;
    font-weight:750;

    line-height:1.25;
}

.history-percent
{
    flex:none;

    color:var(--main-color);

    font-size:1.45rem;
    font-weight:800;

    line-height:1;

    white-space:nowrap;
}


/*************************************************/
/* STATS */
/*************************************************/

.history-stats
{
    display:flex;

    gap:10px;

    margin-top:20px;
}

.history-stat
{
    flex:1;

    padding:11px 7px;

    background:#f7f9f7;

    border:
        1px solid
        rgba(0,0,0,.04);

    border-radius:12px;

    text-align:center;
}

.history-stat strong
{
    display:block;

    color:var(--title-color);

    font-size:1rem;
    font-weight:750;

    line-height:1.2;
}

.history-stat span
{
    display:block;

    margin-top:3px;

    color:var(--text-secondary);

    font-size:.68rem;

    line-height:1.2;
}


/*************************************************/
/* TEXT */
/*************************************************/

.history-text
{
    margin:18px 0 0;

    color:var(--text-color);

    font-size:.9rem;

    line-height:1.6;
}


/*************************************************/
/* CANDIDATES */
/*************************************************/

.history-candidates
{
    margin-top:18px;

    padding-top:15px;

    border-top:
        1px solid
        rgba(0,0,0,.07);
}

.history-candidates-title
{
    margin-bottom:9px;

    color:var(--title-color);

    font-size:.75rem;
    font-weight:700;
}

.history-candidate-list
{
    display:flex;

    flex-wrap:wrap;

    gap:6px;
}

.history-candidate
{
    padding:5px 9px;

    background:
        rgba(76,159,56,.08);

    color:var(--title-color);

    border-radius:20px;

    font-size:.7rem;
    font-weight:600;

    line-height:1.3;
}


/*************************************************/
/* SUMMARY */
/*************************************************/

.history-summary
{
    max-width:1050px;

    margin:60px auto 0;
    padding:25px 32px;

    display:flex;

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

    gap:25px;

    background:#fff;

    border:
        1px solid
        rgba(0,0,0,.06);

    border-radius:20px;

    box-shadow:
        0 10px 30px
        rgba(0,0,0,.08);
}

.history-summary-number
{
    color:var(--title-color);

    font-size:1.7rem;
    font-weight:800;

    line-height:1;

    text-align:center;
}

.history-summary-number span
{
    display:block;

    margin-top:5px;

    color:var(--text-secondary);

    font-size:.68rem;
    font-weight:600;
}

.history-summary-best
{
    color:var(--main-color);
}

.history-summary-arrow
{
    color:var(--main-color);

    font-size:1.8rem;
    font-weight:700;
}

.history-summary-text
{
    display:flex;

    flex-direction:column;

    gap:3px;

    padding-left:22px;

    border-left:
        1px solid
        rgba(0,0,0,.1);
}

.history-summary-text strong
{
    color:var(--title-color);

    font-size:.95rem;
}

.history-summary-text span
{
    color:var(--text-secondary);

    font-size:.78rem;
}

/*************************************************/
/* BLUE THEME - RIVER */
/*************************************************/
body.style-blue
{
    --page-bg:
        linear-gradient(
            135deg,
            #f4f8fc,
            #dfeefa
        );
    --main-color:#2f73b8;
    --title-color:#1f365c;
    --text-color:#333;
    --text-secondary:#667085;
    --footer1:#1f365c;
    --footer2:#2f73b8;
    --card-bg:#fff;
    --border-color:
        rgba(0,0,0,.08);
}
/*************************************************/
/* GREEN THEME - FOREST */
/*************************************************/
body.style-green
{
    --page-bg:
        linear-gradient(
            135deg,
            #f6faf3,
            #dcefd3
        );
    --main-color:#5b9e45;
    --title-color:#1f365c;
    --text-color:#333;
    --text-secondary:#667085;
    --footer1:#3f7d33;
    --footer2:#74b957;
    --card-bg:#fff;
    --border-color:
        rgba(0,0,0,.08);
}
/*************************************************/
/* NATURE THEME */
/*************************************************/
body.style-nature
{
    --page-bg:
        linear-gradient(
            135deg,
            #fffefb,
            #eef6e8
        );
    --main-color:#5a9647;
    --title-color:#24466d;
    --text-color:#333;
    --text-secondary:#667085;
    --footer1:#24466d;
    --footer2:#5a9647;
    --card-bg:#fff;
    --border-color:
        rgba(0,0,0,.08);
}
/*************************************************/
/* GOLD THEME - HERITAGE */
/*************************************************/
body.style-gold
{
    --page-bg:
        linear-gradient(
            135deg,
            #fffcf4,
            #f8ecd0
        );
    --main-color:#bf8c22;
    --title-color:#5d4632;
    --text-color:#333;
    --text-secondary:#6b7280;
    --footer1:#8c6414;
    --footer2:#d8ad3d;
    --card-bg:#fff;
    --border-color:
        rgba(0,0,0,.08);
}
/*************************************************/
/* STONE THEME */
/*************************************************/
body.style-stone
{
    --page-bg:
        linear-gradient(
            135deg,
            #f7f8f9,
            #e7ebef
        );
    --main-color:#5d7288;
    --title-color:#23384f;
    --text-color:#333;
    --text-secondary:#6b7280;
    --footer1:#23384f;
    --footer2:#5d7288;
    --card-bg:#fff;
    --border-color:
        rgba(0,0,0,.08);
}
/*************************************************/
/* TABLET */
/*************************************************/

@media(max-width:991.98px)
{
    .history-section .section-title
    {
        margin-bottom:45px;
    }

    .history-card
    {
        width:calc(50% - 50px);

        padding:21px;
    }

    .history-year
    {
        width:80px;
        height:80px;

        font-size:.95rem;

        color:#000 !important;
    }

    .history-card h3
    {
        font-size:1.18rem;
    }

    .history-percent
    {
        font-size:1.3rem;
    }

    .history-stats
    {
        gap:8px;
    }
}


/*************************************************/
/* MOBILE */
/*************************************************/

@media(max-width:767.98px)
{
    .history-section .section-title
    {
        margin-bottom:38px;
    }


    /*********************************************/
    /* TITLE */
    /*********************************************/

    .history-section .section-title h2
    {
        font-size:1.8rem;

        line-height:1.2;
    }

    .history-section .section-title h2::before
    {
        margin-bottom:9px;

        font-size:.62rem;

        letter-spacing:.18em;
    }

    .history-section .section-title h2::after
    {
        width:50px;
        height:3px;

        margin-top:14px;
    }

    .history-section .section-title p
    {
        margin-top:14px;

        font-size:.88rem;

        line-height:1.55;
    }

    .history-section .section-title::before,
    .history-section .section-title::after
    {
        display:none;
    }


    /*********************************************/
    /* TIMELINE */
    /*********************************************/

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

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


    /*********************************************/
    /* ITEM */
    /*********************************************/

    .history-item,
    .history-item:nth-child(odd),
    .history-item:nth-child(even)
    {
        justify-content:flex-start;

        align-items:flex-start;

        margin-bottom:28px;
    }


    /*********************************************/
    /* YEAR */
    /*********************************************/

    .history-year
    {
        top:16px;
        right:16px;
        left:auto;

        width:48px;
        height:48px;

        display:flex;

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

        transform:none;

        background:#fff;

        color:#000 !important;

        border:
            3px solid
            var(--main-color);

        border-radius:50%;

        font-size:.94rem;
        font-weight:800;

        line-height:1;

        box-shadow:
            0 3px 10px
            rgba(0,0,0,.12);
    }


    /*********************************************/
    /* CARD */
    /*********************************************/

    .history-card
    {
        position:relative;

        width:100%;

        padding:19px;

        padding-right:68px;

        border-radius:17px;
    }

    .history-card-header
    {
        gap:8px;
    }

    .history-card h3
    {
        font-size:1.08rem;
    }

    .history-percent
    {
        font-size:1.08rem;
    }


    /*********************************************/
    /* STATS */
    /*********************************************/

    .history-stats
    {
        gap:6px;

        margin-top:17px;
    }

    .history-stat
    {
        padding:9px 5px;
    }

    .history-stat strong
    {
        font-size:.84rem;
    }

    .history-stat span
    {
        font-size:.61rem;
    }


    /*********************************************/
    /* TEXT */
    /*********************************************/

    .history-text
    {
        margin-top:16px;

        font-size:.85rem;
    }


    /*********************************************/
    /* SUMMARY */
    /*********************************************/

    .history-summary
    {
        margin-top:36px;

        padding:20px 18px;

        flex-wrap:wrap;

        gap:13px;
    }

    .history-summary-number
    {
        font-size:1.35rem;
    }

    .history-summary-arrow
    {
        font-size:1.35rem;
    }

    .history-summary-text
    {
        width:100%;

        padding-top:13px;

        border-left:0;

        border-top:
            1px solid
            rgba(0,0,0,.08);

        text-align:center;
    }
}


/*************************************************/
/* EXTRA SMALL */
/*************************************************/

@media(max-width:575.98px)
{
    .history-section .section-title
    {
        margin-bottom:34px;
    }


    /*********************************************/
    /* TITLE */
    /*********************************************/

    .history-section .section-title h2
    {
        font-size:1.6rem;
    }

    .history-section .section-title p
    {
        font-size:.83rem;
    }


    /*********************************************/
    /* TIMELINE */
    /*********************************************/

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

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


    /*********************************************/
    /* ITEM */
    /*********************************************/

    .history-item,
    .history-item:nth-child(odd),
    .history-item:nth-child(even)
    {
        margin-bottom:24px;
    }


    /*********************************************/
    /* YEAR */
    /*********************************************/

    .history-year
    {
        top:14px;
        right:14px;
        left:auto;

        width:38px;
        height:38px;

        transform:none;

        background:#fff;

        color:#000 !important;

        border:
            3px solid
            var(--main-color);

        font-size:.71rem;

        box-shadow:
            0 2px 8px
            rgba(0,0,0,.12);
    }


    /*********************************************/
    /* CARD */
    /*********************************************/

    .history-card
    {
        padding:16px;

        padding-right:58px;

        border-radius:15px;
    }


    /*********************************************/
    /* HEADER */
    /*********************************************/

    .history-card-header
    {
        flex-direction:column;

        gap:4px;
    }

    .history-card h3
    {
        font-size:1rem;
    }

    .history-percent
    {
        font-size:.98rem;
    }


    /*********************************************/
    /* STATS */
    /*********************************************/

    .history-stats
    {
        flex-direction:column;

        gap:5px;

        margin-top:15px;
    }

    .history-stat
    {
        display:flex;

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

        padding:8px 10px;

        text-align:left;
    }

    .history-stat span
    {
        margin-top:0;
    }


    /*********************************************/
    /* TEXT */
    /*********************************************/

    .history-text
    {
        font-size:.82rem;
    }


    /*********************************************/
    /* SUMMARY */
    /*********************************************/

    .history-summary
    {
        margin-top:32px;

        padding:19px 15px;

        border-radius:16px;
    }

    .history-summary-number
    {
        font-size:1.25rem;
    }

    .history-summary-arrow
    {
        font-size:1.25rem;
    }

    .history-summary-text
    {
        padding-top:12px;
    }

    .history-summary-text strong
    {
        font-size:.88rem;
    }

    .history-summary-text span
    {
        font-size:.72rem;
    }
}