*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{
    overflow-x:hidden;
}

/* ========================================================= */

.ar-pro-timeline{
    width:100%;
    height:100vh;
    display:flex;
    background:#000;
    overflow:hidden;
}

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

.ar-years-slider{
   width: 75px;
    height: 450px;
    background: transparent;
    border-right: 0px solid rgba(255, 255, 255, 0.08);
    margin: 0;
    position: absolute;
    left: 10%;
    top: 20%;
    z-index: 111;
}

.ar-years-slider .swiper-wrapper{
    display:flex;
    flex-direction:column;
}


.ar-pro-timeline .swiper-wrapper {
    gap : 0 !important;
}

.ar-years-slider .swiper-slide{
    height:auto !important;
}

/* =========================================================
YEAR TAB
========================================================= */

.ar-year-tab{
    position:relative;
    height: 75px;
    background-size:cover;
    background-position:center;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
    cursor:pointer;
    background: none !important;
    border: none !important;
}

.ar-year-overlay{
    position:absolute;
    inset:0;
   background: transparent !important;
    transition:0.4s ease;
}

.ar-year-tab span{
    position:relative;
    z-index:2;
    color:rgba(255,255,255,0.55);
    font-size: 24px;
    font-weight:700;
    transition:0.4s ease;
    font-family: "helvetica Bold", Sans-serif;
}

/* ACTIVE TAB */

.swiper-slide-thumb-active .ar-year-overlay{
    background: transparent ;
}

.swiper-slide-thumb-active .ar-year-tab span{
    color:#fff;
    transform:scale(1.1);
}

/* =========================================================
RIGHT CONTENT
========================================================= */

.ar-content-slider{
    width: 100%;
    height:100vh;
}

.ar-content-slide{
    position:relative;
    width:100%;
    height:100vh;
    background-size:cover;
    background-position:center;
    display:flex;
    align-items:center;
   padding: 20%;
}

.ar-content-overlay{
    position:absolute;
    inset:0;
    background:rgba(0,0,0,0.55);
}

.ar-content-inner{
    position:relative;
    z-index:2;
    max-width:600px;
}

.ar-big-year{
    line-height:1;
    font-weight: 700;
    font-size: 65px;
    letter-spacing: 0;
    color: rgba(255, 255, 255, 0);
    -webkit-text-stroke: 2.2px #ea5039;
    margin: 0;
    font-family: "helvetica Bold", Sans-serif;
}

.ar-content-text{
    color:#fff;
}

.ar-content-text h1,
.ar-content-text h2,
.ar-content-text h3{
    font-family: "helvetica Bold", Sans-serif;
    font-size: 32px;
    margin-bottom: 10px;
    margin-top: 15px;
    color: #fff !important;
}

.ar-content-text p{
    font-size: 16px;
    line-height: 26px;
    font-family: "helvetica Regular", Sans-serif;
    color: #fff !important;
    font-weight: 400;
}

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

@media(max-width:991px){

    .ar-pro-timeline{
        flex-direction:column;
        height:auto;
    }

    .ar-years-slider{
        width:100%;
        height:auto;
    }

    .ar-years-slider .swiper-wrapper{
        flex-direction:row;
    }

    .ar-years-slider .swiper-slide{
        width:auto !important;
    }

    .ar-year-tab{
        width:140px;
        height:90px;
    }

    .ar-year-tab span{
        font-size:22px;
    }

    .ar-content-slider{
        width:100%;
        height:auto;
    }

    .ar-content-slide{
        min-height:100vh;
        height:auto;
        padding:100px 20px;
    }

    .ar-big-year{
        font-size:80px;
    }

    .ar-content-text h1,
    .ar-content-text h2,
    .ar-content-text h3{
        font-size:32px;
    }

    .ar-content-text p{
        font-size:16px;
        line-height:1.7;
    }

}