.hotspot-container {
    position: relative;
    width: 100%;
    max-width: 800px; /* Adjust based on your layout */
    margin: 0 auto;
}

.hotspot-background {
    width: 100%;
    height: auto;
}

.hotspot-background-cleartainer {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 150%;
    height: auto;
    z-index: 0; /* Optional: if you need it behind other content */
}

.hotspot-items {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.hotspot {
    position: absolute;
    cursor: pointer;
}

.hotspot-marker {
    position: relative; /* Ensures ::before pseudo-element is positioned correctly */
    width: 16px; /* Keeps the marker small */
    height: 16px;
    background: #0568AC;
    border-radius: 50%;
    border: 4px solid rgba(5, 104, 172, 0.5);
    box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.5);
    transition: transform 0.2s ease-in-out;
}

/* Expanding the clickable area without affecting the visible size */
.hotspot-marker::before {
    content: "";
    position: absolute;
    top: -14px; /* Expands the touch area evenly */
    left: -14px;
    width: 44px; /* Expands the click area */
    height: 44px;
    background: transparent; /* Keeps it invisible */
    z-index: -1; /* Ensures it doesn't interfere with visuals */
}

/* Slight scaling effect on hover/tap for feedback */
.hotspot-marker:hover,
.hotspot-marker:active {
    transform: scale(1.8);
}

.hotspot-marker.light-bg-marker {
    border: 10px solid #0199AD;
    box-shadow: 0 0 0 12px rgba(0, 0, 0, 0.75);
}



.hotspot-popup {
    display: none;
    position: absolute;
    top: 30px;
    left: 0%;
    transform: translateX(-50%);
    background: rgba(255, 255, 255, 1);
    color: white;
    padding: 0px !important;
    border-radius: 10px;
    text-align: left;
    width: 300px;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
    z-index: 20;
	border: 2px solid #0568AC;
}

/* Bottom-aligned popups: Content appears just above the hotspot */
.hotspot-popup.bottom {
    top: auto;
    bottom: 100%; /* Moves the popup fully above the marker */
    left: 50%; /* Centers the popup horizontally */
    right: auto;
    transform: translateX(-50%); /* Ensures the popup is centered above the marker */
    margin-bottom: 10px; /* Adds spacing between the popup and the marker */
}

.hotspot-popup.bottom-right-25 {
    top: auto;
	bottom: 30px;
    left: 25px;
    right: auto;
    transform: translateX(-50%); /* Ensures the popup is centered above the marker */
    margin-bottom: 10px; /* Adds spacing between the popup and the marker */
}
.hotspot-popup.bottom-right-50 {
    top: auto;
	bottom: 30px;
    left: 50px;
    right: auto;
    transform: translateX(-50%); /* Ensures the popup is centered above the marker */
    margin-bottom: 10px; /* Adds spacing between the popup and the marker */
}
.hotspot-popup.bottom-right-75 {
    top: auto;
	bottom: 30px;
    left: 75px;
    right: auto;
    transform: translateX(-50%); /* Ensures the popup is centered above the marker */
    margin-bottom: 10px; /* Adds spacing between the popup and the marker */
}
.hotspot-popup.bottom-right-100 {
    top: auto;
	bottom: 30px;
    left: 100px;
    right: auto;
    transform: translateX(-50%); /* Ensures the popup is centered above the marker */
    margin-bottom: 10px; /* Adds spacing between the popup and the marker */
}
.hotspot-popup.bottom-right-150 {
    top: auto;
	bottom: 30px;
    left: 150px;
    right: auto;
    transform: translateX(-50%); /* Ensures the popup is centered above the marker */
    margin-bottom: 10px; /* Adds spacing between the popup and the marker */
}
.hotspot-popup.bottom-left-25 {
    top: auto;
	bottom: 30px;
    left: -25px;
    right: auto;
    transform: translateX(-50%); /* Ensures the popup is centered above the marker */
    margin-bottom: 10px; /* Adds spacing between the popup and the marker */
}
.hotspot-popup.bottom-left-50 {
    top: auto;
	bottom: 30px;
    left: -50px;
    right: auto;
    transform: translateX(-50%); /* Ensures the popup is centered above the marker */
    margin-bottom: 10px; /* Adds spacing between the popup and the marker */
}

.hotspot-popup.bottom-left-100 {
    top: auto;
	bottom: 30px;
    left: -100px;
    right: auto;
    transform: translateX(-50%); /* Ensures the popup is centered above the marker */
    margin-bottom: 10px; /* Adds spacing between the popup and the marker */
}

.hotspot-popup.top-right-25 {     
	top: 30px;
    left: 25px;
}
.hotspot-popup.top-right-50 {     
	top: 30px;
    left: 50px;
}
.hotspot-popup.top-left-25 {     
	top: 30px;
	left: -25px;
}
.hotspot-popup.top-left-50 {     
	top: 30px;
	left: -50px;
}
.hotspot-popup.top-left-75 {     
	top: 30px;
	left: -75px;
}
.hotspot-popup.top-left-100 {     
	top: 30px;
	left: -100px;
}
.hotspot-popup.top-right-75 {     
	top: 30px;
    left: 75px;
}
.hotspot-popup.top-right-100 {     
	top: 30px;
    left: 100px;
}

.hotspot-popup.top-right-125 {     
	top: 30px;
    left: 125px;
}

.hotspot-popup img {
    width: 100%;
    max-height: 200px;
    object-fit: fill;
    margin-bottom: 12px;
}

.hotspot:hover .hotspot-popup {
    display: block;
}

.popup-title{
	font-size:16px;
	color: #002A48;
	font-weight:600;
	text-align:left;
	padding: 16px 16px 0 16px;
	text-transform:uppercase;
}

.popup-description{
	font-size:16px;
	color: #002A48;
	font-weight:400;
	padding:0 16px 16px 16px;
}

.popup-description ul {
	list-style-position:outside;
}

.popup-description ul li {
	margin-bottom:8px;
	padding-left:0px;
}

p.paddingtop10{
	padding-top:10px;
}