@font-face {
	font-weight: normal;
	font-style: normal;
	font-family: "woodmart-font";
	src: url("//staging.idhhc.ca/wp-content/themes/woodmart/fonts/woodmart-font-1-400.woff2?v=8.3.3") format("woff2");
}

@font-face {
	font-family: "star";
	font-weight: 400;
	font-style: normal;
	src: url("//staging.idhhc.ca/wp-content/plugins/woocommerce/assets/fonts/star.eot?#iefix") format("embedded-opentype"), url("//staging.idhhc.ca/wp-content/plugins/woocommerce/assets/fonts/star.woff") format("woff"), url("//staging.idhhc.ca/wp-content/plugins/woocommerce/assets/fonts/star.ttf") format("truetype"), url("//staging.idhhc.ca/wp-content/plugins/woocommerce/assets/fonts/star.svg#star") format("svg");
}

@font-face {
	font-family: "WooCommerce";
	font-weight: 400;
	font-style: normal;
	src: url("//staging.idhhc.ca/wp-content/plugins/woocommerce/assets/fonts/WooCommerce.eot?#iefix") format("embedded-opentype"), url("//staging.idhhc.ca/wp-content/plugins/woocommerce/assets/fonts/WooCommerce.woff") format("woff"), url("//staging.idhhc.ca/wp-content/plugins/woocommerce/assets/fonts/WooCommerce.ttf") format("truetype"), url("//staging.idhhc.ca/wp-content/plugins/woocommerce/assets/fonts/WooCommerce.svg#WooCommerce") format("svg");
}

