.info-icon {
    position: relative;
    cursor: pointer;  /* Make it clear the icon is clickable */
    color: #007bff;   /* You can change the color of the icon */
	
}

.info-icon .tooltip-text {
	
	font-size:0.8rem;
    visibility: hidden;  /* Initially hide the tooltip */
    width: 200px;         /* Width of the tooltip */
    background-color: #333;  /* Background color of the tooltip */
    color: #fff;            /* Text color */
    text-align: center;     /* Center align the text */
    border-radius: 5px;     /* Rounded corners */
    padding: 5px;           /* Padding inside the tooltip */
    position: absolute;     /* Positioning */
    z-index: 1;             /* Ensure the tooltip is above other elements */
    bottom: 100%;           /* Position above the icon */
    left: 50%;              /* Center horizontally */
    margin-left: -100px;    /* Adjust to align tooltip correctly */
    opacity: 0;             /* Make it invisible by default */
    transition: opacity 0.3s; /* Smooth fade-in effect */
}

.info-icon:hover .tooltip-text {
	font-weight: normal;
    visibility: visible;    /* Show tooltip when hovering */
    opacity: 1;              /* Make the tooltip visible */
}