/* Color Variables */
    :root {
    	--ipm-bg: #F9F1E4;
    	--ipm-yellow: #FFDC00;
    	--ipm-text: #333;
    	--ipm-text-light: #666;
    	--ipm-accent: #222;
    	--ipm-white: #fff;
    	--ipm-border: #dcd0b3;
    }

    .ipm-container {
    	/*    	background-color: var(--ipm-bg);*/
    	padding: 0px 40px 100px 40px;
    	color: var(--ipm-text);
    	box-sizing: border-box;
    	overflow: hidden;
    }

    .ipm-bg-image {
    	position: absolute;
    	right: 1%;
    	top: -5%;
    	width: 65%;
    	height: 100%;
    	z-index: -1;
    }

    .moblie-size {
    	display: none;
    }

    .desktop-size {
    	display: block;
    }

    .ipm-container * {
    	box-sizing: border-box;
    }

    /* HERO SECTION */
    .ipm-hero {
    	display: flex;
    	gap: 60px;
    	/* align-items: center; */
    	margin-bottom: 80px;
    }

    .ipm-hero-content {
    	flex: 0 0 40%;
    	max-width: 500px;
    }

    .ipm-logo-badge {
    	position: relative;
    	width: 100px;
    	height: 100px;
    	border-radius: 50%;
    	/* background: url('data:image/svg+xml;utf8,<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg"><circle cx="50" cy="50" r="45" fill="%23fff" stroke="%23ffcc00" stroke-width="2" stroke-dasharray="4,4"/><circle cx="50" cy="50" r="35" fill="%23e31837"/></svg>') center/contain no-repeat; */
    	margin-bottom: 30px;
    }

    .ipm-hero-title {
    	font-size: 2.2rem;
    	font-weight: normal;
    	/* Match design which looks more like a serif heading */
    	line-height: 1.3;
    	margin-bottom: 20px;
    	color: #3e3e3e;
    }

    .ipm-hero-desc {
    	font-size: 1.1rem;
    	line-height: 1.6;
    	color: var(--ipm-text-light);
    	margin-bottom: 40px;
    	/* font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif; */
    }


    /* Slider controls container */
    .ipm-slider-controls {
    	display: flex;
    	gap: 15px;
    }

    /* Button styles */
    .ipm-btn-prev,
    .ipm-btn-next {
    	width: 50px;
    	height: 50px;
    	border-radius: 50%;
    	border: 1px solid #bba375;
    	background: transparent;
    	color: #bba375;
    	font-size: 1.2rem;
    	cursor: pointer;
    	display: flex;
    	align-items: center;
    	justify-content: center;
    	position: relative;
    	overflow: hidden;
    	/* ensures pseudo-element doesn't overflow */
    	transition: color 0.3s, border-color 0.3s;
    }

    .ipm-btn-next::before,
    .ipm-btn-prev::before {
    	content: "";
    	position: absolute;
    	bottom: 0;
    	/* start at bottom */
    	left: 50%;
    	/* center horizontally */
    	width: 20px;
    	height: 20px;
    	background: #E9D3B3;
    	border-radius: 50%;
    	transform: translateX(-50%) scale(0);
    	/* shift left by 50% to center */
    	transition: transform 0.5s ease;
    	z-index: -1;
    }

    /* Hover state: expand from bottom center */
    .ipm-btn-next:hover::before,
    .ipm-btn-prev:hover::before {
    	transform: translateX(-50%) scale(15);
    	/* adjust scale as needed */
    }

    /* Optional: button color on hover */
    .ipm-btn-next:hover,
    .ipm-btn-prev:hover {
    	color: #fff;
    	border-color: #E9D3B3;
    }

    /* MAP SECTION */
    .ipm-hero-map {
    	flex: 1;
    	position: relative;
    	display: contents;
    }

    .ipm-map-wrapper {
    	position: relative;
    	width: 100%;
    }

    .ipm-map-img {
    	width: 100%;
    	height: auto;
    	/* display: block; */
    	mix-blend-mode: multiply;
    	/* Blends map with background nicely */
    }

    .ipm-pin {
    	position: absolute;
    	width: 24px;
    	height: 24px;
    	background: var(--ipm-yellow);
    	border-radius: 50%;
    	transform: translate(-50%, -50%);
    	/* Center on coordinate */
    	display: flex;
    	align-items: center;
    	justify-content: center;
    	color: var(--ipm-text);
    	cursor: pointer;
    	transition: all 0.3s;
    	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    	z-index: 10;
    }

    .ipm-pin svg, .ipm-round-pin svg {
    	width: 30px;
    	height: 30px;
    }

    .ipm-pin:hover {
    	transform: translate(-50%, -50%) scale(1.2);
    }

    .ipm-pin.active {
    	background: var(--ipm-accent);
    	color: var(--ipm-white) !important;
    	transform: translate(-50%, -50%) scale(1.3);
    	z-index: 20;
    }

    /* SLIDER SECTION */
    .ipm-slider {
    	width: 100%;
    	overflow: hidden;
    	/* Prevent cards spilling out, but JS needs to slide inner track */
    }

    .ipm-slider-track {
    	display: flex;
    	gap: 20px;
    	transition: transform 0.4s ease-in-out;
    }

    .ipm-slide-card {
    	flex: 0 0 calc(25% - 15px);
    	/* 4 cards visible roughly */
    	height: 300px;
    	position: relative;
    	cursor: pointer;
    	transition: transform 0.3s, box-shadow 0.3s;
    	/* font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif; */
    	overflow: hidden;
    }

    /* ===== FIX: ACTIVE CARD BLACK ===== */
    .ipm-slide-card.active .ipm-round-pin {
    	background: #000;
    	color: #fff;
    }


    .ipm-slide-card:hover {
    	transform: translateY(-5px);
    	box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
    }

    /* Layer Management */
    .ipm-card-image-layer,
    .ipm-card-metric-layer {
    	position: absolute;
    	top: 0;
    	left: 0;
    	right: 0;
    	bottom: 0;
    	transition: opacity 0.4s ease, transform 0.4s ease;
    }

    /* Image Layer (Hidden by default) */
    .ipm-card-image-layer {
    	z-index: 1;
    	opacity: 0;
    	transform: scale(1.05);
    	/* Slight zoom out effect on hover */
    }

    .ipm-slide-card:hover .ipm-card-image-layer {
    	opacity: 1;
    	transform: scale(1);
    }

    /* Metric Layer (Visible by default) */
    .ipm-card-metric-layer {
    	background: var(--ipm-yellow);
    	padding: 30px;
    	display: flex;
    	flex-direction: column;
    	z-index: 2;
    	opacity: 1;
    }

    .ipm-slide-card:hover .ipm-card-metric-layer {
    	opacity: 0;
    	pointer-events: none;
    }

    /* Image Card Inner Styles */
    .ipm-card-bg {
    	position: absolute;
    	top: 0;
    	left: 0;
    	right: 0;
    	bottom: 0;
    	z-index: 1;
    }

    .ipm-card-img,
    .ipm-placeholder-img {
    	width: 100%;
    	height: 100%;
    	object-fit: cover;
    }

    .ipm-placeholder-img {
    	background: #333;
    }

    .ipm-card-overlay {
    	position: absolute;
    	bottom: 0;
    	left: 0;
    	right: 0;
    	height: 50%;
    	background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
    	z-index: 2;
    }

    .ipm-image-content {
    	position: absolute;
    	bottom: 0;
    	left: 0;
    	right: 0;
    	padding: 20px;
    	display: flex;
    	justify-content: space-between;
    	align-items: flex-end;
    	color: var(--ipm-white);
    	z-index: 3;
    }

    .ipm-image-content .ipm-card-title {

    	font-size: 1.5rem;
    	font-weight: normal;
    	margin: 0;
    	color: var(--ipm-white);
    	/* Ensure it's white here */
    }

    /* Metric Card Inner Styles */
    .ipm-card-metric-num {
    	display: none;
    	font-size: 4rem;
    	line-height: 1;
    	font-weight: normal;
    	margin-bottom: 15px;
    	color: var(--ipm-accent);
    }

    .ipm-card-metric-desc {
    	font-size: 0.85rem;
    	line-height: 1.4;
    	color: rgba(0, 0, 0, 0.8);
    	flex-grow: 1;
    	margin: 0;
    }

    .ipm-card-metric-layer .ipm-card-footer {
    	display: flex;
    	justify-content: space-between;
    	align-items: flex-end;
    	margin-top: 20px;
    }

    .ipm-card-metric-layer .ipm-card-title {
    	/* font-family: Georgia, "Times New Roman", Times, serif; */
    	font-size: 1.5rem;
    	font-weight: normal;
    	margin: 0;
    	color: var(--ipm-accent);
    }

    /* Icons within cards */
    .ipm-round-pin {
    	width: 30px;
    	height: 30px;
    	border-radius: 50%;
    	display: flex;
    	align-items: center;
    	justify-content: center;
    }

    .bg-white {
    	background: var(--ipm-white);
    }

    .text-dark {
    	color: var(--ipm-accent);
    }

    .outline-dark {
    	border: 1px solid rgba(0, 0, 0, 0.3);
    	background: transparent;
    }

    @media (max-width: 1200px) {
    	.ipm-slide-card {
    		flex: 0 0 calc(33.333% - 14px);
    	}
    }

    @media (max-width: 1024px) {
    .desktop-size {
        /* display: none; */
        top: 5%;
        right: 0;
        width: 75%;
    }
}
		
	@media (max-width:980px) {

			.moblie-size {
    		display: block;
    	}

    	.desktop-size {
    		display: none;
    	}
	}

    @media (max-width:786px) {
    

    	.ipm-container {
    		padding: 60px 0px;
    	}

    	.ipm-pin {
    		display: none;
    	}

    	.ipm-pin.active {
    		display: flex;
    	}
    }

    @media (max-width: 991px) {
    	.ipm-hero {
    		flex-direction: column;
    		gap: 30px;
    		margin-bottom: 40px;
    	}

    	.ipm-hero-content,
    	.ipm-hero-map {
    		flex: none;
    		width: 100%;
    	}

    	.ipm-slide-card {
    		flex: 0 0 calc(50% - 10px);
    	}
    }

    @media (max-width: 600px) {
    	.ipm-slide-card {
    		flex: 0 0 100%;
    	}
    }