:root {
	--wd-text-font: "Poppins", Arial, Helvetica, sans-serif;
	--wd-text-font-weight: 400;
	--wd-text-color: rgb(11,37,69);
	--wd-text-font-size: 19px;
	--wd-title-font: "Fraunces", Arial, Helvetica, sans-serif;
	--wd-title-font-weight: 700;
	--wd-title-color: rgb(21,74,138);
	--wd-entities-title-font: "Yantramanav", Arial, Helvetica, sans-serif;
	--wd-entities-title-font-weight: 500;
	--wd-entities-title-color: #333333;
	--wd-entities-title-color-hover: rgb(51 51 51 / 65%);
	--wd-alternative-font: "Lato", Arial, Helvetica, sans-serif;
	--wd-widget-title-font: "Yantramanav", Arial, Helvetica, sans-serif;
	--wd-widget-title-font-weight: 500;
	--wd-widget-title-transform: uppercase;
	--wd-widget-title-color: #333;
	--wd-widget-title-font-size: 16px;
	--wd-header-el-font: "Inter", Arial, Helvetica, sans-serif;
	--wd-header-el-font-weight: 500;
	--wd-header-el-transform: uppercase;
	--wd-header-el-font-size: 13px;
	--wd-otl-style: dotted;
	--wd-otl-width: 2px;
	--wd-primary-color: rgb(220,124,64);
	--wd-alternative-color: rgb(21,74,138);
	--btn-default-bgcolor: #f7f7f7;
	--btn-default-bgcolor-hover: #efefef;
	--btn-accented-bgcolor: rgb(219,124,63);
	--btn-accented-bgcolor-hover: rgb(226,127,65);
	--wd-form-brd-width: 2px;
	--notices-success-bg: #459647;
	--notices-success-color: #fff;
	--notices-warning-bg: #E0B252;
	--notices-warning-color: #fff;
	--wd-link-color: rgb(220,124,64);
	--wd-link-color-hover: rgb(30,115,190);
	--wd-link-decor-style: solid;
}
.wd-age-verify-wrap {
	--wd-popup-width: 500px;
}
.wd-popup.wd-promo-popup {
	background-color: #111111;
	background-image: none;
	background-repeat: no-repeat;
	background-size: contain;
	background-position: left center;
}
.wd-promo-popup-wrap {
	--wd-popup-width: 800px;
}
:is(.woodmart-woocommerce-layered-nav, .wd-product-category-filter) .wd-scroll-content {
	max-height: 223px;
}
.wd-page-title .wd-page-title-bg img {
	object-fit: cover;
	object-position: center center;
}
.wd-footer {
	background-color: rgb(45,156,218);
	background-image: url(https://staging.idhhc.ca/wp-content/uploads/2025/10/web-pattern-txt.jpg);
}
html .wd-nav.wd-nav-main > li > a {
	font-family: "Poppins", Arial, Helvetica, sans-serif;
	font-weight: 700;
	font-size: 16px;
}
html .post.wd-post:not(.blog-design-small) .wd-entities-title {
	font-family: "Fraunces", Arial, Helvetica, sans-serif;
	font-weight: 700;
	color: rgb(21,74,138);
}
.page .wd-page-content {
	background-color: rgb(249,249,249);
	background-image: url(https://staging.idhhc.ca/wp-content/uploads/2025/10/bg-dotted-3.png);
	background-repeat: repeat;
}
html .register .button {
	color: rgb(255,255,255);
	background: rgb(21,74,138);
}
html .register .button:hover {
	color: rgb(255,255,255);
	background: rgb(16,70,127);
}
.mfp-wrap.wd-popup-quick-view-wrap {
	--wd-popup-width: 920px;
}
:root{
--wd-container-w: 1222px;
--wd-form-brd-radius: 0px;
--btn-default-color: #333;
--btn-default-color-hover: #333;
--btn-accented-color: #fff;
--btn-accented-color-hover: #fff;
--btn-default-brd-radius: 35px;
--btn-default-box-shadow: none;
--btn-default-box-shadow-hover: none;
--btn-accented-brd-radius: 35px;
--btn-accented-box-shadow: none;
--btn-accented-box-shadow-hover: none;
--wd-brd-radius: 0px;
}

@media (min-width: 1222px) {
section.elementor-section.wd-section-stretch > .elementor-container {
margin-left: auto;
margin-right: auto;
}
}


.wd-page-title {
background-color: rgb(42,155,204);
}

body.single-post .wd-post-image{
display:none;
}
/* Two-column layout */
.wpcf7 form .newsletter-form .wd-col {
  flex: 1 1 50%;
  padding: 0 10px;
}

.wpcf7 form .newsletter-form .wd-grid-f-stretch {
  display: flex;
  gap: 10px;
}

/* Field styling */
.wpcf7 form .newsletter-form input[type="text"],
.wpcf7 form .newsletter-form input[type="email"] {
  width: 100%;
  padding: 12px 18px;
  border: 1px solid #ccc;
  border-radius: 8px;
  font-size: 16px;
  font-family: inherit;
}

/* Submit button */
.wpcf7 form .newsletter-form .newsletter-btn-wrap {
  text-align: center;
  margin-top: 20px;
}

.wpcf7 form .newsletter-form input[type="submit"].newsletter-btn {
  background: #db7c3f;
  color: #fff;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 16px;
  padding: 14px 40px;
  border-radius: 50px;
  border: none;
  cursor: pointer;
  letter-spacing: .02em;
  transition: background-color .3s ease;
}

.wpcf7 form .newsletter-form input[type="submit"].newsletter-btn:hover {
  background: #c46f39;
}

/* Privacy note text */
.wpcf7 form .newsletter-form .newsletter-note {
  text-align: center;
  font-size: 14px;
  margin-top: 10px;
  color: #0B2545; /* adjust for dark background */
  opacity: 0.9;
}

/* HARD mobile override for newsletter form */
@media (max-width: 767px) {
  /* Make the wrapper behave like a single column */
  .wpcf7 form .newsletter-form,
  .wpcf7 form .newsletter-form .wd-grid-f-stretch {
    display: block !important;
  }

  /* Make each column full width, stacked */
  .wpcf7 form .newsletter-form .wd-col {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* Just to be extra safe on the inputs */
  .wpcf7 form .newsletter-form input[type="text"],
  .wpcf7 form .newsletter-form input[type="email"] {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
  }
}
@media (max-width: 767px) {
  /* Add spacing between stacked fields */
  .wpcf7 form .newsletter-form .wd-col {
    margin-bottom: 12px !important;
  }

  /* Remove extra margin from the last field row */
  .wpcf7 form .newsletter-form .wd-grid-f-stretch .wd-col:last-child {
    margin-bottom: 0 !important;
  }
}
/* Contact Form */
/* Force two columns on desktop */
.wpcf7 form .contact-form .wd-grid-f-stretch {
  display: flex !important;
  gap: 10px;
  flex-wrap: wrap;
}
.wpcf7 form .contact-form .wd-col {
  flex: 1 1 50%;
  min-width: 280px;           /* prevents squish */
}

/* Inputs consistent sizing */
.wpcf7 form .contact-form input[type="text"],
.wpcf7 form .contact-form input[type="email"],
.wpcf7 form .contact-form input[type="tel"],
.wpcf7 form .contact-form textarea,
.wpcf7 form .contact-form select {
  width: 100%;
  box-sizing: border-box;
  font-size: 16px;
  padding: 12px 18px;
  border: 1px solid #ccc;
  border-radius: 8px;
  line-height: 1.4;
}

/* Select: fix clipped text and tiny height */
.wpcf7 form .contact-form select {
  min-height: 48px;
  height: auto;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  padding-right: 36px;        /* space for native arrow */
}

/* Button uses your orange style */
.wpcf7 form .contact-form .contact-btn-wrap {
  text-align: center;
  margin-top: 20px;
}
.wpcf7 form .contact-form input[type="submit"].contact-btn {
  background: #db7c3f;
  color: #fff;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 16px;
  padding: 14px 40px;
  border-radius: 50px;
  border: none;
  cursor: pointer;
  letter-spacing: .02em;
  transition: background-color .3s ease;
}
.wpcf7 form .contact-form input[type="submit"].contact-btn:hover {
  background: #c46f39;
}

/* Mobile: stack fields */
@media (max-width: 767px) {
  .wpcf7 form .contact-form .wd-grid-f-stretch { flex-direction: column; }
  .wpcf7 form .contact-form .wd-col { min-width: 100%; }
}
/* Force two-column rows for this form only */
.wpcf7 form #idhhc-contact-form .wd-grid-f-stretch { 
  display: flex !important; 
  gap: 10px; 
  flex-wrap: wrap; 
}
.wpcf7 form #idhhc-contact-form .wd-col { 
  flex: 1 1 50% !important; 
  min-width: 280px; 
}

/* Keep textarea full width */
.wpcf7 form #idhhc-contact-form > div:not(.wd-grid-f-stretch) textarea { 
  width: 100%; 
}

