/**
Theme Name: Renuity Child Theme
Author: Brainstorm Force
Author URI: http://wpastra.com/about/
Description: Astra is the fastest, fully customizable & beautiful theme suitable for blogs, personal portfolios and business websites. It is very lightweight (less than 50KB on frontend) and offers unparalleled speed. Built with SEO in mind, Astra comes with schema.org code integrated so search engines will love your site. Astra offers plenty of sidebar options and widget areas giving you a full control for customizations. Furthermore, we have included special features and templates so feel free to choose any of your favorite page builder plugin to create pages flexibly. Some of the other features: # WooCommerce Ready # Responsive # Compatible with major plugins # Translation Ready # Extendible with premium addons # Regularly updated # Designed, Developed, Maintained & Supported by Brainstorm Force. Looking for a perfect base theme? Look no further. Astra is fast, fully customizable and beautiful theme!
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: renuity-child-theme
Template: astra
*/


/* DESKTOP DEFAULT (Global Scope) */
	:root {
    --orange-gradient: linear-gradient(90deg, #E2523D 0%, #F4633A 100%);
    --renuity-blue-gradient: linear-gradient(90deg, #005EB8 0%, #003057 100%);
    --titan-blue-gradient: linear-gradient(90deg, #3EB1C8 0%, #4298B5 100%);
    --orange-gradient-start: #E2523D;
    --renuity-blue-gradient-start: #005EB8;
    --titan-blue-gradient-start: #3EB1C8;
    --renuity-dark-blue: var(--e-global-color-80a9563); /* Renuity dark blue */
	--global-padding: 96px 32px;


}

/* Spacing & Layout Only: margin, padding, border-radius, gap, column-gap, row-gap */
/* Base (Desktop First – 1367px and up) */
:root {
  --spacing-2: 2px;
  --spacing-4: 4px;
  --spacing-8: 8px;
  --spacing-12: 12px;
  --spacing-16: 16px;
  --spacing-24: 24px;
  --spacing-32: 32px;
  --spacing-48: 48px;
  --spacing-64: 64px;
  --spacing-80: 80px;
  --spacing-96: 96px;
  --spacing-120: 120px;
  --spacing-128: 128px;
  --spacing-192: 192px;

  --radius-4: 4px;
  --radius-8: 8px;
  --radius-12: 12px;
  --radius-16: 16px;
  --radius-24: 24px;
  --radius-32: 32px;
  --radius-48: 48px;
  --radius-64: 64px;
}

/* Tablet LG (768px–1023px) */
@media (max-width: 1024px) {
  :root {
    --spacing-8: 8px;
    --spacing-12: 8px;
    --spacing-16: 12px;
    --spacing-24: 16px;
    --spacing-32: 24px;
    --spacing-48: 32px;
    --spacing-64: 48px;
    --spacing-80: 48px;
    --spacing-96: 64px;
    --spacing-120: 80px;
    --spacing-128: 80px;
    --spacing-192: 96px;

    --radius-8: 4px;
    --radius-12: 8px;
    --radius-16: 10px;
    --radius-24: 14px;
    --radius-32: 20px;
    --radius-48: 28px;
    --radius-64: 32px;
  }
}

/* Tablet SM (577px–767px) */
@media (max-width: 767px) {
  :root {
    --spacing-8: 4px;
    --spacing-12: 8px;
    --spacing-16: 12px;
    --spacing-24: 16px;
    --spacing-32: 24px;
    --spacing-48: 32px;
    --spacing-64: 32px;
    --spacing-80: 64px;
    --spacing-96: 64px;
    --spacing-120: 80px;
    --spacing-128: 64px;
    --spacing-192: 80px;

    --radius-8: 4px;
    --radius-12: 8px;
    --radius-16: 8px;
    --radius-24: 16px;
    --radius-32: 24px;
    --radius-48: 32px;
    --radius-64: 32px;
  }
}

/* Mobile LG (480px–576px) */
@media (max-width: 576px) {
  :root {
    --spacing-8: 4px;
    --spacing-12: 8px;
    --spacing-16: 8px;
    --spacing-24: 16px;
    --spacing-32: 16px;
    --spacing-48: 24px;
    --spacing-64: 32px;
    --spacing-80: 48px;
    --spacing-96: 48px;
    --spacing-120: 48px;
    --spacing-128: 48px;
    --spacing-192: 64px;

    --radius-8: 4px;
    --radius-12: 8px;
    --radius-16: 8px;
    --radius-24: 16px;
    --radius-32: 24px;
    --radius-48: 32px;
    --radius-64: 24px;
  }
}


/* ===== PADDING UTILITIES ===== */
.p-2 { padding: var(--spacing-2); }
.p-4 { padding: var(--spacing-4); }
.p-8 { padding: var(--spacing-8); }
.p-12 { padding: var(--spacing-12); }
.p-16 { padding: var(--spacing-16); }
.p-24 { padding: var(--spacing-24); }
.p-32 { padding: var(--spacing-32); }
.p-48 { padding: var(--spacing-48); }
.p-64 { padding: var(--spacing-64); }
.p-80 { padding: var(--spacing-80); }
.p-96 { padding: var(--spacing-96); }
.p-120 { padding: var(--spacing-120); }
.p-192 { padding: var(--spacing-192); }

/* Padding Top */
.pt-2 { padding-top: var(--spacing-2); }
.pt-4 { padding-top: var(--spacing-4); }
.pt-8 { padding-top: var(--spacing-8); }
.pt-12 { padding-top: var(--spacing-12); }
.pt-16 { padding-top: var(--spacing-16); }
.pt-24 { padding-top: var(--spacing-24); }
.pt-32 { padding-top: var(--spacing-32); }
.pt-48 { padding-top: var(--spacing-48); }
.pt-64 { padding-top: var(--spacing-64); }
.pt-80 { padding-top: var(--spacing-80); }
.pt-96 { padding-top: var(--spacing-96); }
.pt-120 { padding-top: var(--spacing-120); }
.pt-192 { padding-top: var(--spacing-192); }

/* Padding Bottom */
.pb-2 { padding-bottom: var(--spacing-2); }
.pb-4 { padding-bottom: var(--spacing-4); }
.pb-8 { padding-bottom: var(--spacing-8); }
.pb-12 { padding-bottom: var(--spacing-12); }
.pb-16 { padding-bottom: var(--spacing-16); }
.pb-24 { padding-bottom: var(--spacing-24); }
.pb-32 { padding-bottom: var(--spacing-32); }
.pb-48 { padding-bottom: var(--spacing-48); }
.pb-64 { padding-bottom: var(--spacing-64); }
.pb-80 { padding-bottom: var(--spacing-80); }
.pb-96 { padding-bottom: var(--spacing-96); }
.pb-120 { padding-bottom: var(--spacing-120); }
.pb-192 { padding-bottom: var(--spacing-192); }

/* Padding Left */
.pl-2 { padding-left: var(--spacing-2); }
.pl-4 { padding-left: var(--spacing-4); }
.pl-8 { padding-left: var(--spacing-8); }
.pl-12 { padding-left: var(--spacing-12); }
.pl-16 { padding-left: var(--spacing-16); }
.pl-24 { padding-left: var(--spacing-24); }
.pl-32 { padding-left: var(--spacing-32); }
.pl-48 { padding-left: var(--spacing-48); }
.pl-64 { padding-left: var(--spacing-64); }
.pl-80 { padding-left: var(--spacing-80); }
.pl-96 { padding-left: var(--spacing-96); }
.pl-120 { padding-left: var(--spacing-120); }
.pl-192 { padding-left: var(--spacing-192); }

/* Padding Right */
.pr-2 { padding-right: var(--spacing-2); }
.pr-4 { padding-right: var(--spacing-4); }
.pr-8 { padding-right: var(--spacing-8); }
.pr-12 { padding-right: var(--spacing-12); }
.pr-16 { padding-right: var(--spacing-16); }
.pr-24 { padding-right: var(--spacing-24); }
.pr-32 { padding-right: var(--spacing-32); }
.pr-48 { padding-right: var(--spacing-48); }
.pr-64 { padding-right: var(--spacing-64); }
.pr-80 { padding-right: var(--spacing-80); }
.pr-96 { padding-right: var(--spacing-96); }
.pr-120 { padding-right: var(--spacing-120); }
.pr-192 { padding-right: var(--spacing-192); }

/* Padding X (left and right) */
.px-2 { padding-left: var(--spacing-2); padding-right: var(--spacing-2); }
.px-4 { padding-left: var(--spacing-4); padding-right: var(--spacing-4); }
.px-8 { padding-left: var(--spacing-8); padding-right: var(--spacing-8); }
.px-12 { padding-left: var(--spacing-12); padding-right: var(--spacing-12); }
.px-16 { padding-left: var(--spacing-16); padding-right: var(--spacing-16); }
.px-24 { padding-left: var(--spacing-24); padding-right: var(--spacing-24); }
.px-32 { padding-left: var(--spacing-32); padding-right: var(--spacing-32); }
.px-48 { padding-left: var(--spacing-48); padding-right: var(--spacing-48); }
.px-64 { padding-left: var(--spacing-64); padding-right: var(--spacing-64); }
.px-80 { padding-left: var(--spacing-80); padding-right: var(--spacing-80); }
.px-96 { padding-left: var(--spacing-96); padding-right: var(--spacing-96); }
.px-120 { padding-left: var(--spacing-120); padding-right: var(--spacing-120); }
.px-192 { padding-left: var(--spacing-192); padding-right: var(--spacing-192); }

/* Padding Y (top and bottom) */
.py-2 { padding-top: var(--spacing-2); padding-bottom: var(--spacing-2); }
.py-4 { padding-top: var(--spacing-4); padding-bottom: var(--spacing-4); }
.py-8 { padding-top: var(--spacing-8); padding-bottom: var(--spacing-8); }
.py-12 { padding-top: var(--spacing-12); padding-bottom: var(--spacing-12); }
.py-16 { padding-top: var(--spacing-16); padding-bottom: var(--spacing-16); }
.py-24 { padding-top: var(--spacing-24); padding-bottom: var(--spacing-24); }
.py-32 { padding-top: var(--spacing-32); padding-bottom: var(--spacing-32); }
.py-48 { padding-top: var(--spacing-48); padding-bottom: var(--spacing-48); }
.py-64 { padding-top: var(--spacing-64); padding-bottom: var(--spacing-64); }
.py-80 { padding-top: var(--spacing-80); padding-bottom: var(--spacing-80); }
.py-96 { padding-top: var(--spacing-96); padding-bottom: var(--spacing-96); }
.py-120 { padding-top: var(--spacing-120); padding-bottom: var(--spacing-120); }
.py-192 { padding-top: var(--spacing-192); padding-bottom: var(--spacing-192); }

/* ===== MARGIN UTILITIES ===== */
.m-2 { margin: var(--spacing-2); }
.m-4 { margin: var(--spacing-4); }
.m-8 { margin: var(--spacing-8); }
.m-12 { margin: var(--spacing-12); }
.m-16 { margin: var(--spacing-16); }
.m-24 { margin: var(--spacing-24); }
.m-32 { margin: var(--spacing-32); }
.m-48 { margin: var(--spacing-48); }
.m-64 { margin: var(--spacing-64); }
.m-80 { margin: var(--spacing-80); }
.m-96 { margin: var(--spacing-96); }
.m-120 { margin: var(--spacing-120); }
.m-192 { margin: var(--spacing-192); }

/* Margin Top */
.mt-2 { margin-top: var(--spacing-2); }
.mt-4 { margin-top: var(--spacing-4); }
.mt-8 { margin-top: var(--spacing-8); }
.mt-12 { margin-top: var(--spacing-12); }
.mt-16 { margin-top: var(--spacing-16); }
.mt-24 { margin-top: var(--spacing-24); }
.mt-32 { margin-top: var(--spacing-32); }
.mt-48 { margin-top: var(--spacing-48); }
.mt-64 { margin-top: var(--spacing-64); }
.mt-80 { margin-top: var(--spacing-80); }
.mt-96 { margin-top: var(--spacing-96); }
.mt-120 { margin-top: var(--spacing-120); }
.mt-192 { margin-top: var(--spacing-192); }

/* Margin Bottom */
.mb-2 { margin-bottom: var(--spacing-2); }
.mb-4 { margin-bottom: var(--spacing-4); }
.mb-8 { margin-bottom: var(--spacing-8); }
.mb-12 { margin-bottom: var(--spacing-12); }
.mb-16 { margin-bottom: var(--spacing-16); }
.mb-24 { margin-bottom: var(--spacing-24); }
.mb-32 { margin-bottom: var(--spacing-32); }
.mb-48 { margin-bottom: var(--spacing-48); }
.mb-64 { margin-bottom: var(--spacing-64); }
.mb-80 { margin-bottom: var(--spacing-80); }
.mb-96 { margin-bottom: var(--spacing-96); }
.mb-120 { margin-bottom: var(--spacing-120); }
.mb-192 { margin-bottom: var(--spacing-192); }

/* Margin Left */
.ml-2 { margin-left: var(--spacing-2); }
.ml-4 { margin-left: var(--spacing-4); }
.ml-8 { margin-left: var(--spacing-8); }
.ml-12 { margin-left: var(--spacing-12); }
.ml-16 { margin-left: var(--spacing-16); }
.ml-24 { margin-left: var(--spacing-24); }
.ml-32 { margin-left: var(--spacing-32); }
.ml-48 { margin-left: var(--spacing-48); }
.ml-64 { margin-left: var(--spacing-64); }
.ml-80 { margin-left: var(--spacing-80); }
.ml-96 { margin-left: var(--spacing-96); }
.ml-120 { margin-left: var(--spacing-120); }
.ml-192 { margin-left: var(--spacing-192); }

/* Margin Right */
.mr-2 { margin-right: var(--spacing-2); }
.mr-4 { margin-right: var(--spacing-4); }
.mr-8 { margin-right: var(--spacing-8); }
.mr-12 { margin-right: var(--spacing-12); }
.mr-16 { margin-right: var(--spacing-16); }
.mr-24 { margin-right: var(--spacing-24); }
.mr-32 { margin-right: var(--spacing-32); }
.mr-48 { margin-right: var(--spacing-48); }
.mr-64 { margin-right: var(--spacing-64); }
.mr-80 { margin-right: var(--spacing-80); }
.mr-96 { margin-right: var(--spacing-96); }
.mr-120 { margin-right: var(--spacing-120); }
.mr-192 { margin-right: var(--spacing-192); }

/* Margin X (left and right) */
.mx-2 { margin-left: var(--spacing-2); margin-right: var(--spacing-2); }
.mx-4 { margin-left: var(--spacing-4); margin-right: var(--spacing-4); }
.mx-8 { margin-left: var(--spacing-8); margin-right: var(--spacing-8); }
.mx-12 { margin-left: var(--spacing-12); margin-right: var(--spacing-12); }
.mx-16 { margin-left: var(--spacing-16); margin-right: var(--spacing-16); }
.mx-24 { margin-left: var(--spacing-24); margin-right: var(--spacing-24); }
.mx-32 { margin-left: var(--spacing-32); margin-right: var(--spacing-32); }
.mx-48 { margin-left: var(--spacing-48); margin-right: var(--spacing-48); }
.mx-64 { margin-left: var(--spacing-64); margin-right: var(--spacing-64); }
.mx-80 { margin-left: var(--spacing-80); margin-right: var(--spacing-80); }
.mx-96 { margin-left: var(--spacing-96); margin-right: var(--spacing-96); }
.mx-120 { margin-left: var(--spacing-120); margin-right: var(--spacing-120); }
.mx-192 { margin-left: var(--spacing-192); margin-right: var(--spacing-192); }

/* Margin Y (top and bottom) */
.my-2 { margin-top: var(--spacing-2); margin-bottom: var(--spacing-2); }
.my-4 { margin-top: var(--spacing-4); margin-bottom: var(--spacing-4); }
.my-8 { margin-top: var(--spacing-8); margin-bottom: var(--spacing-8); }
.my-12 { margin-top: var(--spacing-12); margin-bottom: var(--spacing-12); }
.my-16 { margin-top: var(--spacing-16); margin-bottom: var(--spacing-16); }
.my-24 { margin-top: var(--spacing-24); margin-bottom: var(--spacing-24); }
.my-32 { margin-top: var(--spacing-32); margin-bottom: var(--spacing-32); }
.my-48 { margin-top: var(--spacing-48); margin-bottom: var(--spacing-48); }
.my-64 { margin-top: var(--spacing-64); margin-bottom: var(--spacing-64); }
.my-80 { margin-top: var(--spacing-80); margin-bottom: var(--spacing-80); }
.my-96 { margin-top: var(--spacing-96); margin-bottom: var(--spacing-96); }
.my-120 { margin-top: var(--spacing-120); margin-bottom: var(--spacing-120); }
.my-192 { margin-top: var(--spacing-192); margin-bottom: var(--spacing-192); }

/* ===== BORDER RADIUS UTILITIES ===== */
.rounded-4 { border-radius: var(--radius-4); }
.rounded-8 { border-radius: var(--radius-8); }
.rounded-12 { border-radius: var(--radius-12); }
.rounded-16 { border-radius: var(--radius-16); }
.rounded-24 { border-radius: var(--radius-24); }
.rounded-32 { border-radius: var(--radius-32); }
.rounded-48 { border-radius: var(--radius-48); }
.rounded-64 { border-radius: var(--radius-64); }

/* Border Radius Top */
.rounded-t-4 { border-top-left-radius: var(--radius-4); border-top-right-radius: var(--radius-4); }
.rounded-t-8 { border-top-left-radius: var(--radius-8); border-top-right-radius: var(--radius-8); }
.rounded-t-12 { border-top-left-radius: var(--radius-12); border-top-right-radius: var(--radius-12); }
.rounded-t-16 { border-top-left-radius: var(--radius-16); border-top-right-radius: var(--radius-16); }
.rounded-t-24 { border-top-left-radius: var(--radius-24); border-top-right-radius: var(--radius-24); }
.rounded-t-32 { border-top-left-radius: var(--radius-32); border-top-right-radius: var(--radius-32); }
.rounded-t-48 { border-top-left-radius: var(--radius-48); border-top-right-radius: var(--radius-48); }
.rounded-t-64 { border-top-left-radius: var(--radius-64); border-top-right-radius: var(--radius-64); }

/* Border Radius Bottom */
.rounded-b-4 { border-bottom-left-radius: var(--radius-4); border-bottom-right-radius: var(--radius-4); }
.rounded-b-8 { border-bottom-left-radius: var(--radius-8); border-bottom-right-radius: var(--radius-8); }
.rounded-b-12 { border-bottom-left-radius: var(--radius-12); border-bottom-right-radius: var(--radius-12); }
.rounded-b-16 { border-bottom-left-radius: var(--radius-16); border-bottom-right-radius: var(--radius-16); }
.rounded-b-24 { border-bottom-left-radius: var(--radius-24); border-bottom-right-radius: var(--radius-24); }
.rounded-b-32 { border-bottom-left-radius: var(--radius-32); border-bottom-right-radius: var(--radius-32); }
.rounded-b-48 { border-bottom-left-radius: var(--radius-48); border-bottom-right-radius: var(--radius-48); }
.rounded-b-64 { border-bottom-left-radius: var(--radius-64); border-bottom-right-radius: var(--radius-64); }

/* Border Radius Left */
.rounded-l-4 { border-top-left-radius: var(--radius-4); border-bottom-left-radius: var(--radius-4); }
.rounded-l-8 { border-top-left-radius: var(--radius-8); border-bottom-left-radius: var(--radius-8); }
.rounded-l-12 { border-top-left-radius: var(--radius-12); border-bottom-left-radius: var(--radius-12); }
.rounded-l-16 { border-top-left-radius: var(--radius-16); border-bottom-left-radius: var(--radius-16); }
.rounded-l-24 { border-top-left-radius: var(--radius-24); border-bottom-left-radius: var(--radius-24); }
.rounded-l-32 { border-top-left-radius: var(--radius-32); border-bottom-left-radius: var(--radius-32); }
.rounded-l-48 { border-top-left-radius: var(--radius-48); border-bottom-left-radius: var(--radius-48); }
.rounded-l-64 { border-top-left-radius: var(--radius-64); border-bottom-left-radius: var(--radius-64); }

/* Border Radius Right */
.rounded-r-4 { border-top-right-radius: var(--radius-4); border-bottom-right-radius: var(--radius-4); }
.rounded-r-8 { border-top-right-radius: var(--radius-8); border-bottom-right-radius: var(--radius-8); }
.rounded-r-12 { border-top-right-radius: var(--radius-12); border-bottom-right-radius: var(--radius-12); }
.rounded-r-16 { border-top-right-radius: var(--radius-16); border-bottom-right-radius: var(--radius-16); }
.rounded-r-24 { border-top-right-radius: var(--radius-24); border-bottom-right-radius: var(--radius-24); }
.rounded-r-32 { border-top-right-radius: var(--radius-32); border-bottom-right-radius: var(--radius-32); }
.rounded-r-48 { border-top-right-radius: var(--radius-48); border-bottom-right-radius: var(--radius-48); }
.rounded-r-64 { border-top-right-radius: var(--radius-64); border-bottom-right-radius: var(--radius-64); }

/* ===== GAP UTILITIES ===== */
.gap-2 { gap: var(--spacing-2); }
.gap-4 { gap: var(--spacing-4); }
.gap-8 { gap: var(--spacing-8); }
.gap-12 { gap: var(--spacing-12); }
.gap-16 { gap: var(--spacing-16); }
.gap-24 { gap: var(--spacing-24); }
.gap-32 { gap: var(--spacing-32); }
.gap-48 { gap: var(--spacing-48); }
.gap-64 { gap: var(--spacing-64); }
.gap-80 { gap: var(--spacing-80); }
.gap-96 { gap: var(--spacing-96); }
.gap-120 { gap: var(--spacing-120); }
.gap-128 { gap: var(--spacing-128); }
.gap-192 { gap: var(--spacing-192); }

/* Elementor flexbox gap handling - when e-con-inner exists, apply gap to it instead */
.gap-2:has(> .e-con-inner) { gap: 0 !important; }
.gap-4:has(> .e-con-inner) { gap: 0 !important; }
.gap-8:has(> .e-con-inner) { gap: 0 !important; }
.gap-12:has(> .e-con-inner) { gap: 0 !important; }
.gap-16:has(> .e-con-inner) { gap: 0 !important; }
.gap-24:has(> .e-con-inner) { gap: 0 !important; }
.gap-32:has(> .e-con-inner) { gap: 0 !important; }
.gap-48:has(> .e-con-inner) { gap: 0 !important; }
.gap-64:has(> .e-con-inner) { gap: 0 !important; }
.gap-80:has(> .e-con-inner) { gap: 0 !important; }
.gap-96:has(> .e-con-inner) { gap: 0 !important; }
.gap-120:has(> .e-con-inner) { gap: 0 !important; }
.gap-128:has(> .e-con-inner) { gap: 0 !important; }
.gap-192:has(> .e-con-inner) { gap: 0 !important; }

.gap-2 > .e-con-inner { gap: var(--spacing-2); }
.gap-4 > .e-con-inner { gap: var(--spacing-4); }
.gap-8 > .e-con-inner { gap: var(--spacing-8); }
.gap-12 > .e-con-inner { gap: var(--spacing-12); }
.gap-16 > .e-con-inner { gap: var(--spacing-16); }
.gap-24 > .e-con-inner { gap: var(--spacing-24); }
.gap-32 > .e-con-inner { gap: var(--spacing-32); }
.gap-48 > .e-con-inner { gap: var(--spacing-48); }
.gap-64 > .e-con-inner { gap: var(--spacing-64); }
.gap-80 > .e-con-inner { gap: var(--spacing-80); }
.gap-96 > .e-con-inner { gap: var(--spacing-96); }
.gap-120 > .e-con-inner { gap: var(--spacing-120); }
.gap-128 > .e-con-inner { gap: var(--spacing-128); }
.gap-192 > .e-con-inner { gap: var(--spacing-192); }

/* ===== COLUMN GAP UTILITIES ===== */
.col-gap-2 { column-gap: var(--spacing-2); }
.col-gap-4 { column-gap: var(--spacing-4); }
.col-gap-8 { column-gap: var(--spacing-8); }
.col-gap-12 { column-gap: var(--spacing-12); }
.col-gap-16 { column-gap: var(--spacing-16); }
.col-gap-24 { column-gap: var(--spacing-24); }
.col-gap-32 { column-gap: var(--spacing-32); }
.col-gap-48 { column-gap: var(--spacing-48); }
.col-gap-64 { column-gap: var(--spacing-64); }
.col-gap-80 { column-gap: var(--spacing-80); }
.col-gap-96 { column-gap: var(--spacing-96); }
.col-gap-120 { column-gap: var(--spacing-120); }
.col-gap-128 { column-gap: var(--spacing-128); }
.col-gap-192 { column-gap: var(--spacing-192); }

/* Elementor flexbox column-gap handling */
.col-gap-2:has(> .e-con-inner) { column-gap: 0 !important; }
.col-gap-4:has(> .e-con-inner) { column-gap: 0 !important; }
.col-gap-8:has(> .e-con-inner) { column-gap: 0 !important; }
.col-gap-12:has(> .e-con-inner) { column-gap: 0 !important; }
.col-gap-16:has(> .e-con-inner) { column-gap: 0 !important; }
.col-gap-24:has(> .e-con-inner) { column-gap: 0 !important; }
.col-gap-32:has(> .e-con-inner) { column-gap: 0 !important; }
.col-gap-48:has(> .e-con-inner) { column-gap: 0 !important; }
.col-gap-64:has(> .e-con-inner) { column-gap: 0 !important; }
.col-gap-80:has(> .e-con-inner) { column-gap: 0 !important; }
.col-gap-96:has(> .e-con-inner) { column-gap: 0 !important; }
.col-gap-120:has(> .e-con-inner) { column-gap: 0 !important; }
.col-gap-128:has(> .e-con-inner) { column-gap: 0 !important; }
.col-gap-192:has(> .e-con-inner) { column-gap: 0 !important; }

.col-gap-2 > .e-con-inner { column-gap: var(--spacing-2); }
.col-gap-4 > .e-con-inner { column-gap: var(--spacing-4); }
.col-gap-8 > .e-con-inner { column-gap: var(--spacing-8); }
.col-gap-12 > .e-con-inner { column-gap: var(--spacing-12); }
.col-gap-16 > .e-con-inner { column-gap: var(--spacing-16); }
.col-gap-24 > .e-con-inner { column-gap: var(--spacing-24); }
.col-gap-32 > .e-con-inner { column-gap: var(--spacing-32); }
.col-gap-48 > .e-con-inner { column-gap: var(--spacing-48); }
.col-gap-64 > .e-con-inner { column-gap: var(--spacing-64); }
.col-gap-80 > .e-con-inner { column-gap: var(--spacing-80); }
.col-gap-96 > .e-con-inner { column-gap: var(--spacing-96); }
.col-gap-120 > .e-con-inner { column-gap: var(--spacing-120); }
.col-gap-128 > .e-con-inner { column-gap: var(--spacing-128); }
.col-gap-192 > .e-con-inner { column-gap: var(--spacing-192); }

/* ===== ROW GAP UTILITIES ===== */
.row-gap-2 { row-gap: var(--spacing-2); }
.row-gap-4 { row-gap: var(--spacing-4); }
.row-gap-8 { row-gap: var(--spacing-8); }
.row-gap-12 { row-gap: var(--spacing-12); }
.row-gap-16 { row-gap: var(--spacing-16); }
.row-gap-24 { row-gap: var(--spacing-24); }
.row-gap-32 { row-gap: var(--spacing-32); }
.row-gap-48 { row-gap: var(--spacing-48); }
.row-gap-64 { row-gap: var(--spacing-64); }
.row-gap-80 { row-gap: var(--spacing-80); }
.row-gap-96 { row-gap: var(--spacing-96); }
.row-gap-120 { row-gap: var(--spacing-120); }
.row-gap-128 { row-gap: var(--spacing-128); }
.row-gap-192 { row-gap: var(--spacing-192); }

/* Tablet */
@media (max-width: 1024px) {
  :root {
    --global-padding: 64px 32px;
  }
}

/* Mobile */
@media (max-width: 767px) {
  :root {
    --global-padding: 48px 24px;
  }
}



body .ast-grid-common-col {
	padding: 0!important;
}

 h1,  h2, h3,  h4,  h5,  h6 {
	margin-bottom: 0.25em!important;
}

/* Core Button Styles */
.btn a,
.btn a.elementor-button {
    font-family: var(--e-global-typography-accent-font-family), Sans-serif!important;
    font-size: var(--e-global-typography-accent-font-size)!important;
    font-weight: var(--e-global-typography-accent-font-weight)!important;
    text-transform: var(--e-global-typography-accent-text-transform)!important;
    line-height: var(--e-global-typography-accent-line-height)!important;
    letter-spacing: var(--e-global-typography-accent-letter-spacing)!important;
    display: inline-flex!important;
    align-items: center!important;
    justify-content: center!important;
    text-decoration: none!important;
    cursor: pointer!important;
    transition: all 0.3s ease!important;
    padding: 16px 24px!important;
    border-radius: 8px!important;
}

/* Button Colors */
.btn-white a,
.btn-white a.elementor-button {
    background-color: white!important;
    color: var(--e-global-color-secondary)!important;
}

.btn-orange a,
.btn-orange a.elementor-button {
    background-color: var(--e-global-color-90a6ef8)!important;
    color: white!important;
}

.btn-titan-blue a,
.btn-titan-blue a.elementor-button {
    background-color: var(--e-global-color-accent)!important;
    color: white!important;
}

.btn-renuity-db a,
.btn-renuity-db a.elementor-button {
    background-color: var(--e-global-color-secondary)!important;
    color: white!important;
}

.btn-renuity-blue a,
.btn-renuity-blue a.elementor-button {
    background-color: var(--e-global-color-primary)!important;
    color: white!important;
}

/* Outline Styles */
.btn-orange.outline a,
.btn-orange.outline a.elementor-button {
    color: var(--e-global-color-90a6ef8)!important;
}

.btn-orange.outline a:hover,
.btn-orange.outline a.elementor-button:hover {
    background-color: var(--e-global-color-90a6ef8)!important;
    border: 2px solid var(--e-global-color-90a6ef8)!important;
}

.btn-white.outline a:hover,
.btn-white.outline a.elementor-button:hover {
    color: var(--e-global-color-secondary)!important;
    background-color: white!important;
}

.btn-white.outline a,
.btn-white.outline a.elementor-button {
    color: white!important;
}



.btn-titan-blue.outline a,
.btn-titan-blue.outline a.elementor-button {
    color: var(--e-global-color-accent)!important;
}

.btn-titan-blue.outline a:hover,
.btn-titan-blue.outline a.elementor-button:hover {
    background-color: var(--e-global-color-accent)!important;
    border: 2px solid var(--e-global-color-accent)!important;
}

.btn-renuity-db.outline a,
.btn-renuity-db.outline a.elementor-button {
    color: var(--e-global-color-secondary)!important;
    border: 2px solid var(--e-global-color-secondary)!important;
}

.btn-renuity-db.outline a:hover,
.btn-renuity-db.outline a.elementor-button:hover {
    background-color: var(--e-global-color-secondary)!important;
    border: 2px solid var(--e-global-color-secondary)!important;
}

.btn-renuity-blue.outline a,
.btn-renuity-blue.outline a.elementor-button {
    color: var(--e-global-color-primary)!important;
    border: 2px solid var(--e-global-color-primary)!important;
}

.btn-renuity-blue.outline a:hover,
.btn-renuity-blue.outline a.elementor-button:hover {
    background-color: var(--e-global-color-primary)!important;
    border: 2px solid var(--e-global-color-primary)!important;
}

.btn.outline a,
.btn.outline a.elementor-button {
    background-color: transparent!important;
    border: 2px solid currentColor!important;
}
/* Hover States */
.btn-white a:hover,
.btn-white a.elementor-button:hover {
    background-color: white!important;
    color: var(--e-global-color-secondary)!important;
}

.btn-orange a:hover,
.btn-orange a.elementor-button:hover {
    background-color: var(--e-global-color-secondary)!important;
    color: white!important;
}

.btn-titan-blue a:hover,
.btn-titan-blue a.elementor-button:hover {
    background-color: var(--e-global-color-secondary)!important;
    color: white!important;
}

.btn-renuity-db a:hover,
.btn-renuity-db a.elementor-button:hover {
    background-color: var(--e-global-color-primary)!important;
    color: white!important;
}

.btn-renuity-blue a:hover,
.btn-renuity-blue a.elementor-button:hover {
    background-color: var(--e-global-color-secondary)!important;
    color: white!important;
}

/* Responsive Adjustments */
@media (max-width: 1024px) {
    .btn a,
    .btn a.elementor-button {
        padding: 12px 18px!important;
        border-radius: 6px!important;
    }
}

@media (max-width: 767px) {
    .btn a,
    .btn a.elementor-button {
        padding: 10px 14px!important;
        border-radius: 4px!important;
    }
}


/* SVG Icon Styling */
.elementor-button-icon svg {
    width: 1em!important;
    height: auto!important;
    fill: currentColor!important;
	display: none!important;
}

/* Global Row with Responsive Padding */
.global-row {
  padding: var(--global-padding);
}
/* Base Overlay Setup */
.logo-overlay {
  position: relative;
  overflow: hidden;
}


/* Pseudo-element for the image overlay */
.image-overlay::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
	background-attachment: fixed;
  background-position: center;
  background-size: 80vw;
  pointer-events: none;
  z-index: 0;
opacity: 0.4;
}

/* Positional modifiers for the overlay image */
.image-overlay.left::before {
  background-position: -25vw center;
}
.image-overlay.right::before {
  background-position: 50vw center;
}

.image-overlay.light::before {
	mix-blend-mode: soft-light;
	opacity: 1!important;
}

.image-overlay.white::before {
	opacity: 0.05!important;
}

.image-overlay.dark::before {
	mix-blend-mode: soft-light;
	opacity: 0.2!important;
}

/* Kitchen overlay */
.image-overlay.kitchen.light::before, .image-overlay.kitchen.white::before {
  background-image: url('/wp-content/themes/renuity-child-theme/assets/images/kitchen-illustration-auto.svg');
}

.image-overlay.kitchen.dark::before {
  background-image: url('/wp-content/themes/renuity-child-theme/assets/images/kitchen-illustration-white.svg');
}
.image-overlay.kitchen::before {
  background-image: url('/wp-content/themes/renuity-child-theme/assets/images/kitchen-illustration-tb.svg');
}

/* Window overlay */
.image-overlay.window.light::before, .image-overlay.window.white::before {
  background-image: url('/wp-content/themes/renuity-child-theme/assets/images/window-illustration-auto.svg');
}
.image-overlay.window.dark::before {
  background-image: url('/wp-content/themes/renuity-child-theme/assets/images/window-illustration-white.svg');
}
.image-overlay.window::before {
  background-image: url('/wp-content/themes/renuity-child-theme/assets/images/window-illustration-tb.svg');
}

/* Door overlay */
.image-overlay.door::light, .image-overlay.door.white::before {
  background-image: url('/wp-content/themes/renuity-child-theme/assets/images/door-illustration-auto.svg');
}
.image-overlay.door.dark::before {
  background-image: url('/wp-content/themes/renuity-child-theme/assets/images/door-illustration-white.svg');
}
.image-overlay.door::before {
  background-image: url('/wp-content/themes/renuity-child-theme/assets/images/door-illustration-tb.svg');
}

/* Bathroom overlay */
.image-overlay.bathroom.light::before, .image-overlay.bathroom.white::before {
  background-image: url('/wp-content/themes/renuity-child-theme/assets/images/bathroom-illustration-auto.svg');
}
.image-overlay.bathroom.dark::before {
  background-image: url('/wp-content/themes/renuity-child-theme/assets/images/bathroom-illustration-white.svg');
}
.image-overlay.bathroom::before {
  background-image: url('/wp-content/themes/renuity-child-theme/assets/images/bathroom-illustration-tb.svg');
}

/* Coatings overlay */
.image-overlay.coatings.light::before, .image-overlay.coatings.white::before {
  background-image: url('/wp-content/themes/renuity-child-theme/assets/images/coatings-illustration-auto.svg');
}
.image-overlay.coatings.dark::before {
  background-image: url('/wp-content/themes/renuity-child-theme/assets/images/coatings-illustration-white.svg');
}
.image-overlay.coatings::before {
  background-image: url('/wp-content/themes/renuity-child-theme/assets/images/coatings-illustration-tb.svg');
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .image-overlay::before {
    background-size: contain;
  }
}


/* Gradient Background Classes */
.gradient-bg-o {
  background: var(--orange-gradient);
}

.gradient-bg-rb {
  background: var(--renuity-blue-gradient);
}

.gradient-bg-tb {
  background: var(--titan-blue-gradient);
}


/* Gradient Background Overlay */
.gradient-overlay-db {
	background-color: var(--e-global-color-secondary);
	background-image: url(/wp-content/uploads/2024/10/db-bg.svg);
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}
/* Fixed Background Overlay */
.logo-overlay-o::before {
  content: "";
  position: absolute; /* Allows the fixed scrolling effect */
  top: 0;
  left: 0;
  background-image: url('/wp-content/uploads/2024/12/logo-overlay-o.svg');
  background-repeat: no-repeat;
	background-attachment: scroll;
  background-size: 60vw;
  background-position: center center; /* Default centered alignment */
  opacity: 1; /* Apply opacity to the overlay only */
  pointer-events: none; /* Prevents interactions */
  z-index: 0;
}

.logo-overlay-tb::before {
  content: "";
  position: absolute; /* Allows the fixed scrolling effect */
  top: 0;
  left: 0;
  background-image: url('/wp-content/uploads/2024/12/logo-overlay-tb.svg');
  background-repeat: no-repeat;
	background-attachment: scroll;
  background-size: 80%;
  background-position: center center; /* Default centered alignment */
  opacity: 1; /* Apply opacity to the overlay only */
  pointer-events: none; /* Prevents interactions */
  z-index: 0;
}

.logo-overlay-db::before {
  content: "";
  position: absolute; /* Allows the fixed scrolling effect */
  top: 0;
  left: 0;
  background-image: url('/wp-content/uploads/2024/12/logo-overlay-db.svg');
  background-repeat: no-repeat;
	background-attachment: scroll;
  background-size: 80%;
  background-position: center center; /* Default centered alignment */
  opacity: 1; /* Apply opacity to the overlay only */
  pointer-events: none; /* Prevents interactions */
  z-index: 0;
}

.logo-overlay.stroke::before {
  content: "";
  position: absolute; /* Allows the fixed scrolling effect */
  top: 0;
  left: 0;
  background-image: url('/wp-content/uploads/2024/11/logo-icon-stroke.svg');
  background-repeat: no-repeat;
	background-attachment: scroll;
  background-size: 60vw;
  background-position: center center; /* Default centered alignment */
  opacity: 0.2; /* Apply opacity to the overlay only */
  pointer-events: none; /* Prevents interactions */
  z-index: 1;
}

/* Alignment Variants */
.logo-overlay.center::before,
.logo-overlay-o.center::before,
.logo-overlay-db.center::before,
.logo-overlay-tb.center::before {
  background-position: center;
}

.logo-overlay.left::before,
.logo-overlay-o.left::before,
.logo-overlay-db.left::before,
.logo-overlay-tb.left::before {
  background-position: left center; /* Shifts logo left */
}

.logo-overlay.right::before,
.logo-overlay-o.right::before,
.logo-overlay-db.right::before,
.logo-overlay-tb.right::before {
  background-position: right center; /* Shifts logo right */
}

/* Ensuring Content Displays Above the Overlay */
.logo-overlay > *,
.logo-overlay-o > *,
.logo-overlay-db > *,
.logo-overlay-tb > * {
  position: relative;
  z-index: 2;
}

/* Responsive Adjustments */
@media (max-width: 1024px) {
  .logo-overlay::before,
  .logo-overlay-o::before,
  .logo-overlay-db::before,
  .logo-overlay-tb::before {
    background-size: 120%;
  }

  .logo-overlay.left::before,
  .logo-overlay-o.left::before,
  .logo-overlay-db.left::before,
  .logo-overlay-tb.left::before {
    background-position: 200% center;
  }

  .logo-overlay.right::before,
  .logo-overlay-o.right::before,
  .logo-overlay-db.right::before,
  .logo-overlay-tb.right::before {
    background-position: -150% center;
  }
}

@media (max-width: 767px) {
  .logo-overlay::before,
  .logo-overlay-o::before,
  .logo-overlay-db::before,
  .logo-overlay-tb::before {
    background-size: 150%;
    background-attachment: scroll !important;
  }

  .logo-overlay.left::before,
  .logo-overlay-o.left::before,
  .logo-overlay-db.left::before,
  .logo-overlay-tb.left::before {
    background-position: 150% center;
  }

  .logo-overlay.right::before,
  .logo-overlay-o.right::before,
  .logo-overlay-db.right::before,
  .logo-overlay-tb.right::before {
    background-position: -20% center;
  }
}

/* Base Drop Shadow Classes */
.drop-shadow-rb img {
  box-shadow: 20px 20px 0px 0px var(--e-global-color-primary); /* Renuity Blue */
}

.drop-shadow-rdb img {
  box-shadow: 20px 20px 0px 0px var(--e-global-color-secondary); /* Renuity Dark Blue */
}

.drop-shadow-o img {
  box-shadow: 20px 20px 0px 0px var(--e-global-color-90a6ef8); /* Orange */
}

.drop-shadow-tb img {
  box-shadow: 20px 20px 0px 0px var(--e-global-color-397ad69); /* Titan Blue */
}

/* Tablet */
@media (max-width: 1024px) {
  .drop-shadow-rb img{
    box-shadow: 16px 16px 0px 0px var(--e-global-color-primary);
  }

  .drop-shadow-rdb img {
    box-shadow: 16px 16px 0px 0px var(--e-global-color-secondary);
  }

  .drop-shadow-o img {
    box-shadow: 16px 16px 0px 0px var(--e-global-color-90a6ef8);
  }

  .drop-shadow-tb img {
    box-shadow: 16px 16px 0px 0px var(--e-global-color-397ad69);
  }
}

/* Mobile */
@media (max-width: 768px) {
  .drop-shadow-rb img {
    box-shadow: 10px 10px 0px 0px var(--e-global-color-primary);
  }

  .drop-shadow-rdb img {
    box-shadow: 10px 10px 0px 0px var(--e-global-color-secondary);
  }

  .drop-shadow-o img {
    box-shadow: 10px 10px 0px 0px var(--e-global-color-90a6ef8);
  }

  .drop-shadow-tb img {
    box-shadow: 10px 10px 0px 0px var(--e-global-color-397ad69);
  }
}
/*Custom Dividers */

.custom-divider {
  display: flex;
  align-items: center;
	width: 100%;
  max-width: 250px; /* Desktop width */
  justify-content: center; /* Center divider lines and icon by default */
  gap: 8px; /* Space around divider icon */
}

/* Divider Line Styles */
.custom-divider .divider-line {
  flex-grow: 1;
  height: 2px;
  background-color: currentColor; /* Uses the current text color */
}

/* Divider Icon Styling */
.custom-divider .divider-icon svg, .custom-divider .divider-icon img {
  width: 24px;
  height: auto;
}

.custom-divider .divider-icon i {
	font-size: 24px;
	color: currentColor;
}

.custom-divider .divider-icon svg path {
  fill: currentColor;
}

@media (max-width: 1024px) {
  .custom-divider {
    max-width: 188px; /* Reduced width for tablet */
    gap: 8px;
  }

	.custom-divider .divider-icon i {
	font-size: 18px;
}
  .divider-icon svg, .divider-icon img {
    width: 18px;
	}}

@media(max-width: 767px){
  .custom-divider {
    max-width: 124px; /* Reduced width for mobile */
    gap: 4px;
  }
  .divider-icon svg, divider-icon img {
    width: 16px;
	}
.custom-divider .divider-icon i {
	font-size: 16px;
}
}


/* Divider Color Variants */
.custom-divider.orange {
  color: var(--e-global-color-90a6ef8);
}

.custom-divider.renuity_blue {
  color: var(--e-global-color-primary);
}

.custom-divider.renuity_dark_blue {
  color: var(--e-global-color-secondary);
}


.custom-divider.titan_blue {
  color: var(--e-global-color-397ad69);
}

.custom-divider.white {
  color: #FFFFFF;
}
	/* Default: Right-aligned Form */
.hero-wrapper.right .hero-content {
  padding-left: clamp(40px, (100vw - 1280px) / 2, 9999px); /* Larger padding on the left */
  padding-right: 40px;
}

.hero-wrapper.right .hero-form {
  padding-top: 40px;
  padding-left: 80px;
  padding-bottom: 40px;
  padding-right: clamp(40px, (100vw - 1280px) / 2, 9999px); /* Larger padding on the right */
}

/* Left-aligned Form */
.hero-wrapper.left .hero-content {
  order: 2; /* Moves content to the right */
  padding-left: 40px;
  padding-right: clamp(40px, (100vw - 1280px) / 2, 9999px); /* Larger padding on the right */
}

.hero-wrapper.left .hero-form {
  padding-top: 40px;
	padding-bottom: 40px;
  padding-left: clamp(40px, (100vw - 1280px) / 2, 9999px); /* Larger padding on the left */
  padding-right: 80px;
}

/* Tablet Padding (768px - 1360px) */
@media (max-width: 1360px) and (min-width: 768px) {
  .hero-wrapper.right .hero-content,
  .hero-wrapper.left .hero-content {
    padding: 60px 40px;
  }

  .hero-wrapper.right .hero-form,
  .hero-wrapper.left .hero-form {
    padding: 40px;
  }
}

/* Mobile Padding (<768px) */
@media (max-width: 767px) {
  .hero-wrapper.right .hero-content,
  .hero-wrapper.left .hero-content {
    padding: 40px 20px;
  }

  .hero-wrapper.right .hero-form,
  .hero-wrapper.left .hero-form {
    padding: 20px;
  }
}


	.elementor-button-content-wrapper {
		z-index: 1;
	}

/*Renuity Social Icons*/
.renuity-social-icons {
    display: flex;
    flex-direction: row;
    gap: 1em;
    flex-wrap: nowrap;
    align-items: center;
}
.renuity-social-icons a.social-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    color: #fff;
    text-decoration: none;
    aspect-ratio: 1 / 1;
    padding: 0;
    border-radius: 3px;
    transition: color 0.3s ease, transform 0.2s ease;
    align-content: center;
}

.renuity-social-icons a.social-icon:hover {
	color: var(--e-global-color-397ad69);
}

.renuity-social-icons a i {
    display: flex;
    align-content: center;
    justify-content: center;
    align-items: center;
	font-size: 1.25em;
}

@media(max-width: 1024px){

	.renuity-social-icons {
		gap: 1.25em;
	}
}

/* 1) Base “teal + illustration” wrapper */
.bg-element {
  position: relative;
  z-index: 5;

  /* defaults you can override per-element via CSS vars in Elementor */
  --bg-top:        80px;
  --bg-width:      clamp(240px, calc(100vw - 960px), 654px);
  --bg-height:     424px;
  --bg-offset:     0; /* horizontal offset from left/right edge */

  /* create both layers */
}
.bg-element::before,
.bg-element::after {
  content: '';
  position: absolute;
  top: var(--bg-top);
  width: var(--bg-width);
  height: var(--bg-height);
  transform: translateY(-100%);
  pointer-events: none;
}
/* the colored “mesh” */
.bg-element::before {
  z-index: var(--bg-z-before);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  /* background-image set by .bg-rb / .bg-tb below */
}
/* the white illustration */
.bg-element::after {
  z-index: var(--bg-z-after);
  opacity: 0.2;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  /* background-image set by .ov-* below */
}

/* 2) Side modifiers */
.bg-element.right::before,
.bg-element.right::after {
  right: var(--bg-offset);
  left:  auto;
}
.bg-element.left::before,
.bg-element.left::after {
  left:  var(--bg-offset);
  right: auto;
}

.bg-element.right::before {
  border-radius: 24px 0 0 24px;
}

.bg-element.left::before {
  border-radius: 0 24px 24px 0;
}

/* 3) Gradient-mesh variants */
.bg-rb::before {
  background-image: url('/wp-content/uploads/2025/05/gradient-mesh-rb.svg');
}
.bg-tb::before {
  background-image: url('/wp-content/uploads/2025/05/gradient-mesh-tb.svg');
}


/* 4) Illustration variants */
.ov-roof::after       { background-image: url('/wp-content/uploads/2025/04/roof-illustration-white.svg'); }
.ov-window::after     { background-image: url('/wp-content/uploads/2025/02/window-illustration-white.svg'); }
.ov-shower::after   { background-image: url('/wp-content/uploads/2025/03/bathroom-illustration-white.svg'); }
.ov-bathtub::after   { background-image: url('/wp-content/uploads/2025/05/bathroom-2-illustration-white.svg'); }
.ov-door::after       { background-image: url('/wp-content/uploads/2025/04/door-illustration-white.svg'); }
.ov-screen-door::after       { background-image: url('/wp-content/uploads/2025/05/screen-door-illustration-white.svg'); }
.ov-patio::after       { background-image: url('/wp-content/uploads/2025/05/patio-illustration-white.svg'); }
.ov-coating::after       { background-image: url('/wp-content/uploads/2025/05/coatings-illustration-white.svg'); }
.ov-wallbed::after       { background-image: url('/wp-content/uploads/2025/05/wallbed-illustration-white.svg'); }
.ov-kitchen::after    { background-image: url('/wp-content/uploads/2025/04/kitchen-illustration-white.svg'); }
.ov-mudroom::after    { background-image: url('/wp-content/uploads/2025/04/mudroom-illustration-white.svg'); }
.ov-closet::after     { background-image: url('/wp-content/uploads/2025/04/closet-illustration-white.svg'); }
.ov-garage::after     { background-image: url('/wp-content/uploads/2025/04/garage-2-illustration-white.svg'); }
.ov-house::after     { background-image: url('/wp-content/uploads/2025/08/house-illustration-white.svg'); }

	/* 4) Illustration variants */
.ov-roof-tb::after       { background-image: url('/wp-content/uploads/2025/04/roof-illustration-tb.svg'); }
.ov-window-tb::after     { background-image: url('/wp-content/uploads/2025/02/window-illustration-tb.svg'); }
.ov-shower-tb::after   { background-image: url('/wp-content/uploads/2025/03/bathroom-illustration-tb.svg'); }
.ov-bathtub-tb::after   { background-image: url('/wp-content/uploads/2025/05/bathroom-2-illustration-tb.svg'); }
.ov-door-tb::after       { background-image: url('/wp-content/uploads/2025/04/door-illustration-tb.svg'); }
.ov-screen-door-tb::after       { background-image: url('/wp-content/uploads/2025/05/screen-door-illustration-tb.svg'); }
.ov-patio-tb::after       { background-image: url('/wp-content/uploads/2025/05/patio-illustration-tb.svg'); }
.ov-coating-tb::after       { background-image: url('/wp-content/uploads/2025/05/coatings-illustration-tb.svg'); }
.ov-wallbed-tb::after       { background-image: url('/wp-content/uploads/2025/05/wallbed-illustration-tb.svg'); }
.ov-kitchen-tb::after    { background-image: url('/wp-content/uploads/2025/04/kitchen-illustration-tb.svg'); }
.ov-mudroom-tb::after    { background-image: url('/wp-content/uploads/2025/04/mudroom-illustration-tb.svg'); }
.ov-closet-tb::after     { background-image: url('/wp-content/uploads/2025/04/closet-illustration-tb.svg'); }
.ov-garage-tb::after     { background-image: url('/wp-content/uploads/2025/04/garage-2-illustration-tb.svg'); }
.ov-house-tb::after     { background-image: url('/wp-content/uploads/2025/08/house-illustration-tb.svg'); }

/* 5) (Optional) Mobile reset — you can tweak or remove this */
@media (max-width: 767px) {
  .bg-element {
    --bg-top:    -5vw;
    --bg-width:  calc(100vw - 100px);
    --bg-height: 492px;
  }
  .bg-element::before,
  .bg-element::after {
    border-radius: 0 12px 12px 0;
    left:  0;
    right: 0;
  }
}

.img-ratio img {
  width: 100%;           /* fill container */
  aspect-ratio: 1 / 1;   /* enforce square */
  object-fit: cover;     /* crop to fill */
}

/* --------------------------------------------------
   3:2 rectangle on tablet & mobile
   -------------------------------------------------- */
@media (max-width: 1024px) {
  .img-ratio img {
    aspect-ratio: 3 / 2;
  }
}
.img-fullheight {
	align-self: stretch;
}
.img-fullheight img {
  display: block;         /* remove inline gaps */
  height: 100%;           /* fill container height */
  width: auto;            /* let width adjust to preserve ratio */
  object-fit: cover;      /* crop if image is too wide */
}

/* tablets & phones: force 3:2 ratio by width, reset height */
@media (max-width: 1024px) {
  .img-fullheight img {
    width: 100%;          /* fill container width */
    height: auto;         /* height determined by aspect-ratio */
    aspect-ratio: 3 / 2;  /* enforce 3:2 */
    object-fit: cover;    /* crop if needed */
  }
}

.offers-container {
    display: flex;
    flex-direction: column;
}

 .offer-box, .offer-box picture {
    background: #F6F6F6;
    overflow: hidden;
    display: flex;
    flex-direction: column; /* CHANGED from row */
    gap: 0px;
    box-shadow: 0px 2px 14px 0px rgba(0,0,0,0.15);
}

.offer-box img {

 /* ORIGINAL RULE CHANGED: now scoped to direct child only */
}
.offer-box > img {
  max-width: 220px;
  width: 100%;
  object-fit: cover;
  border-radius: 0;
}

/* Ensure nested image (now inside .offer-box-content-wrapper) fills full column height */
.offer-box .offer-box-content-wrapper picture img,
.offer-box .offer-box-content-wrapper img.offer-box-img {
  height: 100%;
  width: 100%;
  max-width: 100%;
  object-fit: cover;
  border-radius: 0;
}

.offer-box .offer-box-content-wrapper {
 display: flex;
 flex-direction: row; /* CHANGED from column */
 width: 100%;
 align-items: stretch; /* ensure flex items match tallest sibling */
}
 /* Make the <picture> behave as a fixed-width, full-height column */
.offer-box .offer-box-content-wrapper picture {
  display: flex;
  flex: 0 0 35%; /* keep original image width intent */
}
/* Force image to fill the column height */
.offer-box .offer-box-content-wrapper picture img,
.offer-box .offer-box-content-wrapper img.offer-box-img {
  height: 100%;
  width: 100%;
  max-width: 100%;
  object-fit: cover;
  border-radius: 0;
}
/* If you want the mobile width behavior to persist, existing media queries will still apply.
   No new classes added; only existing selectors extended. */

.offer-box .expiration-date {
    background-color: var(--e-global-color-secondary);
    color: white;
}

 .offer-box .offer-expiration-wrapper {
    display: flex;
    align-content: center;
    justify-content: space-between;
    gap: 6px;
    flex-wrap: wrap;

}
 .offer-box .lp-countdown {
    display: flex;
    color: white;
    gap: 0.5em;
    justify-content: space-between;
}

 .offer-box .offer-expiration-intro {
    color: white;
    font-size: 16px;
    font-weight: 400;
    text-align: center;
}
 .offer-box .lp-countdown .countdown-col {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 1px;
    font-size: 16px;
}
 .offer-box .lp-countdown .countdown-col span {
    color: var(--e-global-color-397ad69);
    font-weight: 900;
    font-size: 1.25rem;
    line-height: 1em;
}

@media(max-width: 857px) and (min-width: 768px){
 .offer-box {
  display: flex;
  flex-direction: column!important; /* still fine after base change */
 }

  .offer-box img {
 max-width: 220px!important;
 width: 100%;
 height: 100%;
 min-height: 100%;
object-fit: cover;
 border-radius: 0px;

}
}

@media(max-width: 767px) {

.offer-box .offer-box-content-wrapper picture img,
.offer-box .offer-box-content-wrapper img.offer-box-img {
 max-width: 100%;
 width: 100%;
 min-height: 100%;
object-fit: cover;
 border-radius: 0px;

}

 .offer-box .lp-countdown .countdown-col span {
    font-size: 1rem;
}

 .offer-box .lp-countdown .countdown-col {
    font-size: 14px;
}

 .offer-box .lp-countdown {
    justify-content: space-between;
}
    }

 .offer-box a {
    color: var(--e-global-color-accent);
    font-weight: 700;
    transition: color 0.3s ease-in-out;
}
 .offer-box a:hover {
    color: var(--e-global-color-primary);
}

 .offer-box h3 {
    font-family: var(--e-global-typography-0a30645-font-family), Sans-serif;
    font-size: var(--e-global-typography-0a30645-font-size);
    font-weight: var(--e-global-typography-0a30645-font-weight);
    text-transform: var(--e-global-typography-0a30645-text-transform);
    line-height: var(--e-global-typography-0a30645-line-height);
    letter-spacing: var(--e-global-typography-0a30645-letter-spacing);
    color: var(--e-global-color-secondary);
}

 .offer-box h3 span {
    color: var(--e-global-color-primary);
    font-weight:900;
    text-transform: uppercase;
}

 .offer-box .expiration-date {
padding: 8px 16px;
}

 .offer-box .offer-content {
padding: 24px 16px;
}

@media(max-width: 480px) {
 .offer-box .offer-content {
padding: 16px;
}
}

@media(max-width: 360px) {
 .offer-box-content-wrapper {
  display: flex;
  flex-direction: column!important;
 }

  .offer-box img {
 max-width: 100%;
 width: 100%;
   aspect-ratio: 3/2!important;
object-fit: cover;
 border-radius: 0px;
 height: 100%;

}}

/* Visually hidden but readable by screen readers and copy/paste */
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip: rect(0 0 1px 1px); clip-path: inset(50%);
  white-space: nowrap;
}

