.image-container {
 position: relative;
 display: inline-block;
 margin: 0;
 }

 .base-image {
 display: block;
 max-width: 100%;
 height: auto;
 }

 .check-badge {
 position: absolute;
 bottom: 12px;
 left: 12px;
 width: 26px;
 height: 26px;
 background-image: linear-gradient(
 to bottom,
 #ffffff 0%, #ffffff 33.33%,
 #0056b3 33.33%, #0056b3 66.66%,
 #d4002a 66.66%, #d4002a 100%
 );
 border: 2px solid #ffffff;
 border-radius: 50%;
 cursor: help;
 z-index: 10;
 }

 .tooltip-box {
 position: absolute;
 bottom: -1px;
 left: 45px;
 margin-left: 10px;
 transform: translateY(-50%) translateX(10px);
 opacity: 0;
 visibility: hidden;
 transition: opacity 0.2s ease, transform 0.2s ease;
 z-index: 20;
 pointer-events: none;
 }

 .tooltip-box.visible {
 opacity: 1;
 visibility: visible;
 transform: translateY(-50%) translateX(0);
 }

 .tooltip-content {
 background: #fff;
 padding: 4px 10px;
 border-radius: 3px;
 box-shadow: 0 4px 12px rgba(0,0,0,0.15);
 font-size: 13px;
 color: #333;
 white-space: nowrap;
 }

 .tooltip-content::after {
 content: '';
 position: absolute;
 top: 50%;
 right: 100%;
 margin-top: -6px;
 width: 0;
 height: 0;
 border-top: 6px solid transparent;
 border-bottom: 6px solid transparent;
 border-right: 6px solid #fff;
 }

.check-badge1 {
position: absolute;
bottom: 12px;
left: 12px;
width: 26px;
height: 26px;
background-color: #2ecc71;
border: 2px solid #ffffff;
border-radius: 50%;
cursor: help;
display: flex;
align-items: center;
justify-content: center;
}

.checkmark1 {
width: 20px;
height: 20px;
}