/*
Theme Name:   Flex Africa Child
Template:     Archive
Version:      1.0.0
Description:  Child theme of Chromica Pro for flexafrica.com. Holds site-specific template fixes so they survive parent theme updates.
Text Domain:  flexafrica-child
*/

/* Keep the rounded "Introduction" card from touching the slider above and the section below. */
.dt_about--one {
	margin-top: 40px;
	margin-bottom: 40px;
}

/* Keep the blue "Next step" call-to-action card off the footer card below it,
   and off the dark "Why Flex" band when it follows directly. */
.dt_cta {
	padding-bottom: 80px;
}

.dt_why_choose_us + .dt_cta {
	padding-top: 80px;
}

/* Pages on Elementor's full-width template with plain text (no Elementor layout)
   render their paragraphs edge to edge and flush against the banner and footer.
   Put that text in the normal page container with breathing room. */
.page-template-elementor_header_footer .site-content > :is(p, h1, h2, h3, h4, h5, h6, ul, ol, blockquote, figure, table) {
	max-width: 1272px;
	margin: 0 auto 16px;
	padding: 0 16px;
	box-sizing: border-box;
}

.page-template-elementor_header_footer .site-content > :is(p, h1, h2, h3, h4, h5, h6, ul, ol, blockquote, figure, table):first-child {
	margin-top: 80px;
}

.page-template-elementor_header_footer .site-content > :is(p, h1, h2, h3, h4, h5, h6, ul, ol, blockquote, figure, table):last-child {
	margin-bottom: 80px;
}

@media (max-width: 767.98px) {
	.page-template-elementor_header_footer .site-content > :is(p, h1, h2, h3, h4, h5, h6, ul, ol, blockquote, figure, table):first-child {
		margin-top: 48px;
	}

	.page-template-elementor_header_footer .site-content > :is(p, h1, h2, h3, h4, h5, h6, ul, ol, blockquote, figure, table):last-child {
		margin-bottom: 48px;
	}

	.dt_about--one {
		margin-top: 24px;
		margin-bottom: 24px;
	}

	.dt_cta {
		padding-bottom: 48px;
	}

	.dt_why_choose_us + .dt_cta {
		padding-top: 48px;
	}

	/* The theme pulls the first card row 7rem up over the slider. On phones that
	   covers the slide's buttons and dots, so drop the overlap and add a gap. */
	.dt_slider + .dt_information--five {
		padding-top: 48px;
	}

	.dt_slider + .dt_information--five .dt-row {
		margin-top: 0;
	}
}