/*.container {
    text-align: center;
    max-width: 1200px;
    margin: 0 auto;
}
*/

.road{
    background: transparent url(../images/roadmap2.png) repeat-y;
    background-position: center;
}

.roadmap {
    position: relative;
/*    width: 100%;*/
/*    max-width: 1200px;*/
    margin: 0 auto;
    padding: 20px 0;
    height: 238em;
    overflow: hidden;
}
.location-right::after {
    overflow: hidden;
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 26%;
    left: 130%;
    z-index: 1;
    transition: all 0.3s linear;
    background: url(../images/location.png) no-repeat;
}
.location-left::after{
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 26%;
    right: 33%;
    z-index: 1;
    transition: all 0.3s linear;
    background: url(../images/location.png) no-repeat;
}
/*.overlay-location-left, .overlay-location-right {
    content: "";
    border-top: 3px solid #2a2776;
    width: 103px;
    position: absolute;
}

.overlay-location-left{
    top: 52%;
    left: -14%;
    z-index: 1;

}
.overlay-location-right{
    top: 52%;
    right: -18%;
    z-index: 1;
}*/

.roadmap-icon {
    background-color: #fff;
/*    border: 4px solid #555;*/
    color: #fff;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    position: absolute;
    top: -30px;
    z-index: 1;
}

