/*
Click nbfs://nbhost/SystemFileSystem/Templates/Licenses/license-default.txt to change this license
Click nbfs://nbhost/SystemFileSystem/Templates/ClientSide/css.css to edit this template
*/
/* 
    Created on : 19 May 2025, 12:53:44 PM
    Author     : lamya
*/

/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : Oct 6, 2021, 3:12:14 PM
    Author     : Lamyarahman
*/

/******************* Timeline Demo - 4 *****************/
.main-timeline{overflow:hidden;position:relative}
.main-timeline:before{content:"";width:5px;height:100%;background:#333;position:absolute;top:0px;left:50%;transform:translateX(-50%)}
.main-timeline .timeline-content:before,.main-timeline .timeline:before{top:50%;transform:translateY(-50%);content:""}
.main-timeline .timeline{width:50%;padding-left:100px;float:right;position:relative}
.main-timeline .timeline:before{width:20px;height:20px;border-radius:50%;background:#fff;border:5px solid #333;position:absolute;left:-10px}
.main-timeline .timeline-content{display:block;padding-left:150px;position:relative}
.main-timeline .timeline-content:before{width:90px;height:10px;border-top:7px dotted #333;position:absolute;left:-92px}
.main-timeline .year{    display: inline-block; width: 110px;height: 110px;line-height: 90px;border-top-left-radius: 20px;border-bottom-right-radius: 20px;font-size: 25px;text-align: center;box-shadow: inset 0 0 10px rgb(0 0 0 / 40%);    position: absolute;    top: 25%;    left: 0;}
/*.main-timeline .year:before{content:"";border-left:20px solid #f54957;border-top:10px solid transparent;border-bottom:10px solid transparent;position:absolute;bottom:-13px;right:0;transform:rotate(45deg)}*/
.main-timeline .inner-content{padding:20px 0}
.main-timeline .title{font-size:18px;font-weight:600;color:#f54957;text-transform:uppercase;margin:0 0 5px}
.main-timeline .description{margin:0 0 5px}
.main-timeline .timeline:nth-child(2n){padding:0 100px 0 0}
.main-timeline .timeline:nth-child(2n) .timeline-content:before,.main-timeline .timeline:nth-child(2n) .year,.main-timeline .timeline:nth-child(2n):before{left:auto;right:-10px}
.main-timeline .timeline:nth-child(2n) .timeline-content{padding:0 150px 0 0}
.main-timeline .timeline:nth-child(2n) .timeline-content:before{right:-92px}
.main-timeline .timeline:nth-child(2n) .year{right:0}
.main-timeline .timeline:nth-child(2n) .year:before{right:auto;left:0;border-left:none;transform:rotate(-45deg)}
.main-timeline .timeline:nth-child(2){margin-top:110px}
.main-timeline .timeline:nth-child(odd){margin:-110px 0 0}
.main-timeline .timeline:nth-child(even){margin-bottom:60px}
.main-timeline .timeline:first-child,.main-timeline .timeline:last-child:nth-child(even){margin:0}




.main-timeline .adearestT .year{
        border: 10px solid #1b93d0;
        color: #1b93d0;
}

.main-timeline .adearestT .year:before{
        border-left: 20px solid #1b93d0;
}

.main-timeline .adearestT .title{
        color: #1b93d0;
}


.main-timeline .tigT .year{
        border: 10px solid #0f4650;
        color: #0f4650;
}

.main-timeline .tigT .year:before{
        border-left: 20px solid #0f4650;
}

.main-timeline .tigT .title{
        color: #0f4650;
}

.main-timeline .timeline.tigT .year:before{
border-right: 20px solid #0f4650;
}

.main-timeline .gradeT .year{
        border: 10px solid #0401b8;
        color: #0401b8;
}

.main-timeline .gradeT .year:before{
        border-left: 20px solid #0401b8;
}

.main-timeline .gradeT .title{
        color: #0401b8;
}

.main-timeline .eipT .year{
        border: 10px solid #076324;
        color: #076324;
}

.main-timeline .eipT .year:before{
        border-left: 20px solid #076324;
}

.main-timeline .eipT .title{
        color: #076324;
}

.main-timeline .timeline.eipT .year:before{
border-right: 20px solid #076324;
}

.main-timeline .psiT .year{
        border: 10px solid #173865;
        color: #173865;
}

.main-timeline .psiT .year:before{
        border-left: 20px solid #173865;
}

.main-timeline .psiT .title{
        color: #173865;
}

.main-timeline .safedoorT .year{
        border: 10px solid #e51b24;
        color: #e51b24;
}

.main-timeline .safedoorT .year:before{
        border-left: 20px solid #e51b24;
}

.main-timeline .safedoorT .title{
        color: #e51b24;
}

.main-timeline .timeline.safedoorT .year:before{
border-right: 20px solid #e51b24;
}

.main-timeline .polarT .year{
        border: 10px solid #1279d6;
        color: #1279d6;
}

.main-timeline .polarT .year:before{
        border-left: 20px solid #1279d6;
}

.main-timeline .polarT .title{
        color: #1279d6;
}


.main-timeline .spexT .year{
        border: 10px solid #f58220;
        color: #f58220;
}

.main-timeline .spexT .year:before{
        border-left: 20px solid #f58220;
}

.main-timeline .spexT .title{
        color: #f58220;
}

.main-timeline .timeline.spexT .year:before{
border-right: 20px solid #f58220;
}

.main-timeline .salcoT .year{
        border: 10px solid #e32128;
        color: #e32128;
}

.main-timeline .salcoT .year:before{
        border-left: 20px solid #e32128;
}

.main-timeline .salcoT .title{
        color: #e32128;
}

.timeline_begin:after  {
    content: "";
    display: block;
    width: 100px;
    margin: auto;
    height: 6px;
    background: #333333;
}
.timeline_ends:after{
    content: "";    display: block;    margin: 0 auto;    margin-top: -48px;    box-sizing: border-box;    height: 45px;    width: 45px;    border-style: solid;    border-color: #333333;    border-width: 0px 5px 5px 0px;    transform: rotate( 45deg);    transition: border-width 150ms ease-in-out;}    
@media only screen and (max-width:1239px){.main-timeline .year{top:50%;transform:translateY(-50%)}.main-timeline .inner-content img{max-width: none;}}
@media only screen and (max-width:990px){.main-timeline .timeline{padding-left:75px}
.main-timeline .timeline:nth-child(2n){padding:0 75px 0 0}
.main-timeline .timeline-content{padding-left:130px}
.main-timeline .timeline:nth-child(2n) .timeline-content{padding:0 130px 0 0}
.main-timeline .timeline-content:before{width:68px;left:-68px}
.main-timeline .timeline:nth-child(2n) .timeline-content:before{right:-68px}
}
@media only screen and (max-width:767px){.main-timeline{overflow:visible}
.main-timeline:before{height:100%;top:0;left:0;transform:translateX(0)}
.main-timeline .timeline:before,.main-timeline .timeline:nth-child(2n):before{top:60px;left:-9px;transform:translateX(0)}
.main-timeline .timeline,.main-timeline .timeline:nth-child(even),.main-timeline .timeline:nth-child(odd){width: 100%;    float: none;    text-align: left;    padding: 0;    margin: 0 0 10px;    padding-left: 50px;}
.main-timeline .timeline-content,.main-timeline .timeline:nth-child(2n) .timeline-content{padding:0}
.main-timeline .timeline-content:before,.main-timeline .timeline:nth-child(2n) .timeline-content:before{display:none}
.main-timeline .timeline:nth-child(2n) .year,.main-timeline .year{position:relative;transform:translateY(0)}
.main-timeline .timeline:nth-child(2n) .year:before,.main-timeline .year:before{border:none;border-top:10px solid transparent;border-bottom:10px solid transparent;top:50%;left:-23px;bottom:auto;right:auto;transform:rotate(0)}
.main-timeline .inner-content{padding:10px}
.main-timeline .year:before{display: none;}
.main-timeline .year{border-radius: 0; border-width: 0px !important;     padding: 10px !important;    width: 100px;    height: 56px;    line-height: 36px;    font-size: 20px;    margin: 0;}
.main-timeline .safedoorT .year{background: #e51b24; color: #fff;}
.main-timeline .adearestT .year{background: #1b93d0; color: #fff;}
.main-timeline .tigT .year{background: #0f4650; color: #fff;}
.main-timeline .gradeT .year{background: #505050; color: #fff;}
.main-timeline .eipT .year{background: #076324; color: #fff;}
.main-timeline .psiT .year{background: #173865; color: #fff;}
.main-timeline .polarT .year{background: #1279d6; color: #fff;}
.main-timeline .spexT .year{background: #f58220; color: #fff;}
.main-timeline .salcoT .year{background: #e32128; color: #fff;}
.main-timeline .year{    margin-left: 12px;}
.timeline_begin:after{display: none !important;}
.timeline_ends:after{float: none;text-align: left;padding: 0;margin: -27px -7px 2px;height: 20px;width: 20px;}
}