/* ------------------------------------------------------------------
   Hade Consultancy - cross-page consistency adjustments
   Reference: the homepage layout.
   ------------------------------------------------------------------ */

/* Service pages: "What Our ... Plans Include"

   Container 5ecd8d5d holds [heading, row of 3, row of 3]. Each row is its own
   flex line, so a row sizes to its own tallest card and the two rows end up
   disagreeing (e.g. 246px vs 224px). Collapsing both rows into a single grid
   gives every card one shared row height, the way the homepage already reads.

   Scoped to the eight service pages: the homepage uses the same container id
   but with two headings and rows that already match, so it is left alone.
   Desktop only - the stacked mobile layout is already correct. */
@media (min-width: 1025px) {

	.page-id-575 .elementor-element-5ecd8d5d > .e-con-inner,
	.page-id-636 .elementor-element-5ecd8d5d > .e-con-inner,
	.page-id-699 .elementor-element-5ecd8d5d > .e-con-inner,
	.page-id-725 .elementor-element-5ecd8d5d > .e-con-inner,
	.page-id-742 .elementor-element-5ecd8d5d > .e-con-inner,
	.page-id-753 .elementor-element-5ecd8d5d > .e-con-inner,
	.page-id-767 .elementor-element-5ecd8d5d > .e-con-inner,
	.page-id-787 .elementor-element-5ecd8d5d > .e-con-inner {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		grid-template-rows: auto;  /* the section heading */
		grid-auto-rows: 1fr;       /* both card rows share one height */
		align-items: stretch;
		row-gap: 24px;
		column-gap: 32px;
	}

	/* The heading spans the full width above the cards. */
	.page-id-575 .elementor-element-5ecd8d5d > .e-con-inner > .elementor-widget,
	.page-id-636 .elementor-element-5ecd8d5d > .e-con-inner > .elementor-widget,
	.page-id-699 .elementor-element-5ecd8d5d > .e-con-inner > .elementor-widget,
	.page-id-725 .elementor-element-5ecd8d5d > .e-con-inner > .elementor-widget,
	.page-id-742 .elementor-element-5ecd8d5d > .e-con-inner > .elementor-widget,
	.page-id-753 .elementor-element-5ecd8d5d > .e-con-inner > .elementor-widget,
	.page-id-767 .elementor-element-5ecd8d5d > .e-con-inner > .elementor-widget,
	.page-id-787 .elementor-element-5ecd8d5d > .e-con-inner > .elementor-widget {
		grid-column: 1 / -1;
	}

	/* Dissolve the two row wrappers so the six cards become the grid items. */
	.page-id-575 .elementor-element-5ecd8d5d > .e-con-inner > .e-con,
	.page-id-636 .elementor-element-5ecd8d5d > .e-con-inner > .e-con,
	.page-id-699 .elementor-element-5ecd8d5d > .e-con-inner > .e-con,
	.page-id-725 .elementor-element-5ecd8d5d > .e-con-inner > .e-con,
	.page-id-742 .elementor-element-5ecd8d5d > .e-con-inner > .e-con,
	.page-id-753 .elementor-element-5ecd8d5d > .e-con-inner > .e-con,
	.page-id-767 .elementor-element-5ecd8d5d > .e-con-inner > .e-con,
	.page-id-787 .elementor-element-5ecd8d5d > .e-con-inner > .e-con {
		display: contents;

		/* Elementor hides a row until its scroll animation runs, via
		   .elementor-invisible{visibility:hidden}. A dissolved row generates no
		   box, so that animation never starts and the inherited hidden value
		   would keep the cards invisible for good. The entrance animation is
		   forfeited here; the cards themselves are what matters. */
		visibility: visible;
	}

	/* About Us: "Why We're the Best Business Plan Consultant" has the same
	   two-row problem. Container 33f55e6 holds two headings before the rows,
	   so two explicit auto rows are reserved here rather than one. */
	.page-id-495 .elementor-element-33f55e6 > .e-con-inner {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		grid-template-rows: auto auto;  /* heading + sub-heading */
		grid-auto-rows: 1fr;
		align-items: stretch;
		row-gap: 24px;
		column-gap: 32px;
	}

	.page-id-495 .elementor-element-33f55e6 > .e-con-inner > .elementor-widget {
		grid-column: 1 / -1;
	}

	.page-id-495 .elementor-element-33f55e6 > .e-con-inner > .e-con {
		display: contents;
		visibility: visible;
	}
}