/*==================================================
 HISTORY CAROUSEL - ELEMENTOR WIDGET
==================================================*/


.history-section {

    --primary: #27348B;
    --card: #515FCD;
    --white: #FFFFFF;
    --border: rgba(255,255,255,.45);
    --year-opacity: .25;
    --year-spacing: 1.4em;
    --year-scale: 1.5;
    width:100%;
}



/*==================================================
 HEADER
==================================================*/


.history-section .history-header {

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

    margin-bottom:70px;

}



.history-section .history-header h2 {

    margin:0;

}



/*==================================================
 ARROWS
==================================================*/


.history-section .history-arrows {

    display:flex;

    justify-content: center;

    gap:15px;

    border-style:solid;

    border-width:1px;

}



.history-section .history-arrows button {

    padding: 0;

    border: none;


    background:transparent;

    line-height: 0;

    cursor:pointer;


    transition:.3s;


}





/*==================================================
 WRAPPER
==================================================*/


.history-section .history-wrapper {


    display:flex;

    gap:60px;

    align-items:center;


}



/*==================================================
 YEARS
==================================================*/


.history-section .history-years {


    position:relative;


    height:20vw;


    overflow:hidden;


    display:flex;


    flex-direction:column;


    width:25%;


    justify-content:center;


}



.history-section .history-year {


    position:absolute;


    left:0;


    width:100%;

   opacity:1;


    cursor:pointer;


    user-select:none;


    will-change:transform,opacity;


    transform-origin:left center;

        --year-spacing: 1.4em;
    --year-scale: 1.5;


}



.history-section .history-year.active {


    color:#fff;


}





/*==================================================
 SPLIDE
==================================================*/


.history-section .history-slider {


    width:75%;


    overflow:hidden;


}





.history-section .history-slider .splide__track {


    overflow:visible;


}



.history-section .splide__list {


    align-items:stretch;

}



.history-section .splide__slide {


    padding-right:18px;

}



/*==================================================
 CARDS
==================================================*/


.history-section .history-card {

    display:flex;


    flex-direction:column;


    justify-content: center;


    transition:.35s;

    height: 100%;

    cursor:pointer;

    border-style: solid;

}


.history-section .history-card img {

    max-width:100%;

    display:block;
    
}



.history-section .history-card h3 {

    margin:0 0 30px;

}


.history-section .history-card p {

    margin:0;

}







/*==================================================
 RESPONSIVE TABLET
==================================================*/


@media(max-width:1024px){


    .history-section .history-wrapper {


        flex-direction:column;


        gap:50px;


    }



    .history-section .history-years {


        width:100%;


        height:140px;


    }



    .history-section .history-year {


        text-align:center;


        transform-origin:center center;


    }




    .history-section .history-slider {


        width:100%;


    }





    .history-section .history-header {


        flex-direction:column;


        gap:30px;


        text-align:center;


    }



    .history-section .history-header h2 {


        font-size:40px;


    }



}





/*==================================================
 RESPONSIVE MOBILE
==================================================*/


@media(max-width:768px){


    .history-section .history-card {


        height:auto;


        min-height:340px;


        padding:30px;


    }



    .history-section .history-card h3 {


        font-size:34px;


    }



    .history-section .history-card p {


        font-size:17px;


    }



    .history-section .history-year {


        font-size:40px;


    }



    .history-section .history-arrows button {


        width:48px;


        height:48px;


        font-size:20px;


    }



}