/* 
 * GENERAL
 *  */
 :root {
	--bricks-color-primary: #333 !important;
	--bricks-color-secondary: #f4f4f4 !important;
	--bricks-text-dark: #000 !important;
	--bricks-bg-dark: #000 !important;
	--bricks-text-light: #fff !important;
	--bricks-bg-light: #fff !important;
	
	--clr-button__bg: #000;
	--clr-button__txt: #f4f4f4;
	--clr-button__bg-hover: #faf7e2;/*  */
	--clr-button__txt-hover: #162c39;/*  */
	--clr-button--outline: #000;
}

html {
	font-size: 10px;
}

body {
	font-size: 1.8rem;
	font-weight: 400;
	line-height: 1.3;
}

:where(h1, h2, h3, h4, h5, .h1, .h2, .h3, .h4, .h5) {
	font-weight: 700;
	line-height: 1.1;
}

h1, .h1 {
	font-size: 10rem;
}

h2, .h2 {
	font-size: 5.5rem;
}

h3, .h3 {
	font-size: 3rem;
}

h4, .h4 {
	font-size: 2rem;
}

h5, .h5 {
	font-size: 1.8rem;
}

.brxe-heading.bricks-type-lead {}
.brxe-heading.bricks-type-hero {}

.brxe-section {
	padding-inline: clamp(24px, 5vw, 100px);
}

.brxe-container {
	width: 1200px;
}

.brxe-button {
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 65px;
	min-width: 220px;
	width: max-content;
	font-size: 18px;
    font-weight: 600;
	text-align: center;
	color: var(--clr-button__txt);
	background-color: var(--clr-button__bg);
	border: 1px solid var(--clr-button__bg);
	transition: all .3s ease-in-out;
}

.brxe-button.bricks-background-primary {
	background-color: var(--bricks-color-primary);
	border-color: var(--bricks-color-primary);
}

.brxe-button.bricks-background-secondary {
	background-color: var(--bricks-color-secondary);
	border-color: var(--bricks-color-secondary);
}

.brxe-button.bricks-background-dark {
	background-color: var(--bricks-bg-dark);
	border-color: var(--bricks-bg-dark);
	color: var(--bricks-text-light);
}

.brxe-button.bricks-background-light {
	background-color: var(--bricks-bg-light);
	border-color: var(--bricks-bg-light);
	color: var(--bricks-text-dark);
}

.brxe-button.outline {
	--main-clr: var(--clr-button--outline);
	
	color: var(--main-clr);
	border-color: var(--main-clr);
	background-color: transparent;
}

.brxe-button.outline.bricks-color-primary {
	--main-clr: var(--bricks-color-primary);
}

.brxe-button.outline.bricks-color-secondary {
	--main-clr: var(--bricks-color-secondary);
}

.brxe-button.outline.bricks-color-dark {
	--main-clr: var(--bricks-text-dark);
}

.brxe-button.outline.bricks-color-light {
	--main-clr: var(--bricks-text-light);
}

.brxe-button svg path {
	stroke: currentColor;
}

.brxe-button:hover {
	color: var(--bricks-text-dark);
	background-color: var(--clr-button__bg-hover);
	border-color: var(--clr-button__bg-hover);
}