.roadmap-content {
/*    background-color: #fff;*/
    border-radius: 5px;
    position: relative;
/*    padding: 10px;*/
    width: 400px;
    text-align: left;
/*    box-shadow: 0px 0px 5px rgb(0 0 0 / 44%);*/
/*    margin: 0 20px;*/
    display: flex;
    align-items: center;
}
.content-span-box{
    height: 100px;
/*    width: 120px;*/
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 900;
    position: relative;
/*    margin-left: -50px;*/
    background-color: #0c77cf;
    border-style: solid; /* Define the border style once */
    border-color: #0c77cf; /* Define the border color once */
    border-width: 1px 1px 1px 1px; /* Top, Right, Bottom, Left */
}
/*.content-p-box{
    padding: 0 10px;
    width: 100%;
    font-size: 18px;
}*/
.content-p-box {
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.2);
    padding: 10px 10px;
    width: 80%;
    font-size: 0.8em;
    height: 100px;
    display: flex;
    align-items: center;
    margin-bottom: 8px;
    background: #fff;
    position: absolute;
    left: 26.6%;
}
.roadmap-content span{
    font-size: 25px;
    color: #fff;
    padding: 10px 18px;
/*    width: 100px;*/
    text-align: center;
    white-space: nowrap;
}
.roadmap-content p{
    margin: 0;
}
.roadmap-item:nth-child(1), .roadmap-item:nth-child(2), .roadmap-item:nth-child(3), .roadmap-item:nth-child(4), .roadmap-item:nth-child(5), .roadmap-item:nth-child(6), .roadmap-item:nth-child(7), .roadmap-item:nth-child(8), .roadmap-item:nth-child(9), .roadmap-item:nth-child(10), .roadmap-item:nth-child(11), .roadmap-item:nth-child(12), .roadmap-item:nth-child(13), .roadmap-item:nth-child(14), .roadmap-item:nth-child(15), .roadmap-item:nth-child(16), .roadmap-item:nth-child(17), .roadmap-item:nth-child(18), .roadmap-item:nth-child(19), .roadmap-item:nth-child(20), .roadmap-item:nth-child(21), .roadmap-item:nth-child(22), .roadmap-item:nth-child(23), .roadmap-item:nth-child(24), .roadmap-item:nth-child(25), .roadmap-item:nth-child(26), .roadmap-item:nth-child(27), .roadmap-item:nth-child(28), .roadmap-item:nth-child(29), .roadmap-item:nth-child(30), .roadmap-item:nth-child(31), .roadmap-item:nth-child(32), .roadmap-item:nth-child(33), .roadmap-item:nth-child(34), .roadmap-item:nth-child(35), .roadmap-item:nth-child(36), .roadmap-item:nth-child(37), .roadmap-item:nth-child(38), .roadmap-item:nth-child(39), .roadmap-item:nth-child(40), .roadmap-item:nth-child(41), .roadmap-item:nth-child(42), .roadmap-item:nth-child(43), .roadmap-item:nth-child(44), .roadmap-item:nth-child(45), .roadmap-item:nth-child(46), .roadmap-item:nth-child(47), .roadmap-item:nth-child(48), .roadmap-item:nth-child(49) {
    position: absolute;
}
.roadmap-item:nth-child(1){
    top: 1%;
    left: 9%;
}
.roadmap-item:nth-child(2){
   top: 3%;
    right: 14%;
}
.roadmap-item:nth-child(3){
   top: 5%;
   left: 9%;
}
.roadmap-item:nth-child(4){
    top: 7%;
    right: 9%;
}
.roadmap-item:nth-child(5){
    top: 9%;
    left: 10%;
}
.roadmap-item:nth-child(6){
    top: 11%;
    right: 14%;
}
.roadmap-item:nth-child(7){
    top: 13%;
    left: 9%;
}
.roadmap-item:nth-child(8){
    top: 15%;
    right: 9%;
}
.roadmap-item:nth-child(9){
    top: 17%;
    left: 10%;
}
.roadmap-item:nth-child(10){
    top: 19%;
    right: 14%;
}
.roadmap-item:nth-child(11){
    top: 21%;
    left: 9%;
}
.roadmap-item:nth-child(12){
    top: 23%;
    right: 9%;
}
.roadmap-item:nth-child(13){
    top: 25%;
    left: 10%;
}
.roadmap-item:nth-child(14){
    top: 27%;
    right: 14%;
}
.roadmap-item:nth-child(15){
    top: 29%;
    left: 9%;
}
.roadmap-item:nth-child(16){
    top: 31%;
    right: 9%;
}
.roadmap-item:nth-child(17){
    top: 33%;
    left: 10%;
}
.roadmap-item:nth-child(18){
    top: 35%;
    right: 14%;
}
.roadmap-item:nth-child(19){
    top: 37%;
    left: 9%;
}
.roadmap-item:nth-child(20){
    top: 39%;
    right: 9%;
}
.roadmap-item:nth-child(21){
    top: 41%;
    left: 10%;
}
.roadmap-item:nth-child(22){
    top: 43%;
    right: 14%;
}
.roadmap-item:nth-child(23){
    top: 45%;
    left: 9%;
}
.roadmap-item:nth-child(24){
    top: 47%;
    right: 9%;
}
.roadmap-item:nth-child(25){
    top: 49%;
    left: 10%;
}
.roadmap-item:nth-child(26){
    top: 51%;
    right: 14%;
}
.roadmap-item:nth-child(27){
    top: 53%;
    left: 9%;
}
.roadmap-item:nth-child(28){
    top: 55%;
    right: 9%;
}
.roadmap-item:nth-child(29){
   position: absolute;
    top: 57%;
    left: 10%;
}
.roadmap-item:nth-child(30){
    top: 59%;
    right: 14%;
}
.roadmap-item:nth-child(31){
    top: 61%;
    left: 8%;
}
.roadmap-item:nth-child(32){
    top: 63%;
    right: 9%;
}
.roadmap-item:nth-child(33){
    top: 65%;
    left: 10%;
}
.roadmap-item:nth-child(34){
    top: 67%;
    right: 14%;
}
.roadmap-item:nth-child(35){
    top: 69%;
    left: 8%;
}
.roadmap-item:nth-child(36){
    top: 71%;
    right: 9%;
}
.roadmap-item:nth-child(37){
    top: 73%;
    left: 10%;
}
.roadmap-item:nth-child(38){
    top: 75%;
    right: 14%;
}
.roadmap-item:nth-child(39){
    top: 77%;
    left: 8%;
}
.roadmap-item:nth-child(40){
    top: 79%;
    right: 9%;
}
.roadmap-item:nth-child(41){
    top: 81%;
    left: 10%;
}
.roadmap-item:nth-child(42){
    top: 83%;
    right: 14%;
}
.roadmap-item:nth-child(43){
    top: 85%;
    left: 8%;
}
.roadmap-item:nth-child(44){
    top: 87%;
    right: 9%;
}
.roadmap-item:nth-child(45){
    top: 89%;
    left: 10%;
}
.roadmap-item:nth-child(46){
    top: 91%;
    right: 14%;
}
.roadmap-item:nth-child(47){
    top: 93%;
    left: 8%;
}
.roadmap-item:nth-child(48){
    top: 95%;
    right: 8%;
}
.roadmap-item:nth-child(49){
    top: 97%;
    left: 9%;
}
/*.roadmap-item:nth-child(10){
   position: absolute;
    top: 107%;
    right: 4.6%;
}*/
@media only screen and (min-width: 992px) and (max-width: 1300px) {
    .roadmap-item:nth-child(1){
    top: 1%;
    left: 9%;
}
.roadmap-item:nth-child(2){
   top: 3%;
    right: 14%;
}
.roadmap-item:nth-child(3){
   top: 5%;
   left: 9%;
}
.roadmap-item:nth-child(4){
    top: 7%;
    right: 9%;
}
.roadmap-item:nth-child(5){
    top: 9%;
    left: 10%;
}
.roadmap-item:nth-child(6){
    top: 11%;
    right: 14%;
}
.roadmap-item:nth-child(7){
    top: 13%;
    left: 9%;
}
.roadmap-item:nth-child(8){
    top: 15%;
    right: 9%;
}
.roadmap-item:nth-child(9){
    top: 17%;
    left: 10%;
}
.roadmap-item:nth-child(10){
    top: 19%;
    right: 14%;
}
.roadmap-item:nth-child(11){
    top: 21%;
    left: 9%;
}
.roadmap-item:nth-child(12){
    top: 23%;
    right: 9%;
}
.roadmap-item:nth-child(13){
    top: 25%;
    left: 10%;
}
.roadmap-item:nth-child(14){
    top: 27%;
    right: 14%;
}
.roadmap-item:nth-child(15){
    top: 29%;
    left: 9%;
}
.roadmap-item:nth-child(16){
    top: 31%;
    right: 9%;
}
.roadmap-item:nth-child(17){
    top: 33%;
    left: 10%;
}
.roadmap-item:nth-child(18){
    top: 35%;
    right: 14%;
}
.roadmap-item:nth-child(19){
    top: 37%;
    left: 9%;
}
.roadmap-item:nth-child(20){
    top: 39%;
    right: 9%;
}
.roadmap-item:nth-child(21){
    top: 41%;
    left: 10%;
}
.roadmap-item:nth-child(22){
    top: 43%;
    right: 14%;
}
.roadmap-item:nth-child(23){
    top: 45%;
    left: 9%;
}
.roadmap-item:nth-child(24){
    top: 47%;
    right: 9%;
}
.roadmap-item:nth-child(25){
    top: 49%;
    left: 10%;
}
.roadmap-item:nth-child(26){
    top: 51%;
    right: 14%;
}
.roadmap-item:nth-child(27){
    top: 53%;
    left: 9%;
}
.roadmap-item:nth-child(28){
    top: 55%;
    right: 9%;
}
.roadmap-item:nth-child(29){
    top: 57%;
    left: 10%;
}
.roadmap-item:nth-child(30){
    top: 59%;
    right: 14%;
}
.roadmap-item:nth-child(31){
    top: 61%;
    left: 8%;
}
.roadmap-item:nth-child(32){
    top: 63%;
    right: 9%;
}
.roadmap-item:nth-child(33){
    top: 65%;
    left: 10%;
}
.roadmap-item:nth-child(34){
    top: 67%;
    right: 14%;
}
.roadmap-item:nth-child(35){
    top: 69%;
    left: 8%;
}
.roadmap-item:nth-child(36){
    top: 71%;
    right: 9%;
}
.roadmap-item:nth-child(37){
    top: 73%;
    left: 10%;
}
.roadmap-item:nth-child(38){
    top: 75%;
    right: 14%;
}
.roadmap-item:nth-child(39){
    top: 77%;
    left: 8%;
}
.roadmap-item:nth-child(40){
    top: 79%;
    right: 9%;
}
.roadmap-item:nth-child(41){
    top: 81%;
    left: 10%;
}
.roadmap-item:nth-child(42){
    top: 83%;
    right: 14%;
}
.roadmap-item:nth-child(43){
    top: 85%;
    left: 8%;
}
.roadmap-item:nth-child(44){
    top: 87%;
    right: 9%;
}
.roadmap-item:nth-child(45){
    top: 89%;
    left: 10%;
}
.roadmap-item:nth-child(46){
    top: 91%;
    right: 14%;
}
.roadmap-item:nth-child(47){
    top: 93%;
    left: 8%;
}
.roadmap-item:nth-child(48){
    top: 95%;
    right: 8%;
}
.roadmap-item:nth-child(49){
    top: 97%;
    left: 9%;
}
.location-left::after, .location-right::after {
    display: none;
}
}