/* Ensure no theme forces 100% width on columns */
.wpcf7 form #idhhc-contact-form .wd-col * { 
  max-width: 100%; 
  box-sizing: border-box; 
}

/* Select height fix so text is visible */
.wpcf7 form #idhhc-contact-form select {
  min-height: 48px;
  padding: 12px 18px;
  line-height: 1.4;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

/* Button uses your orange style */
.wpcf7 form #idhhc-contact-form .contact-btn-wrap { text-align: center; margin-top: 20px; }
.wpcf7 form #idhhc-contact-form input[type="submit"].contact-btn {
  background: #db7c3f; color:#fff; font-weight:700; text-transform:uppercase;
  font-size:16px; padding:14px 40px; border-radius:50px; border:none; cursor:pointer; letter-spacing:.02em;
  transition: background-color .3s ease;
}
.wpcf7 form #idhhc-contact-form input[type="submit"].contact-btn:hover { background:#c46f39; }

/* Mobile stacks */
@media (max-width: 767px){
  .wpcf7 form #idhhc-contact-form .wd-grid-f-stretch { flex-direction: column; }
  .wpcf7 form #idhhc-contact-form .wd-col { min-width: 100%; }
}
/* Wrap container – optional alignment */
.sdm_download_link {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Button core styling */
.sdm_download_link .sdm_download_button a.sdm_download.orange {
  background: #db7c3f;        /* same orange as your form buttons */
  color: #fff !important;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 16px;
  padding: 14px 40px;
  border-radius: 50px;
  border: none;
  display: inline-block;
  text-decoration: none;
  letter-spacing: .02em;
  transition: background-color .3s ease, transform .1s ease;
}

/* Hover effect */
.sdm_download_link .sdm_download_button a.sdm_download.orange:hover {
  background: #c46f39;        /* darker orange (your hover color) */
  transform: translateY(-1px);
}

/* Optional: adjust the download counter next to the button */
.sdm_download_link .sdm_download_item_count {
  font-size: 14px;
  color: #0B2545;
  opacity: 0.85;
}
/* Prevent button text from breaking into two lines */
.sdm_download_link .sdm_download_button a.sdm_download.orange {
  white-space: nowrap;
}

/* Optional: allow button to grow fully on small screens */
@media (max-width: 480px) {
  .sdm_download_link .sdm_download_button a.sdm_download.orange {
    padding-left: 26px;
    padding-right: 26px;
    font-size: 15px; /* slight reduction helps keep it on one line */
  }
}
[data-fundraising-form] {
  border-radius: 12px;
  border: 1px solid #ccc;
  background-color: #fff;
  box-shadow: 0 4px 10px rgba(0,0,0,0.05);
  transition: box-shadow 0.3s ease;
}

[data-fundraising-form]:hover {
  box-shadow: 0 6px 14px rgba(0,0,0,0.1);
}



/* Calendar */
/* ====== IDHHC Calendar – Locations section ====== */
.idhhc-calendar-locations {
  /* keeps everything aligned with the page */
  margin-block: 2.5rem;
}

/* Grid layout for the two location cards */
.idhhc-calendar-locations .latepoint-resources-items-w {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem;
}

/* Each location card */
.idhhc-calendar-locations .resource-item {
  background: #f8f8f9;          /* light grey from guide */
  border-radius: 24px;
  padding: 1.5rem 1.5rem 1.75rem;
  border: 1px solid rgba(12, 37, 69, 0.08);
  box-shadow: 0 10px 30px rgba(12, 37, 69, 0.08);
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

/* Map iframe */
.idhhc-calendar-locations .ri-map iframe {
  border-radius: 18px;
  overflow: hidden;
  display: block;
}

/* Location title (Victoria Office, Nanaimo Office) */
.idhhc-calendar-locations .ri-name h3 {
  margin: 0;
  font-family: "Fraunces", "Times New Roman", serif; /* headline font */
  font-size: 1.35rem;
  line-height: 1.2;
  color: #154a8a;   /* main blue */
}

/* Address line */
.idhhc-calendar-locations .ri-description {
  font-family: "Poppins", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    sans-serif;
  font-weight: 300;              /* Extra Light / Light feel */
  font-size: 0.98rem;
  line-height: 1.5;
  color: #0b2545;               /* body text blue */
}

/* External link icon next to address */
.idhhc-calendar-locations .ri-description .ri-external-link {
  margin-left: 0.35rem;
  color: #154a8a;
  text-decoration: none;
}

.idhhc-calendar-locations .ri-description .ri-external-link:hover {
  color: #db7c3f;               /* accent orange */
}

/* Wrap for the button */
.idhhc-calendar-locations .ri-buttons {
  margin-top: 0.75rem;
}

/* Reset WP button styles inside */
.idhhc-calendar-locations .ri-buttons.wp-block-button {
  display: inline-flex;
}

/* "Book Now" button – rounded outline on white BG */
.idhhc-calendar-locations .ri-buttons .latepoint-book-button.wp-block-button__link {
  font-family: "Poppins", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    sans-serif;
  font-weight: 700;
  font-size: 0.95rem;
  border-radius: 999px;          /* pill */
  padding: 0.6rem 1.6rem;
  border: 2px solid #154a8a;     /* outline on white */
  background: transparent;
  color: #154a8a;
  text-decoration: none;
  text-transform: none;
  letter-spacing: 0.02em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition:
    background 0.25s ease,
    color 0.25s ease,
    border-color 0.25s ease,
    box-shadow 0.25s ease,
    transform 0.18s ease;
}

/* Hover – orange solid button with subtle animation */
.idhhc-calendar-locations
  .ri-buttons
  .latepoint-book-button.wp-block-button__link:hover {
  background: #db7c3f;
  border-color: #db7c3f;
  color: #ffffff;
  box-shadow: 0 10px 28px rgba(219, 124, 63, 0.35);
  transform: translateY(-1px);
}

/* Focus style for accessibility */
.idhhc-calendar-locations
  .ri-buttons
  .latepoint-book-button.wp-block-button__link:focus-visible {
  outline: 3px solid #0c2545;
  outline-offset: 3px;
}

/* Small screens tweaks */
@media (max-width: 768px) {
  .idhhc-calendar-locations {
    margin-block: 1.5rem 2.5rem;
  }

  .idhhc-calendar-locations .resource-item {
    padding: 1.25rem 1.1rem 1.5rem;
  }

  .idhhc-calendar-locations .ri-name h3 {
    font-size: 1.2rem;
  }
}
.title-size-default .title {
        font-size: 60px
    }

    .title-size-large {
        padding: 200px 0 !important;
    }
/* Scoped reusable style for top-aligned + bullets */
.wc-plus-list .wd-list li {
  position: relative;
  padding-left: 1.5rem;
  list-style: none;
}

.wc-plus-list .wd-list li .wd-icon {
  display: none;
}

.wc-plus-list .wd-list li::before {
  content: "+";
  position: absolute;
  left: 0;
  top: 0;   /* adjust between 0.1em–0.2em for perfect alignment */
  color: #df7b2d; /* your theme’s orange */
  font-weight: 400;
  font-size: 1.5em;
}

@media (min-width: 1025px) {
	.wd-logo img {
	padding-top:0;
}
.idhhcboxone .info-box-wrapper .wd-info-box{
	min-height: 350px;
}

.idhhc-donor-boxtwo .info-box-wrapper .wd-info-box{
	min-height: 320px;
}
.idhhc-donor-boxone .info-box-wrapper .wd-info-box{
	min-height: 250px;
}

.idhhcadslclass .info-box-wrapper .wd-info-box{
	min-height: 300px;
}
.idhhchomeadvatanges .info-box-wrapper .wd-info-box{
	min-height: 430px;
}
idhhcadslclass
#idhhcboxone .wd-info-box, #idhhcresources .wd-info-box, #idhhcresourcestwo .wd-info-box, #idhhcresourcesthree .wd-info-box, #idhhcresourcesfour .wd-info-box, #idhhcresourcesfive .wd-info-box, #idhhcresourcessix .wd-info-box{
  display: flex;
  flex-direction: column;
  height: 100%;
}

#idhhcboxone .info-box-content, #idhhcresources .info-box-content, #idhhcresourcestwo .info-box-content, #idhhcresourcesthree .info-box-content, #idhhcresourcesfour .info-box-content, #idhhcresourcesfive .info-box-content , #idhhcresourcessix .info-box-content  {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

#idhhcboxone .info-btn-wrapper, #idhhcresources .info-btn-wrapper, #idhhcresourcestwo .info-btn-wrapper, #idhhcresourcesthree .info-btn-wrapper, #idhhcresourcesfour .info-btn-wrapper, #idhhcresourcesfive .info-btn-wrapper , #idhhcresourcessix .info-btn-wrapper {
  margin-top: auto; /* pushes button area to bottom */
}
.hearinghealthworkshop .info-box-wrapper .wd-info-box{
	min-height: 460px;
}
.idhhcresources .info-box-wrapper .wd-info-box{
	min-height: 520px;
}
.idhhcresourcestwo .info-box-wrapper .wd-info-box, .idhhcresourcesthree .info-box-wrapper .wd-info-box{
	min-height: 550px;
}
.idhhcresourcesfour .info-box-wrapper .wd-info-box{
	min-height: 550px;
}
.idhhcresourcesfive .info-box-wrapper .wd-info-box{
	min-height: 500px;
}
.idhhcresourcessix .info-box-wrapper .wd-info-box{
	min-height: 500px;
}
.idhhcresourcesseven .info-box-wrapper .wd-info-box{
	min-height: 400px;
}
/* === IDHHC Staff: force equal-height cards & preserve rounded corners === */

/* 1) Make every wrapper a full-height flex column */
.idhhcstaff .fdtb_box-column,
.idhhcstaff .fdtb_box-column-wrap,
.idhhcstaff .fdtb_box-widget-wrap,
.idhhcstaff .team-box {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* 2) The card itself: same height for all, clip children to radius */
.idhhcstaff .team-box {
  /* match Amanda's visual height; tweak if needed */
  min-height: 650px; 
  border-radius: 24px;
  overflow: hidden;           /* ensures blue footer and image respect the radius */
  background: #154a8a;           /* fallback so corners are clean */
}

/* 3) Let the image area expand to fill remaining space */
.idhhcstaff .fdtb_box-widget-image-box {
  flex: 1 1 auto;
  min-height: 0;
}

/* Ensure image fills and crops nicely */
.idhhcstaff .fdtb_box-image-box-wrapper,
.idhhcstaff .fdtb_box-image-box-img {
  height: 100%;
}
.idhhcstaff .fdtb_box-image-box-img .teambox-image,
.idhhcstaff .fdtb_box-image-box-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* 4) Keep the blue caption pinned to the bottom and consistent */
.idhhcstaff .fdtb_box-image-box-content {
  margin-top: auto;           /* push to bottom of the card */
  padding: 20px;
  background: #1d4570;        /* your blue */
  color: #fff;
}

