HTML Right Arrow with Circle Background
.arrow-container {
display: flex;
justify-content: center;
align-items: center;
position: relative;
margin-top: 4.5rem;
}
.vertical-line {
border-left: 4px solid #0066bf;
height: 508px;
position: relative;
}
.circle {
width: 48px;
height: 48px;
background-color: #3b90da;
border-radius: 50%;
border: solid 2.3px #0066bf;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.arrow {
position: absolute;
font-size: 29px; /* Adjust the size of the arrow text */
top: 46.3%; /* Position the arrow vertically centered */
right: 3;
font-weight: 700 !mportant;/*
Position the arrow to the right of the circle */
color: white; /* Color of the arrow */
}
.downarrow {
position: absolute;
font-size: 29px; /* Adjust the size of the arrow text */
top: 46.3%; /* Position the arrow vertically centered */
right: 3;
font-weight: 700 !mportant;/*
Position the arrow to the right of the circle */
color: white; /* Color of the arrow */
display:none;
}
