/* * Call Out Element Styles
 * Path: /elements/css/call-out.css
 */

/* Main wrapper */
.brxe-call-out {
	width: 100%;
	background-color: #3b174d; /* Default background, can be changed in settings */
	box-sizing: border-box;
}

/* Inner container */
.brxe-call-out .container {
	max-width: 1440px;
	margin-left: auto;
	margin-right: auto;
	padding-top: 50px;
	padding-bottom: 70px;
	/* Add horizontal padding for smaller screens */
	padding-left: 20px;
	padding-right: 20px;
	box-sizing: border-box;
}

/* Content wrapper for text alignment */
.brxe-call-out .call-out-content-wrapper {
	text-align: left;
}

/* Top H2 (e.g., "OUR MAIN USP'S ARE:") */
.brxe-call-out .call-out-heading {
	font-family: 'Figtree', sans-serif;
	font-weight: 500;
	font-style: normal;
	/* font-size: 20px; -> 20 / 16 = 1.25em */
	font-size: 1.25em;
	line-height: 150%;
	/* letter-spacing: 50%; -> Interpreted as 50% of font-size */
	letter-spacing: 0.5em;
	text-transform: uppercase;
	color: #fff;
	margin: 0 0 15px 0; /* Margin below heading */
}



/* WYSIWYG h2, h3, h4 */
.brxe-call-out .call-out-content h2,
.brxe-call-out .call-out-content h3,
.brxe-call-out .call-out-content h4 {
	font-family: 'Figtree', sans-serif;
	font-weight: 500;
	font-style: normal;
	/* font-size: 36px; -> 36 / 16 = 2.25em */
	font-size: 1.8em;
	line-height: 150%;
	letter-spacing: 0;
	color: #fff;
	margin: 20px 0;
}

/* WYSIWYG p */
.brxe-call-out .call-out-content p {
	font-family: 'Figtree', sans-serif;
	font-weight: 400;
	font-style: normal;
	/* font-size: 16px; -> 16 / 16 = 1em */
	font-size: 1em;
	line-height: 150%;
	letter-spacing: 0;
	color: #fff;
	margin: 15px 0;
}

/* WYSIWYG ul, ol */
.brxe-call-out .call-out-content ul,
.brxe-call-out .call-out-content ol {
	font-family: 'Figtree', sans-serif;
	font-weight: 400;
	font-style: normal;
	font-size: 1em;
	line-height: 150%;
	letter-spacing: 0;
	color: #fff;
	margin: 15px 0 15px 30px; /* Standard margin + left padding for indentation */
	padding-left: 0; /* Reset browser default padding */
}

/* WYSIWYG li */
.brxe-call-out .call-out-content li {
	margin-bottom: 10px; /* Margin between list items */
}

/* Ensure last element in WYSIWYG has no bottom margin */
.brxe-call-out .call-out-content > *:last-child {
	margin-bottom: 0;
}



@media (max-width: 767px) {

.brxe-call-out .call-out-content h2, .brxe-call-out .call-out-content h3, .brxe-call-out .call-out-content h4 {

    font-size: 1.5em;

}

}

/* ... existing styles ... */

.brxe-call-out .call-out-content-wrapper.is-centered {
    text-align: center;
}

/* Ensure lists stay centered but aligned properly */
.brxe-call-out .call-out-content-wrapper.is-centered ul,
.brxe-call-out .call-out-content-wrapper.is-centered ol {
    display: inline-block;
    text-align: left; /* Keeps text left-aligned relative to bullets */
    margin-left: 0;
    margin-right: 0;
}