@import "https://cdn.jsdelivr.net/npm/themify-icons@0.1.2/css/themify-icons.css";

/* Aboutus-section */

.about-details-section {
    padding: 50px 0px 50px;
}

.about-details-section .title-desc {
    padding: 0px 70px;
}

.about-details-section .text-gray {
    color: #736174;
}

.about-details-section .text-dark-blue {
    color: #161C2D;
}

.timeline>.timeline-item {
    position: relative;
    padding-top: 0;
}

.timeline>.timeline-item>.timeline-step-line {
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    z-index: 0;
    width: 2px;
    margin-left: -1px;
    background: url(../images/about-us/codesclue_time_line_dashed.webp) repeat-y;
}

.timeline>.timeline-item>.timeline-step-line.last-line-arrow:after {
    position: absolute;
    bottom: -45px;
    content: "<";
    left: 2.5px;
    right: 0;
    margin: 0 auto;
    color: #b4b4b4;
    rotate: -90deg;
    font-size: 50px !important;
    font-weight: 100 !important;
}

.top-line-line {
    background: url(../images/about-us/codesclue_dash_img.webp) repeat-x;
    height: 2px;
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    z-index: 0;
    content: " ";
    width: 50px;
    margin: auto;
}



.timeline>.timeline-item>.timeline-step-dot {
    display: block;
    position: absolute;
    top: 106px;
    left: 50%;
    z-index: 0;
    content: " ";
    width: 20px;
    height: 20px;
    margin-left: -10px;
    background-color: #fff;
    border-width: 5px;
    border-style: solid;
    border-radius: 50%;
}

.left-box {
    position: relative;
}

.right-box {
    position: relative;
}

.timeline-dashed-right,
.timeline-dashed-left {
    background: url(../images/about-us/codesclue_top_line.webp) repeat-x;
    display: block;
    position: absolute;
    top: 115px;
    left: 10px;
    content: " ";
    width: 6%;
    height: 20px;
    z-index: 0;
}

.timeline-dashed-left {
    right: 10px;
    left: unset;
}

.timeline>.timeline-item>.row {
    margin-left: -50px;
    margin-right: -50px;
}

.timeline>.timeline-item>.row>[class*="col-"] {
    padding-left: 50px;
    padding-right: 50px;
}

.timeline>.timeline-item .timeline-step-datestamp {
    margin-bottom: 30px;
    padding-left: 10px;
    padding-right: 10px;
    text-align: right;
}

.timeline>.timeline-item>.timeline-item:nth-child(even) .timeline-step-datestamp {
    text-align: left;
}

.timeline>.timeline-item .timeline-step-pic {
    width: 230px;
    height: 230px;
    margin-top: 50px;
}

.timeline>.timeline-item .timeline-step-pic img {
    width: 100%;
}

.timeline>.timeline-item .timeline-step-data {
    margin-top: 50px;
    text-align: left;
    background: #fff;
    box-shadow: 2px 5px 20px 0px rgba(23.00000000000011, 22.000000000000007, 138.99999999999994, 0.08);
    padding: 20px 30px;
    overflow: hidden;
}

.timeline>.timeline-item .timeline-step-data>*:last-child {
    margin-bottom: 0 !important;
}

.timeline>.timeline-item .title {
    font-family: "Poppins", sans-serif;
    margin-bottom: 8px;
    text-transform: uppercase;
    font-weight: 600 !important;
    font-size: 20px !important;
    color: #242222 !important;
    line-height: 28px !important;
}

.timeline>.timeline-item .InRight {
    font-family: "Poppins", sans-serif;
    margin-bottom: 17px;
    font-weight: 400 !important;
    font-size: 14px !important;
    color: #777171 !important;
    line-height: 28px !important;
}

.timeline>.timeline-item .timeline-step-data .circle {
    width: 20%;
    float: left;
}

.timeline>.timeline-item .timeline-step-data .circle span {
    border-radius: 50%;
    width: 65px;
    height: 65px;
    float: left;
    background-image: linear-gradient(90deg, #30077d 0%, #0f51bf 100%);
    color: #fff;
    text-align: center;
    font-size: 25px !important;
    line-height: 65px !important;
}

.timeline>.timeline-item .timeline-step-data .InRight {
    width: 80%;
    float: right;
}

.timeline>.timeline-item>.row>[class*="col-"] {
    display: flex !important;
    justify-content: center !important;
}

.timeline>.timeline-item>.row>.right-box,
.timeline>.timeline-item>.row>.left-box {
    display: unset !important;
}


.step-one.timeline-item>.timeline-step-dot {
    border-color: #104CBA;
}

.step-two.timeline-item>.timeline-step-dot {
    border-color: #FF6333;
}

.step-three.timeline-item>.timeline-step-dot {
    border-color: #4DABDE;
}

.step-four.timeline-item>.timeline-step-dot {
    border-color: #104CBA;
}

.step-five.timeline-item>.timeline-step-dot {
    border-color: #FE6232;
}

.timeline>.step-one.timeline-item .timeline-step-data {
    border-left: 5px solid #104cba !important;
}

.timeline>.step-two.timeline-item .timeline-step-data {
    border-left: 5px solid #FF6333 !important;
}

.timeline>.step-three.timeline-item .timeline-step-data {
    border-left: 5px solid #4DABDE !important;
}

.timeline>.step-four.timeline-item .timeline-step-data {
    border-left: 5px solid #104cba !important;
}

.timeline>.step-five.timeline-item .timeline-step-data {
    border-left: 5px solid #FE6232 !important;
}

.timeline>.step-one.timeline-item .timeline-step-data .circle span {
    background-image: linear-gradient(to right, #30077D 0%, #0F51BF 100%) !important;
}

.timeline>.step-two.timeline-item .timeline-step-data .circle span {
    background-image: linear-gradient(to right, #FF3834 0%, #FF7133 100%) !important;
}

.timeline>.step-three.timeline-item .timeline-step-data .circle span {
    background-image: linear-gradient(to right, #4392D5 0%, #4FAEDE 100%) !important;
}

.timeline>.step-four.timeline-item .timeline-step-data .circle span {
    background-image: linear-gradient(to right, #30077D 0%, #0F51BF 100%) !important;
}

.timeline>.step-five.timeline-item .timeline-step-data .circle span {
    background-image: linear-gradient(to right, #FF3834 0%, #FF7133 100%) !important;
}

.object-fit-cover.h-100{
    height: 500px !important;
}

.timeline>.timeline-item .InRight{
    margin-bottom: 0px !important;
}

.timeline>.timeline-item .InRight p{
    line-height: 1.6 !important;
}