@media only screen and (max-width: 767px) {
    .road{
        background-size: 30% 20%;
    }
    .roadmap {
    height: auto;
}
    .roadmap-content {
    width: 100%;
    margin: 0;
}
    .connector-piece { left: 30% !important; 
        width: 135px !important;
    position: unset !important;
    margin-left: -33px;
    margin-right: -33px;
 }
    .content-span-box {
/*        width: 50%;*/
        position: unset;
    }
.content-p-box {
    width: 100%;
/*        left: 27%;*/
/*        margin-left: 21px;*/
        position: unset;
}

.location-right::after, .location-left::after {
    top: -20%;
    left: 43%;
    display: none;
}
.overlay-location-left, .overlay-location-right{
    display: none;
}
    .roadmap-item:nth-child(1), 
    .roadmap-item:nth-child(2),
    .roadmap-item:nth-child(3),
    .roadmap-item:nth-child(4),
    .roadmap-item:nth-child(5),
    .roadmap-item:nth-child(6),
    .roadmap-item:nth-child(7),
    .roadmap-item:nth-child(8),
    .roadmap-item:nth-child(9),
    .roadmap-item:nth-child(10),
    .roadmap-item:nth-child(11),
    .roadmap-item:nth-child(12),
    .roadmap-item:nth-child(13),
    .roadmap-item:nth-child(14),
    .roadmap-item:nth-child(15),
    .roadmap-item:nth-child(16),
    .roadmap-item:nth-child(17),
    .roadmap-item:nth-child(18),
    .roadmap-item:nth-child(19),
    .roadmap-item:nth-child(20),
    .roadmap-item:nth-child(21),
    .roadmap-item:nth-child(22),
    .roadmap-item:nth-child(23),
    .roadmap-item:nth-child(24),
    .roadmap-item:nth-child(25),
    .roadmap-item:nth-child(26),
    .roadmap-item:nth-child(27),
    .roadmap-item:nth-child(28),
    .roadmap-item:nth-child(29),
    .roadmap-item:nth-child(30),
    .roadmap-item:nth-child(31),
    .roadmap-item:nth-child(32),
    .roadmap-item:nth-child(33),
    .roadmap-item:nth-child(34),
    .roadmap-item:nth-child(35),
    .roadmap-item:nth-child(36),
    .roadmap-item:nth-child(37),
    .roadmap-item:nth-child(38),
    .roadmap-item:nth-child(39),
    .roadmap-item:nth-child(40),
    .roadmap-item:nth-child(41),
    .roadmap-item:nth-child(42),
    .roadmap-item:nth-child(43),
    .roadmap-item:nth-child(44),
    .roadmap-item:nth-child(45),
    .roadmap-item:nth-child(46),
    .roadmap-item:nth-child(47),
    .roadmap-item:nth-child(48),
    .roadmap-item:nth-child(49){position: unset; margin-top: 1.5em}

    .roadmap-content p {
        font-size: 11px;
     }
     .roadmap-content span {
    font-size: 14px;
    margin: 1px;
/*    width: unset;*/
}
}

