.timeline {
position: relative;
margin: 0 auto;
}
.timeline::after {
content: '';
position: absolute;
width: 6px;
background-color:#036;
top: 0;
bottom: 0;
left: 50%;
margin-left: -3px;
}
.con-timeline-sh {
padding: 40px 40px;
position: relative;
background-color: #d2daee;
width: 50%;
box-sizing: border-box;
}
.con-timeline-sh::after {
content: '';
position: absolute;
width: 25px;
height: 25px;
right: -12px;
background-color: #fff;
border: 4px solid #fc3;
top: 45px;
border-radius: 50%;
z-index: 1;
}
.left {
left: 0;
}
.right {
left: 50%;
}
.left::before {
content: " ";
height: 0;
position: absolute;
top: 50px;
width: 0;
z-index: 1;
right: 30px;
border: medium solid white;
border-width: 10px 0 10px 10px;
border-color: transparent transparent transparent white;
}
.right::before {
content: " ";
height: 0;
position: absolute;
top: 50px;
width: 0;
z-index: 1;
left: 30px;
border: medium solid white;
border-width: 10px 10px 10px 0;
border-color: transparent white transparent transparent;
}
.right::after {
left: -12px;
}
.content {
padding: 20px 30px;
background-color: white;
position: relative;
border-radius: 0px;
}
@media screen and (max-width: 991.98px) {
.timeline::after {
left: 31px;
}
.con-timeline-sh {
width: 100%;
padding-left: 70px;
padding-right: 25px;
}
.con-timeline-sh::before {
left: 60px;
border: medium solid white;
border-width: 10px 10px 10px 0;
border-color: transparent white transparent transparent;
}
.left::after,
.right::after {
left: 15px;
}
.right {
left: 0%;
}
}
// **************************************************


1.carousel-inner .carousel-item-start,
1.carousel-inner .carousel-item-next,
1.carousel-inner .carousel-item-prev {
display: flex;
// transition-duration: 10s;
}
@media (max-width: 575.98px) {
.carousel-inner .carousel-item > div {
display: none;
}
.carousel-inner .carousel-item > div:first-child {
display: block;
}
}
.carousel-inner .carousel-item.active,
.carousel-inner .carousel-item-start,
.carousel-inner .carousel-item-next,
.carousel-inner .carousel-item-prev {
display: flex;
}

/* display 4 */
@media (min-width: 576px) {
.carousel-inner .carousel-item-right.active,
.carousel-inner .carousel-item-next,
.carousel-item-next:not(.carousel-item-start) {
transform: translateX(50%) !important;
}
.carousel-inner .carousel-item-left.active,
.carousel-item-prev:not(.carousel-item-end),
.active.carousel-item-start,
.carousel-item-prev:not(.carousel-item-end) {
transform: translateX(-50%) !important;
}
.carousel-item-next.carousel-item-start,
.active.carousel-item-end {
transform: translateX(0) !important;
}
.carousel-inner .carousel-item-prev,
.carousel-item-prev:not(.carousel-item-end) {
transform: translateX(-50%) !important;
}
}

      .carousel-item {
        transition: transform 3s ease-in-out;
      }
      .carousel-fade .active.carousel-item-start,
      .carousel-fade .active.carousel-item-end {
        transition: opacity 0s 3s;
      }