/* ========== timeline ======= */

.section-timeline{
    background-color: #F04500;
    padding: 100px 0px;
}

.section-timeline h2{
   font-size: 72px;
   font-family: 'Futura-Light';
   color: #000000;
   text-transform: uppercase;
   text-align: center;
   margin: 0px 0px 52px 0px;
}

.section-timeline .sec-white{
    margin: 0px auto;
    max-width: 1324px;
    background-color: #ffffff;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 16px;
    padding: 40px 33px;
   
}

.section-timeline .sec-white .item {
    background-color: #ffffff;
    padding: 30px 20px;
    border: 1px solid #E9E9E9;
    box-sizing: border-box;
    height: 290px;
    border-top: 5px solid #F04500;
    position: relative;
    margin-bottom: 14px;
}

.section-timeline .sec-white .item h3{
    font-family: 'Helvetica Light';
    font-size: 52px;
    margin: 0px 0px 5px 0px;
    color: #F04500;
    height: 46px;
}

.section-timeline .sec-white .item h3 span{
    font-family: 'Helvetica Light';
    font-size: 52px;
    text-transform: uppercase;
    font-size: 17px;
}

.section-timeline .sec-white .item h5{
    font-family: 'Helvetica Bold';
    font-size: 14px;
    margin: 0px 0px 20px 0px;
    color: #8E8E8E    ;
    text-transform: uppercase;
    height: 18px;
}

.section-timeline .sec-white .item h4{
    font-family: 'Helvetica Bold';
    font-size: 20px;
    margin: 0px 0px 2px 0px;
    color: #000000;
    text-transform: uppercase;
}

.section-timeline .sec-white .item h6{
    font-family: 'Helvetica Roman';
    font-size: 14px;
    margin: 0px 0px 0px 0px;
    color: #959595;
    text-transform: uppercase;
}

.section-timeline .sec-white .item img{
    position: absolute;
    bottom: 30px;
    left: 20px;
}

.section-timeline .sec-white .item .img-2{
    position: absolute;
    bottom: 30px;
    left: 0px;
    color: #801c1c;
}

.section-timeline .sec-white .item .img-3{
    position: absolute;
    bottom: 30px;
    left: 20px;
}

.section-timeline .sec-white .item .border-left{
    padding-left: 20px;
    border-left: 1px solid #E9E9E9;
}

.section-timeline .sec-white .large {
    grid-column: span 2; 
    min-width: 494px; 
}


.section-timeline .sec-white .col-100 .col-50{
    display: inline-block;
    width: 48%;
    position: relative;
    height: 165px;
}

@media (max-width: 1396px){

    .section-timeline{
        padding: 100px 40px;
    }
 
   
}

@media (max-width: 650px){

    .section-timeline{
        padding: 50px 16px 30px 16px;
    }

    .section-timeline h2{
        font-size: 42px;
        margin: 0px 0px 30px 0px;
    }

    .section-timeline .sec-white{
        padding: 30px 24px;
    }

    .section-timeline .sec-white .item {
        padding: 28px 21px 0px 24px;
        height: 100%;
    }

    .section-timeline .sec-white .item h3{
        margin-right: 10px;
        margin-bottom: 14px;
    }

    .section-timeline .sec-white .item h4{
        width: 250px;
    }

    .section-timeline .sec-white .item img{
        position: absolute;
        top: 28px;
        right: 14px;
        bottom: auto;
        left:auto;
    }

    .section-timeline .sec-white .flex {
        display: flex;
        align-items: flex-start; 
    }

    .section-timeline .sec-white .item h5{
        padding-top: 4px;
    }

    
 
}

@media (max-width: 650px){

    .section-timeline .sec-white{
        padding: 30px 24px;
        grid-template-columns: 1fr;
    }

    .section-timeline .sec-white .large {
        grid-column: span 1; 
        min-width: auto; 
    }

    .section-timeline .sec-white .item {
        grid-column: span 1; 
        min-width: auto; 
        position: relative;
        padding-bottom: 4px;
    }

    .section-timeline .sec-white .col-100 .col-50{
        display: list-item;
        list-style: none;
        width: 100%;
        height: 100%;
        padding-bottom: 10px;
    }

    .section-timeline .sec-white .item .border-left{
        padding-left: 0px;
        padding-top: 20px;
        border-top: 1px solid #E9E9E9;
        border-left: none;
    }

    .section-timeline .sec-white .item .img-2{
        position: absolute;
        bottom: 100px !important;
        left: auto;
        right: 0px;
        margin-top: -20px;
    }
    
    .section-timeline .sec-white .item .img-3{
        position: absolute;
        bottom: 200px !important;
        left: auto;
        right: 0px;
    }

}