/* Tablet Layout: 768px. */
@media only screen and (min-width: 768px) and (max-width: 991px) {
     .road{
        background-size: 30% 20%;
    }
    .roadmap {
    height: auto;
}
    .roadmap-content {
    width: 100%;
    margin: 0;
}
.location-right::after, .location-left::after {
    top: -20%;
    left: 50%;
}
.overlay-location-left, .overlay-location-right{
    display: none;
}
    .roadmap-item:nth-child(1), 
    .roadmap-item:nth-child(2),
    .roadmap-item:nth-child(3),
    .roadmap-item:nth-child(4),
    .roadmap-item:nth-child(5),
    .roadmap-item:nth-child(6),
    .roadmap-item:nth-child(7),
    .roadmap-item:nth-child(8),
    .roadmap-item:nth-child(9){position: unset; margin-top: 2.5em}

    .roadmap-content p {
        font-size: 18px;
     }
     .roadmap-content span {
    font-size: 20px;
    margin: 1px;
/*    width: unset;*/
}
.content-span-box {
    width: 180px;
/*    height: 150px;*/
}
.connector-piece { left: 30% !important; 
        width: 128px !important;
    position: unset !important;
    margin-left: -33px;
    margin-right: -33px;
 }
    .content-span-box {
        width: 50%;
        position: unset;
    }
.content-p-box {
    width: 100%;
/*        left: 27%;*/
/*        margin-left: 21px;*/
        position: unset;
}
}