/* Wrapper: behaves like a glyph and scales with heading font-size */
.kohler-logo-text {
  position: relative;
  display: inline-block;
  line-height: 1;
  height: 1em!important;              /* base size = current font size */
  vertical-align: -0.05em;  /* tweak baseline if needed */
}

/* Show the logo; real text stays in .sr-only for a11y */
.kohler-logo-text::before {
  content: "";
  display: inline-block;
  height: 100%;
  aspect-ratio: 115 / 34;   /* keep proportions */
  background-image: url(/wp-content/uploads/2025/03/kohler-logo.svg);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: left bottom;
}

.overlay-hero .kohler-logo-text::before, footer .kohler-logo-text::before, .header-wrapper .header-main .mega-menu-wrapper ul li.mega-menu-item .mega-panel .mega-panel__right .mega-panel-post-full h3 .kohler-logo-text::before {
	background-image: url(/wp-content/uploads/2025/03/kohler-logo-white.svg)!important;
}

/* Optional per-heading level fine-tuning (scales relative to 1em of that heading) */
h1 .kohler-logo-text { height: calc(1em * var(--kohler-scale-h1, 1.20)); }
h2 .kohler-logo-text { height: calc(1em * var(--kohler-scale-h2, 1.20)); }
h3 .kohler-logo-text { height: calc(1em * var(--kohler-scale-h3, 1.20)); }
h4 .kohler-logo-text { height: calc(1em * var(--kohler-scale-h4, 1.20)); }
h5 .kohler-logo-text { height: calc(1em * var(--kohler-scale-h5, 1.20)); }
h6 .kohler-logo-text { height: calc(1em * var(--kohler-scale-h6, 1.20)); }

/* Breakpoint examples—adjust just the variables, not the logo CSS */
@media (max-width: 1024px) {
  h1 { --kohler-scale-h1: 1.10; }
  h2 { --kohler-scale-h2: 1.10; }
}
@media (max-width: 767px) {
  h1 { --kohler-scale-h1: 1.05; }
  h2 { --kohler-scale-h2: 1.05; }
  h3 { --kohler-scale-h3: 1.05; }
}

/* Icon list item vertical alignment */
.icon-list-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* Benefit list styling */
.benefit-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.benefit-list-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

h2.hero-form-heading {
  color: white;
}


/* hide the non-offer content (offers) */
.form-heading-container:has(.display-none), .expiration-date-container:has(.display-none) {
  display: none;
}
/*
body.logged-in .site-content {
  padding-top: 158px;
}
.site-content {
  padding-top: 126px;
}


html body .site-content {
  @media (max-width: 768px) {
    padding-top: 60px;
  }

  @media (max-width: 1024px) {
    padding-top: 80px;
  }
}*/