/* Brand color utilities for Elementor.
   Add a class in Advanced → CSS Classes, e.g. "salopal-bg-nude" or "salopal-text-espresso". */
.elementor .salopal-bg-nude,
.salopal-bg-nude { background-color: var(--salopal-nude) !important; }
.elementor .salopal-bg-cream,
.salopal-bg-cream { background-color: var(--salopal-cream) !important; }
.elementor .salopal-bg-taupe,
.salopal-bg-taupe { background-color: var(--salopal-taupe) !important; }
.elementor .salopal-bg-sand,
.salopal-bg-sand { background-color: var(--salopal-sand) !important; }
.elementor .salopal-bg-espresso,
.salopal-bg-espresso { background-color: var(--salopal-espresso) !important; }
.elementor .salopal-bg-mocha,
.salopal-bg-mocha { background-color: var(--salopal-mocha) !important; }
.elementor .salopal-bg-champagne,
.salopal-bg-champagne { background-color: var(--salopal-champagne) !important; }
.elementor .salopal-bg-white,
.salopal-bg-white { background-color: var(--salopal-white) !important; }
.elementor .salopal-bg-black,
.salopal-bg-black { background-color: var(--salopal-black) !important; }

.elementor .salopal-text-nude,
.elementor .salopal-text-nude .elementor-heading-title,
.elementor .salopal-text-nude .elementor-widget-container,
.salopal-text-nude { color: var(--salopal-nude) !important; }
.elementor .salopal-text-cream,
.elementor .salopal-text-cream .elementor-heading-title,
.elementor .salopal-text-cream .elementor-widget-container,
.salopal-text-cream { color: var(--salopal-cream) !important; }
.elementor .salopal-text-taupe,
.elementor .salopal-text-taupe .elementor-heading-title,
.elementor .salopal-text-taupe .elementor-widget-container,
.salopal-text-taupe { color: var(--salopal-taupe) !important; }
.elementor .salopal-text-sand,
.elementor .salopal-text-sand .elementor-heading-title,
.elementor .salopal-text-sand .elementor-widget-container,
.salopal-text-sand { color: var(--salopal-sand) !important; }
.elementor .salopal-text-espresso,
.elementor .salopal-text-espresso .elementor-heading-title,
.elementor .salopal-text-espresso .elementor-widget-container,
.salopal-text-espresso { color: var(--salopal-espresso) !important; }
.elementor .salopal-text-mocha,
.elementor .salopal-text-mocha .elementor-heading-title,
.elementor .salopal-text-mocha .elementor-widget-container,
.salopal-text-mocha { color: var(--salopal-mocha) !important; }
.elementor .salopal-text-champagne,
.elementor .salopal-text-champagne .elementor-heading-title,
.elementor .salopal-text-champagne .elementor-widget-container,
.salopal-text-champagne { color: var(--salopal-champagne) !important; }
.elementor .salopal-text-white,
.elementor .salopal-text-white .elementor-heading-title,
.elementor .salopal-text-white .elementor-widget-container,
.salopal-text-white { color: var(--salopal-white) !important; }
.elementor .salopal-text-black,
.elementor .salopal-text-black .elementor-heading-title,
.elementor .salopal-text-black .elementor-widget-container,
.salopal-text-black { color: var(--salopal-black) !important; }

/* Zoom the background layer only — never scale the container itself.
   Scaling .background-zoom caused horizontal page scroll because overflow
   on a transformed element does not clip that element's own overflow. */
.elementor .background-zoom,
.background-zoom {
	overflow: hidden !important;
	transform: none !important;
	animation: none !important;
	transition: none !important;
	position: relative;
	isolation: isolate;
}

.elementor .background-zoom::before,
.background-zoom::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background-image: inherit;
	background-position: center center;
	background-size: cover;
	background-repeat: no-repeat;
	background-attachment: scroll;
	transform-origin: center center;
	animation: backgroundZoom 5s ease-out forwards;
	will-change: transform;
}

.elementor .background-zoom > *,
.background-zoom > * {
	position: relative;
	z-index: 1;
}

@keyframes backgroundZoom {
	from {
		transform: scale(1);
	}

	to {
		transform: scale(1.06);
	}
}


.price-col {
		display: flex;
		flex-wrap: wrap;
		column-gap: 50px;
}

.price-col-item {
		color: var(--salopal-black);
		width: calc(50% - 25px);
		border-bottom: 1px dashed #ddd;
		padding: 20px 0 5px 0px;
}

.price-col-item .price-tag {
		color: var(--salopal-black);
		text-align: right;
}

.price-col-item p {
	margin: 0 !important;
	padding: 0 !important;
	line-height: normal;
}

.service-desc-modal-btn {
	color: var(--salopal-mocha);
}

@media (max-width: 768px) {

		.price-col {
				flex-flow: column;
		}

		.price-col-item {
			width: 100%;
		}
}