/* Optional: keep captions the same visual height, even with longer names */
.idhhcstaff .fdtb_box-image-box-content .fdtb_box-image-box-title,
.idhhcstaff .fdtb_box-image-box-content .fdtb_box-image-box-description {
  display: -webkit-box;
  -webkit-line-clamp: 2;      /* clamp to 2 lines; adjust if needed */
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* ===========================
   SCROLLING PLUS DECORATIONS
   =========================== */

/* Base setup for both sections */
.idhhcmiddleboxes,
.idhhcsecondbox {
  position: relative;
  overflow: hidden;
  --plus-rot: 0deg;
  --plus-y: 0px;
}

/* ===== FIRST SECTION → LEFT SIDE ===== */
.idhhcmiddleboxes::before {
  content: "";
  position: absolute;
  left: 6%;
  right: auto; /* clear right */
  top: 18%;
  width: 220px;
  height: 220px;
  z-index: 1;
  pointer-events: none;
  background-repeat: no-repeat;
  background-size: contain;
  transform-origin: 50% 50%;
  transform: translate3d(0, var(--plus-y), 0) rotate(var(--plus-rot));
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><g fill="%23db7c3f" fill-opacity="1"><rect x="45" y="10" width="10" height="80" rx="5"/><rect x="10" y="45" width="80" height="10" rx="5"/></g></svg>');
}

/* ===== SECOND SECTION → RIGHT SIDE ===== */
.idhhcsecondbox::before {
  content: "";
  position: absolute;
  right: 6%;
  left: auto; /* clear left */
  top: 18%;
  width: 220px;
  height: 220px;
  z-index: 1;
  pointer-events: none;
  background-repeat: no-repeat;
  background-size: contain;
  transform-origin: 50% 50%;
  transform: translate3d(0, var(--plus-y), 0) rotate(var(--plus-rot));
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><g fill="%23db7c3f" fill-opacity="1"><rect x="45" y="10" width="10" height="80" rx="5"/><rect x="10" y="45" width="80" height="10" rx="5"/></g></svg>');
}

/* ===== MOBILE RESPONSIVE ===== */
@media (max-width: 767px) {
  .idhhcmiddleboxes::before,
  .idhhcsecondbox::before {
    width: 140px;
    height: 140px;
    top: 10%;
  }

  .idhhcmiddleboxes::before {
    left: 4%;
    right: auto;
  }

  .idhhcsecondbox::before {
    right: 4%;
    left: auto;
  }
}

/* ===== ACCESSIBILITY (reduced motion) ===== */
@media (prefers-reduced-motion: reduce) {
  .idhhcmiddleboxes::before,
  .idhhcsecondbox::before {
    transform: none !important;
  }
}

/* ===== OPTIONAL: force right-side correction in case Elementor overrides left positioning ===== */
.elementor .idhhcsecondbox::before {
  right: 6% !important;
  left: auto !important;
}
.copyrights-wrapper {
	font-size: 12px;
}

.idhhc-left-pattern-bg {
  position: relative;
  height: 0;              /* no vertical space in the layout */
  overflow: visible;      /* let the pseudo-element show outside */
}
/* your existing logic – container itself has no height */
.idhhc-left-pattern-bg {
  position: relative;
  height: 0;
  overflow: visible;
}

/* desktop pattern */
.idhhc-left-pattern-bg::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 190px;              /* desktop width */
  height: 1200px;             /* desktop height */
  background-image: url('https://staging.idhhc.ca/wp-content/uploads/2025/11/gd-bg-pattern-002.png');
  background-repeat: no-repeat;
  background-position: left top;
  background-size: contain;
  z-index: -1;               /* always behind text */
  pointer-events: none;
}

/* 27" style still fine up to around 1600px or so */
@media (max-width: 1600px) {
  .idhhc-left-pattern-bg::before {
    width: 150px;
    height: 420px;
    left: -15px;             /* push a bit off-screen */
  }
}

/* laptops like 14" MacBook */
@media (max-width: 1280px) {
  .idhhc-left-pattern-bg::before {
    width: 110px;
    height: 320px;
    left: -30px;             /* mostly outside the content area */
  }
}

/* tablets and phones – simplest is to hide it */
@media (max-width: 991px) {
  .idhhc-left-pattern-bg::before {
    display: none;
  }
}

}

@media (max-width: 576px) {
	/* ===== OPTIONAL: force right-side correction in case Elementor overrides left positioning ===== */
.elementor .idhhcsecondbox::before {
  right: 6% !important;
  left: auto !important;
}
.copyrights-wrapper {
	font-size: 10px;
}
.wd-logo img {
	padding-top:0;
}
}