/* End custom CSS */

.elementor-225039 .elementor-element.elementor-element-26db4a5 {
	--display: flex;
	--flex-direction: row;
	--container-widget-width: initial;
	--container-widget-height: 100%;
	--container-widget-flex-grow: 1;
	--container-widget-align-self: stretch;
	--flex-wrap-mobile: wrap;
	--justify-content: space-between;
	--gap: 2rem 2rem;
	--row-gap: 2rem;
	--column-gap: 2rem;
	--overlay-opacity: .25;
	--overlay-mix-blend-mode: multiply;
	--border-radius: 8px 8px 8px 8px;
	box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, .01);
	--margin-top: 0rem;
	--margin-bottom: 2rem;
	--margin-left: 0rem;
	--margin-right: 0rem;
	--padding-top: 2rem;
	--padding-bottom: 2rem;
	--padding-left: 2rem;
	--padding-right: 2rem;
}

.elementor-225039 .elementor-element.elementor-element-26db4a5:not(.elementor-motion-effects-element-type-background), .elementor-225039 .elementor-element.elementor-element-26db4a5 > .elementor-motion-effects-container > .elementor-motion-effects-layer {
	background-color: transparent;
	background-image: linear-gradient(150deg, var(--e-global-color-accent) 94%, var(--e-global-color-4c1be43) 94%);
}

.elementor-225039 .elementor-element.elementor-element-26db4a5::before, .elementor-225039 .elementor-element.elementor-element-26db4a5 > .elementor-background-video-container::before, .elementor-225039 .elementor-element.elementor-element-26db4a5 > .e-con-inner > .elementor-background-video-container::before, .elementor-225039 .elementor-element.elementor-element-26db4a5 > .elementor-background-slideshow::before, .elementor-225039 .elementor-element.elementor-element-26db4a5 > .e-con-inner > .elementor-background-slideshow::before, .elementor-225039 .elementor-element.elementor-element-26db4a5 > .elementor-motion-effects-container > .elementor-motion-effects-layer::before {
	--background-overlay: "";
	background-image: url("https://ecwaters.com/nitropack_static/ByiDQaUtCVrBjziUUAtmTscbFkHQyAWh/assets/images/optimized/rev-fc93714/ecwaters.com/wp-content/uploads/2026/05/ec-waters-air-conditionin-and-heat-watermark.png");
	background-position: 14px 2px;
	background-repeat: no-repeat;
	background-size: 36% auto;
}

.elementor-225039 .elementor-element.elementor-element-42aa4ab .elementor-heading-title {
	font-family: "Quicksand", Sans-serif;
	font-size: 4rem;
	font-weight: 700;
	text-transform: uppercase;
	line-height: 3.8rem;
	letter-spacing: -.02em;
}

.elementor-225039 .elementor-element.elementor-element-42aa4ab > .elementor-widget-container {
	padding: 1rem 1rem 1rem 1rem;
	border-style: none;
	border-radius: 4px 4px 4px 4px;
}

.elementor-225039 .elementor-element.elementor-element-42aa4ab {
	width: var(--container-widget-width, 40%);
	max-width: 40%;
	--container-widget-width: 40%;
	--container-widget-flex-grow: 0;
}

.elementor-225039 .elementor-element.elementor-element-42aa4ab.elementor-element {
	--align-self: center;
}

.elementor-225039 .elementor-element.elementor-element-4615ab3 {
	color: var(--e-global-color-primary);
	width: var(--container-widget-width, 75%);
	max-width: 75%;
	--container-widget-width: 75%;
	--container-widget-flex-grow: 0;
}

.elementor-225039 .elementor-element.elementor-element-4615ab3 a {
	color: var(--e-global-color-primary);
}

.elementor-225039 .elementor-element.elementor-element-4615ab3.elementor-element {
	--align-self: center;
}

.elementor-225039 .elementor-element.elementor-element-6a78a802 {
	--display: flex;
	--gap: 50px 50px;
	--row-gap: 50px;
	--column-gap: 50px;
}

.elementor-225039 .elementor-element.elementor-element-dbf42b7 {
	--display: flex;
	--flex-direction: column;
	--container-widget-width: calc(( 1 - var(--container-widget-flex-grow) ) * 100%);
	--container-widget-height: initial;
	--container-widget-flex-grow: 0;
	--container-widget-align-self: initial;
	--flex-wrap-mobile: wrap;
	--justify-content: center;
	--align-items: center;
}

.elementor-225039 .elementor-element.elementor-element-ac12435 {
	width: auto;
	max-width: auto;
}

