.Roadmap{
    margin-top: 147px;
    position: relative;
    z-index: 2
}
.Roadmap h2{
    display: flex;
    justify-content: center;
    font-family: 'Sofia Pro';
    font-style: normal;
    font-weight: 800;
    font-size: 74px;
    
    /* identical to box height, or 64% */


    color: #FFFFFF;
}

.Roadmap .RoadmapImgContainer{
    position: relative;
    display: flex;
    justify-content: center;
    width: 100%;
    

    background: linear-gradient(360deg, rgba(20, 34, 65, 0.4) 21.86%, rgba(0, 0, 0, 0) 43.14%), url(Layer_1.png);
    filter: drop-shadow(0px 20px 94px rgba(19, 33, 64, 0.5));
    border-radius: 40px;
}

.Roadmap .RoadmapImgContainer .roadmapimg{
    position: relative;
    width: 94%;

}


.Roadmap .RoadmapImgContainer .rain{
    position: absolute;
    top: 5%;
    width: 77.5%;
    
    border-radius: 50px;
}

.Roadmap .RoadmapImgContainer .label1{
    position: absolute;
    width: 25%;
    left: 9.6%;
    top: 5.9%;
    opacity: 0.01;
    z-index: 1;
}

.Roadmap .RoadmapImgContainer .label2{
    position: absolute;
    width: 39.7%;
    left: 9.6%;
    bottom: 6.9%;
    opacity: 0.01;
    z-index: 1;
}

.Roadmap .RoadmapImgContainer .label3{
    position: absolute;
    width: 20.85%;
    left: 31.2%;
    bottom: 15.1%;
    opacity: 0.01;
    z-index: 1;
}

.Roadmap .RoadmapImgContainer .label4{
    position: absolute;
    width: 25.13%;
    right: 15.74%;
    top: 18.2%;
    opacity: 0.01;
    z-index: 1;
}

.Roadmap .RoadmapImgContainer .label5{
    position: absolute;
    width: 25.1%;
    right: 24.6%;
    bottom: 7%;
    opacity: 0.01;
    z-index: 1;
}

 

.Roadmap .RoadmapImgContainer .label1:hover{
    opacity: 1;
}
#l1:hover~#rm-text-label1{
    opacity: 1;
    display: flex;
}



.Roadmap .RoadmapImgContainer .label2:hover{
    opacity: 1;
}

#l2:hover~#rm-text-label2{
    opacity: 1;
    display: flex;
}

.Roadmap .RoadmapImgContainer .label3:hover{
    opacity: 1;
}

#l3:hover~#rm-text-label3{
    opacity: 1;
    display: flex;
}

.Roadmap .RoadmapImgContainer .label4:hover{
    opacity: 1;
}

#l4:hover~#rm-text-label4{
    opacity: 1;
    display: flex;
}

.Roadmap .RoadmapImgContainer .label5:hover{
    opacity: 1;
}

#l5:hover~#rm-text-label5{
    opacity: 1;
    display: flex;
}





.Roadmap .RoadmapImgContainer .roadmapcontainer{
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    position: absolute;
    /* background-color: rgba(0, 0, 0, 0.6); */
    background-color: #1F315E;
    border-radius: 50px;
    align-items: center;
    display: none;
    opacity: 0;
    
    z-index: 3;
}


.Roadmap .RoadmapImgContainer .roadmapcontainer:hover{
    display: flex;
    opacity: 1;
}
.Roadmap .RoadmapImgContainer .l1-text{
    width: 42%;
   
    top: 10%;
    left: 20%;
}
.Roadmap .RoadmapImgContainer .l1-text p{
    padding: 4%;
}
.Roadmap .RoadmapImgContainer .l2-text{
    width: 42%;
 
    top: 70%;
    left: 17%;
}
.Roadmap .RoadmapImgContainer .l2-text p{
   margin: 9%;
}
.Roadmap .RoadmapImgContainer .l3-text{
    width: 42%;
    
    top: 30%;
    display: none;
    left: 27%;
}

.Roadmap .RoadmapImgContainer .l3-text p{
    margin: 9%;
}

.Roadmap .RoadmapImgContainer .l4-text{
    width: 42%;
   
    top: 13%;
    display: none;
    left: 40%;
}

.Roadmap .RoadmapImgContainer .l4-text p{
    margin: 9%;
}

.Roadmap .RoadmapImgContainer .l5-text{
    width: 42%;
  
    top: 55%;
    display: none;
    left: 45%;
}

.Roadmap .RoadmapImgContainer .l5-text p{
    margin: 9%;
}

.Roadmap .RoadmapImgContainer .roadmapcontainer p{
    position: relative;
    display: flex;
    justify-content: center;
    z-index: 6;
    font-family: 'Sofia Pro';
    font-style: normal;
    font-weight: 400;
    font-size: 22px;

    width: 100%;
    color: #FFFFFF;
}