:root{
    --text-color: #CF3B94;
}
.timelineBlock .imageCaption{
    font-size: 12px; 
    text-align: center;
    width: 75%;
    margin-bottom: 0;
    color: #000;
    margin: auto;
}
.timelineBlock .imageCaption p{
    font-size: 12px; 
    margin-bottom: 0;
}
.timelineWrapper{
    position: relative;
    top: 0px;
}
.timelineWrapper::before {
    content: '';
    position: absolute;
    width: 1px;
    background-color: #08243E;
    top: 0;
    bottom: 0;
    left: 50%;
    margin-left: -3px;
    z-index: 1;
}
.timelineWrapper::after{
    content: '\25e2';
    position: absolute;
    width: 13px;
    height: 24px;
    color: var(--text-color);
    z-index: 1;
    font-size: 22px;
    bottom: -5px;
    left: 49.19%;
    font-weight: 800;
    font-family: 'mont_heavy';
    transform: rotate(45deg);
}
.timelineContent.heading h3{
    color: var(--text-color);
}
.timelineContent{
    position: relative;
    padding-bottom: 30px;
}
.timelineContent.left{
    left: 0;
    padding-right: 29px;
}
.timelineContent.right{
    left: 50%;
    padding-left: 29px;
}
.timelineContent:first-child::after{
    content: "";
    position: absolute;
    width: 25px;
    height: 25px;
    right: -2px;
    color: var(--text-color);
    z-index: 1;
    top: 10px;
    left: -15px;
    background-image: url('data:image/svg+xml;utf8,<svg width="25" height="26" viewBox="0 0 25 26" xmlns="http://www.w3.org/2000/svg"><path d="M20.9975 22.0727L15.9277 18.259L16.2356 25.0768H8.68227L9.09277 18.259L4.02299 22.0727L0 15.4253L6.15764 12.5278L0.0615763 9.6728L4.04351 3.02541L9.1133 6.77522L8.70279 0H16.2562L15.9483 6.77522L21.0181 3.02541L25 9.6728L18.8834 12.5278L24.9795 15.4253L20.9975 22.0727Z" fill="%23CF3B94"/></svg>');
    background-size: cover;
    transform: none;
}
.timelineContent .arrow-svg{
    position: absolute;
    z-index: 1;
    top: 20px;
    left: -14px;
}
.timelineContent.left .arrow-svg{
    left: unset;
    right: -9px;
}
.timelineContent:first-child .arrow-svg{
    display: none;
}
.timelineContent.left .timeline {
    width: 83%;
    margin-right: 0;
    margin-left: auto;
}
.timelineContent.right .timeline {
    width: 83%;
}
.timelineContent.left h3 {
   text-align: right;
}
.timelineWrapper p{
    margin-bottom: 0;
    font-size: 18px;
    color: #08243E;
}
.timelineWrapper .row:last-child .align-self-center{
    align-self: end !important;
}
.timelineWrapper .row:last-child .heading{
    position: absolute;
    top: 0;
}
.timelineWrapper .row.textAndImage:last-child .heading{
    position: absolute;
    top: 0;
    right: 0;
}
.timelineBlock .w-85{
    width: 85%;
}
.rowGap{
    row-gap: 30px;
}
.timelineCard .overlay_b_i{
    background: #cf3b94; 
    color: white; 
    text-align: center;
}
.timelineCard .overlay_b_i_2{
    background: #4D5CA8; 
    color: white; 
    text-align: center;
}
.timelineCard .btn_pride{
    background: #00B0B0;
}
.timelineCard .overlay_b_i p{
    width: 91%;
}
.timelineCard .overlay_b_i a{
    color: #F8AA42;
    text-decoration: underline !important;
}
@media (min-width: 1024.98px) {
    .timelineWrapper{
        position: relative;
        top: -100px;
    }
    .timelineBlock .timelineWrapper .w-85{
        width: 65%;
    }
}
@media (max-width: 1024.98px) and (min-width: 767.98px){
    .timelineWrapper{
        margin-bottom: 150px;
    }
}
@media (max-width: 1199.98px) {
    .timelineBlock .w-85{
        width: 100%;
    }
    .timelineWrapper::after {
        left: 49.1%;
    }
}
@media (max-width: 991.98px) {
    .timelineWrapper::after {
        left: 48.7%;
    }
}
@media (max-width: 767.98px) {
    .timelineWrapper::before {
        left: 0;
        margin-left: 13px;
    }
    .timelineContent.right {
        left: 0;
    }
    .timelineContent.left {
        padding-left: 29px;
        padding-right: 15px;
    }
    .timelineContent.left .timeline {
        margin-left: 0;
    }
    .timelineContent:first-child::after {
        left: 1px;
    }
    .timelineContent .arrow-svg{
        left: 2px;
        top: 30px;
    }
    .timelineContent.left .arrow-svg{
        right: unset;
        left: 3px;
    }
    .timelineContent.left h3{
        text-align: left;
    }
    .timelineBlock .imageCaption{
        padding-left: 3em;
        margin-top: 5px;
        margin: auto !important;
        text-align: center !important;
    }
    .timelineWrapper::after{
        left: 7px;
    }
    .timelineWrapper .row:last-child .heading{
        position: unset;
    }
    .timelineWrapper .row .align-self-center{
        order: 2;
    }    
    .timelineWrapper .row img{
        width: 90%;
        padding-left: 30px;
    }
    .timelineCard .btn_pride{
        width: 82%;
        display: block;
        margin: auto;
    }
    .timelineBlock .w-85 {
        padding-left: 29px !important;
        padding-right: 15px;
    }
}