/* Base tooltip styling */
.tooltip-wrapper {
    position: relative;
    display: inline-block;
    cursor: pointer;
    z-index: 100; /* Ensure the tooltip wrapper has a high z-index */
}

.tooltip-wrapper .tooltip-text {
    visibility: hidden;
    width: 120px;
    background-color: #000;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 20px 10px;
    position: absolute;
    z-index: 9999; /* Very high z-index to bring it forward */
    bottom: 125%; /* Position above the tooltip-wrapper */
    left: 50%;
    margin-left: -60px; /* Center the tooltip */
    opacity: 0;
    transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out; /* Add smooth transition */
    max-width: 90vw; /* Ensure it fits on small screens */
    word-wrap: break-word; /* Break long words */
}

.tooltip-wrapper .tooltip-text::after {
    content: "";
    position: absolute;
    top: 100%; /* At the bottom of the tooltip */
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
	  overflow:visible;
    border-color: #000 transparent transparent transparent;
}

.tooltip-wrapper:hover .tooltip-text {
    visibility: visible;
    opacity: 1;
}

/* Responsive adjustments for smaller screens */
@media (max-width: 768px) {
    .tooltip-wrapper .tooltip-text {
        width: 100px; /* Reduce width on smaller screens */
			  overflow:visible;
        bottom: 100%; /* Adjust positioning */
        left: 50%; 
        margin-left: -50px; /* Adjust centering */
    }

    .tooltip-wrapper .tooltip-text::after {
        margin-left: -4px; /* Adjust arrow centering */
        border-width: 4px;
    }
}

@media (max-width: 480px) {
    .tooltip-wrapper .tooltip-text {
        width: 90px; /* Further reduce width for mobile phones */
        padding: 10px 5px; /* Reduce padding */
        overflow:visible;
        font-size: 12px; /* Smaller font for mobile */
        bottom: 90%; /* Further adjust position for mobile */
        left: 50%;
        margin-left: -45px; /* Adjust tooltip centering */
    }

    .tooltip-wrapper .tooltip-text::after {
        margin-left: -3px; /* Adjust arrow centering for mobile */
        border-width: 3px;
    }
}



/* clone2*/
/* Tooltip Box */
.tooltip-box {
    position: relative;
    display: inline-block;
    cursor: pointer;
    z-index: 100; /* Ensure the tooltip box has a high z-index */
}

/* Tooltip Text */
.tooltip-box .tooltip-text {
    visibility: hidden;
    width: 120px;
    background-color: rgba(59, 72, 80, 0.9); /* Use fancy background */
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 10px 18px;
    position: absolute;
    z-index: 9999; /* Very high z-index to bring it forward */
    bottom: 125%; /* Position above the tooltip-box */
    left: 50%;
    margin-left: -60px; /* Center the tooltip */
    opacity: 0;
    transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
    box-shadow: 0px 0px 24px rgba(0, 0, 0, 0.2);
    white-space: pre-wrap;
    font-size: 14px;
    background-image: linear-gradient(30deg,
        rgba(59, 72, 80, 0.44),
        rgba(59, 68, 75, 0.44),
        rgba(60, 82, 88, 0.44));
    transform: translate(-50%, calc(0px - 5px)) scale(0.5);
}

/* Tooltip Arrow */
.tooltip-box .tooltip-text::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: rgba(55, 64, 70, 0.9) transparent transparent transparent;
    transform-origin: top;
    transform: translateX(-50%) scaleY(0);
}

/* Tooltip hover effect */
.tooltip-box:hover .tooltip-text {
    visibility: visible;
    opacity: 1;
    transform: translate(-50%, calc(0px - 5px)) scale(1);
}

/* Tooltip arrow hover effect */
.tooltip-box:hover .tooltip-text::after {
    transform: translateX(-50%) scaleY(1);
}

/* Optional for different tooltip directions (left, right, bottom) */
[data-tooltip-location="left"] .tooltip-text,
[data-tooltip-location="right"] .tooltip-text,
[data-tooltip-location="bottom"] .tooltip-text {
    /* Same positioning logic from your first code can be added here for these variations */
}

/* Responsive styling */
@media (max-width: 750px) {
    .tooltip-box .tooltip-text {
        font-size: 20px;
        width: auto;
    }
}