/*__________________________________________________________*/

.roadmap-item-new {
    display: flex;
    align-items: center;
    /* margin: 20px auto; */
    /* width: fit-content; */
    /* max-width: 600px; */
/*    position: relative;*/
    transform: perspective(1000px);
}

/* Styles for the solid blue vertical rectangle/block */
.blue-block {
    /*width: 80px;
    height: 80px;
    background-color: #0c77cf;
    border-radius: 5px 0 0 5px; 
    flex-shrink: 0;
    z-index: 2;*/
}

/* NEW: Styles for the connector piece */
.connector-piece {
    width: 100px;
    height: 15px;
    background-color: #ffffff;
    position: absolute;
    left: 21%;
    z-index: 1;
    margin-left: -32px;
    margin-right: -43px;
    margin-bottom: 4px;
    transform: skewX(5deg);
    transform: rotateZ(90deg) skewX(14deg);
    /* background: linear-gradient(to right, #0c77cf, #1a9cff); */
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.2);
}

/* Styles for the white rectangular card */
.white-card {
/*    background-color: #fff;
    border-radius: 0 5px 5px 0;
    padding: 15px 25px;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 80px;
    z-index: 2;
    margin-bottom: 4px;
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.2);
}*/

.white-card p {
    margin: 0;
    font-size: 18px;
    color: #333;
    text-align: center;
}

/* Responsive Adjustments (basic example) */
@media (max-width: 768px) {
    .roadmap-item-new {
        flex-direction: column;
        align-items: flex-start;
        width: 90%;
        max-width: unset;
    }

    .blue-block {
        width: 100%;
        height: 40px;
        border-radius: 5px 5px 0 0;
        margin-bottom: -5px; /* Adjust for connector overlap in vertical layout */
    }

    .connector-piece {
        width: 100%; /* Connector takes full width */
        height: 20px; /* Adjust height for mobile */
        transform: none; /* Remove skew for vertical layout */
        margin-left: 0;
        margin-right: 0;
        margin-top: -5px; /* Adjust for blue block overlap */
        margin-bottom: -5px; /* Adjust for white card overlap */
        border-radius: 0; /* No specific radius for a simple rectangle */
    }

    .white-card {
        width: 100%;
        margin-left: 0;
        margin-top: -5px;
        border-radius: 0 0 5px 5px;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
        height: auto;
        padding: 10px 15px;
    }
}