.elementor-225039 .elementor-element.elementor-element-3d71560 {
	--display: flex;
	--flex-direction: column;
	--container-widget-width: calc(( 1 - var(--container-widget-flex-grow) ) * 100%);
	--container-widget-height: initial;
	--container-widget-flex-grow: 0;
	--container-widget-align-self: initial;
	--flex-wrap-mobile: wrap;
	--align-items: center;
}

.elementor-225039 .elementor-element.elementor-element-9668895 {
	text-align: start;
}

.elementor-225039 .elementor-element.elementor-element-9668895.elementor-element {
	--align-self: flex-start;
}

.elementor-225039 .elementor-element.elementor-element-fc7b277 {
	text-align: start;
}

body.elementor-page-225039 {
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
}

body.elementor-page-225039:not(.elementor-motion-effects-element-type-background), body.elementor-page-225039 > .elementor-motion-effects-container > .elementor-motion-effects-layer {
	background-color: transparent;
	background-image: linear-gradient(180deg, var(--e-global-color-primary) 22%, var(--e-global-color-fff0000) 22%);
}

@media (max-width:1200px) {
	.elementor-225039 .elementor-element.elementor-element-6a78a802 {
		--padding-top: 50px;
		--padding-bottom: 20px;
		--padding-left: 10px;
		--padding-right: 10px;
	}
}

@media (max-width:1024px) {
	.elementor-225039 .elementor-element.elementor-element-26db4a5::before, .elementor-225039 .elementor-element.elementor-element-26db4a5 > .elementor-background-video-container::before, .elementor-225039 .elementor-element.elementor-element-26db4a5 > .e-con-inner > .elementor-background-video-container::before, .elementor-225039 .elementor-element.elementor-element-26db4a5 > .elementor-background-slideshow::before, .elementor-225039 .elementor-element.elementor-element-26db4a5 > .e-con-inner > .elementor-background-slideshow::before, .elementor-225039 .elementor-element.elementor-element-26db4a5 > .elementor-motion-effects-container > .elementor-motion-effects-layer::before {
		background-position: 0px 0px;
	}
}

@media (max-width:767px) {
	.elementor-225039 .elementor-element.elementor-element-26db4a5::before, .elementor-225039 .elementor-element.elementor-element-26db4a5 > .elementor-background-video-container::before, .elementor-225039 .elementor-element.elementor-element-26db4a5 > .e-con-inner > .elementor-background-video-container::before, .elementor-225039 .elementor-element.elementor-element-26db4a5 > .elementor-background-slideshow::before, .elementor-225039 .elementor-element.elementor-element-26db4a5 > .e-con-inner > .elementor-background-slideshow::before, .elementor-225039 .elementor-element.elementor-element-26db4a5 > .elementor-motion-effects-container > .elementor-motion-effects-layer::before {
		background-position: 0px 0px;
	}
}

@media (min-width:768px) {
	.elementor-225039 .elementor-element.elementor-element-26db4a5 {
		--width: 100%;
	}
}

/* Start custom CSS for shortcode, class: .elementor-element-28bb0e00 */

/* ==========================================================================
   E.C. Waters — Specials coupon cards
   --------------------------------------------------------------------------
   CSS only. No markup changes — this styles the existing .offers / .offer grid.
   Paste into Appearance → Customize → Additional CSS.

   Uses Quicksand and Inter, both already loaded by the theme.
   The theme sets a dashed border, a red rule and a black title bar with higher
   specificity, so a few !important flags below are deliberate overrides.
   ========================================================================== */
.offers {
	--pad: 28px;
	--gold: #ffc72c;
	/* matches the header buttons + hero band */
	--gold-deep: #e8a200;
	--ink: #14181b;
	--ink-2: #5a6672;
	--page: #fff;
	/* MUST match the section background behind the cards */
	--radius: 16px;
	display: grid !important;
	grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)) !important;
	gap: 32px !important;
	align-items: stretch;
}

.offers .offer {
	height: 100%;
	display: flex;
}

/* ---- the ticket -------------------------------------------------------- */
.offers .offer .offer-content {
	position: relative;
	display: flex;
	flex-direction: column;
	width: 100%;
	flex: 1;
	background: var(--page);
	border: 0 !important;
	border-radius: var(--radius);
	box-shadow: 0 1px 2px rgba(20, 24, 27, .06), 0 10px 28px -14px rgba(20, 24, 27, .45);
	padding: 0 !important;
	overflow: hidden;
	/* clips the title corners cleanly */
	transition: transform .22s cubic-bezier(.2, .7, .3, 1), box-shadow .22s ease;
}

.offers .offer .offer-content:hover {
	transform: translateY(-4px);
	box-shadow: 0 2px 4px rgba(20, 24, 27, .07), 0 22px 44px -18px rgba(20, 24, 27, .55);
}

/* ---- clickable body ---------------------------------------------------- */
.offers .offer .offer-body {
	display: flex;
	flex-direction: column;
	flex: 1;
	border: 0 !important;
	/* kills the theme's 3px dashed border */
	padding: 0 var(--pad) var(--pad) !important;
	background: var(--page) !important;
	text-decoration: none !important;
	color: inherit;
}

.offers .offer .offer-body:hover {
	background: var(--page) !important;
	/* prevent theme from boxing the body */
	border: 0 !important;
	box-shadow: none !important;
}

.offers .offer .offer-body:focus-visible {
	outline: 3px solid var(--gold-deep);
	outline-offset: 3px;
	border-radius: var(--radius);
}

/* ---- gold header band, with a faint diagonal weave ---------------------- */
.offers .offer .offer-title {
	position: relative;
	margin: 0 calc(var(--pad) * -1) 22px !important;
	padding: 13px 18px !important;
	background: repeating-linear-gradient(135deg, rgba(255, 255, 255, .2) 0 10px, rgba(255, 255, 255, 0) 10px 20px), linear-gradient(180deg, var(--gold) 0%, var(--gold-deep) 100%) !important;
	/* overflow:hidden on the card clips the corners — no explicit border-radius needed */
	color: var(--ink) !important;
	font-family: Inter, sans-serif;
	font-size: 11px;
	font-weight: 800;
	line-height: 1.35;
	letter-spacing: .09em;
	text-transform: uppercase;
	text-align: center !important;
	text-wrap: balance;
}

/* ---- the offer itself -------------------------------------------------- */
.offers .offer .offer-deal {
	position: relative;
	margin: 0 0 16px !important;
	padding: 0 0 14px !important;
	border: 0 !important;
	/* kills the theme's red rule */
	font-family: Quicksand, sans-serif;
	font-size: 22px;
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: -.01em;
	color: var(--ink);
	text-align: center !important;
	text-wrap: balance;
}

/* the red rule, replaced with a centered brand-gold bar */
.offers .offer .offer-deal::after {
	content: "";
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	bottom: 0;
	width: 48px;
	height: 3px;
	border-radius: 2px;
	background: var(--gold-deep);
}

/* text stays centered; margin-top:auto on offer-logo aligns the logo row */
.offers .offer .offer-terms {
	margin: 0 !important;
	font-family: Inter, sans-serif;
	font-size: 11.5px;
	line-height: 1.6;
	color: var(--ink-2);
	text-align: center;
}

/* ---- logo + address stub ----------------------------------------------- */

/* margin-top:auto pushes the logo to the bottom of .offer-body regardless  */

/* of how long .offer-terms is or whether an .offer-cta element is present  */
.offers .offer .offer-logo {
	position: relative;
	margin: auto calc(var(--pad) * -1) 0 !important;
	padding: 20px var(--pad) 0 !important;
	text-align: center;
}

.offers .offer .offer-logo img {
	width: auto;
	max-width: 150px;
	height: auto;
	margin: 0 auto;
	opacity: .9;
}

/* ---- address ----------------------------------------------------------- */
.offers .offer .offer-address {
	margin: 10px 0 0 !important;
	font-family: Inter, sans-serif;
	font-size: 9.5px;
	font-weight: 500;
	line-height: 1.6;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: var(--ink-2);
	text-align: center;
}

/* ---- print CTA --------------------------------------------------------- */
.offers .offer .offer-footer {
	margin-top: 18px;
	padding: 0 var(--pad) var(--pad) !important;
	border: 0 !important;
	/* matches the height of a footer that contains a button, so cards with an
     empty footer don't make the body grow taller and throw off row alignment */
	min-height: calc(var(--pad) + 66px);
}

.offers .offer .offer-footer a {
	display: block;
	padding: 12px 16px;
	border-radius: 999px;
	background: var(--ink);
	color: #fff !important;
	font-family: Inter, sans-serif;
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	text-align: center;
	text-decoration: none !important;
	transition: background .18s ease, color .18s ease, transform .12s ease;
}

.offers .offer .offer-footer a:hover, .offers .offer .offer-footer a:focus-visible {
	background: var(--gold);
	color: var(--ink) !important;
}

.offers .offer .offer-footer a:active {
	transform: translateY(1px);
}

/* ---- small screens ----------------------------------------------------- */
@media (max-width: 640px) {
	.offers {
		--pad: 20px;
		gap: 24px !important;
	}
	
	.offers .offer .offer-deal {
		font-size: 20px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.offers .offer .offer-content, .offers .offer .offer-footer a {
		transition: none;
	}
	
	.offers .offer .offer-content:hover {
		transform: none;
	}
}