/*
 Theme Name:   Bricks Child Theme
 Theme URI:    https://bricksbuilder.io/
 Description:  Use this child theme to extend Bricks.
 Author:       Bricks
 Author URI:   https://bricksbuilder.io/
 Template:     bricks
 Version:      1.1
 Text Domain:  bricks
*/

:root {
	--black: #111111;
	--white: #FFFFFF;
	--white-p: #B8B8B8;
	--black-p: #585858;
	--gray-line: #E5E5E5;
	--yellow: #ff5757;

	--p-tiny: 12px;
	--p-small: 14px;
	--p-medium: 16px;
	--p-big: 18px;
	--p-large: 20px;

	--h6: clamp(1.8rem, calc(0.2083333333vw + 1.7333333333rem), 2rem);
	--h5: clamp(2rem, calc(0.4166666667vw + 1.8666666667rem), 2.4rem);
	--h4: clamp(2.4rem, calc(0.4166666667vw + 2.2666666667rem), 2.8rem);
	--h3: clamp(2.8rem, calc(1.4583333333vw + 2.3333333333rem), 4.2rem);
	--h2: clamp(3rem, calc(3rem + ((1vw - 0.36rem) * 5.1205)), 6.4rem);
	--h1: clamp(4rem, calc(4rem + ((1vw - 0.36rem) * 6.6265)), 8.4rem);

	--space-xs: clamp(1.0666666667rem, calc(0.2777777778vw + 0.9777777778rem), 1.3333333333rem);
	--space-s: clamp(1.6rem, calc(0.4166666667vw + 1.4666666667rem), 2rem);
	--space-m: clamp(2.4rem, calc(0.625vw + 2.2rem), 3rem);
	--space-l: clamp(3.1992rem, calc(1.355vw + 2.7656rem), 4.5rem);
	--space-xl: clamp(4.2645336rem, calc(2.5890275vw + 3.4360448rem), 6.75rem);
	--space-xxl: clamp(5.6846232888rem, calc(4.6253924075vw + 4.2044977184rem), 10.125rem);
	--section-space-xs: clamp(3.2rem, calc(2.2222222222vw + 2.4888888889rem), 5.3333333333rem);
	--section-space-s: clamp(4.8rem, calc(3.3333333333vw + 3.7333333333rem), 8rem);
	--section-space-m: clamp(7.2rem, calc(5vw + 5.6rem), 12rem);
	--section-space-l: clamp(9.5976rem, calc(8.7525vw + 6.7968rem), 18rem);
	--section-space-xl: clamp(12.7936008rem, calc(14.7983325vw + 8.0581344rem), 27rem);
	--section-space-xxl: clamp(17.0538698664rem, calc(24.4230522225vw + 9.2384931552rem), 40.5rem);
	--section-padding-x: clamp(2.4rem, calc(0.625vw + 2.2rem), 3rem);
}

:where(section:not(section section)) {
	padding-block: var(--section-space-m);
	padding-inline: var(--section-padding-x);
}

.brx-body {
	width: calc(100% - 16px);
	margin: 0 auto;
}

header.scrolling {
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
	/* Adjust shadow properties as needed */
}

header.scrolling .bricks-background-light {
	background-color: var(--yellow) !important;
	color: var(--white);
}

header.scrolling .bricks-background-light:hover {
	border-color: var(--black) !important;
}

.brxe-button {
	background-size: 110% 350%;
	background-repeat: no-repeat;
	background-position: -140% -140%;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Ccircle cx='100' cy='100' r='100' fill='rgba(255,227,30,1)' style='fill: %23ffffff;'/%3E%3C/svg%3E");
	transition: background-position 250ms 100ms, color 250ms 100ms;

	&:hover {
		background-position: 50% 50%;
		color: var(--black) !important;
		border-color: var(--black) !important;
	}

	&.bricks-background-light,
	&.bricks-background-secondary {
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Ccircle cx='100' cy='100' r='100' fill='rgba(255,227,30,1)' style='fill: %23ffffff;'/%3E%3C/svg%3E");
		transition: background-position 250ms 100ms, color 250ms 100ms, border 100ms 150ms;

		&:hover {
			color: var(--black) !important;
		}
	}
}

.bg-hero {
	position: absolute;
	left: 8px;
	right: 8px;
	top: 8px;
	z-index: -1;
	background-size: cover;
	border-radius: 8px;
	height: var(--height, 100dvh);
	width: calc(100% - 16px);
	border-radius: 8px;
}

.h1style {
	font-size: var(--h1);
	letter-spacing: -5.04px;
}

#brx-content {
	position: unset;
}

.increase-video-at-scroll {
	transition: all .25s;
}

.white {
	color: var(--white);
}

.black {
	color: var(--black);
}

.gform_wrapper .gform_required_legend {
	display: none;
}

.gform_wrapper form .gform_fields {
	display: grid;
	gap: 28px;
}

.gform_wrapper form .gform_fields .gfield .gfield_label {
	margin-bottom: 0;
	font-size: 14px;
	line-height: 1;
	font-style: normal;
	font-weight: 500;
	color: var(--black-p);
}

.gform_wrapper form .gform_fields .gfield .ginput_container input,
.gform_wrapper form .gform_fields .gfield .ginput_container textarea {
	padding: 16px 0;
	color: var(--black);
	border-top: 0;
	border-left: 0;
	border-right: 0;
	border-bottom: 1px solid var(--gray-line);
	box-shadow: none;
	outline: 0;
	block-size: inherit;
	line-height: 1;
	font-size: var(--p-small);
	font-weight: 500;
	transition: all .25s;
	border-radius: 0;
}

.gform_wrapper form .gform_fields .gfield .ginput_container textarea {
	block-size: 80px;
	min-block-size: 80px;
}

.gform_wrapper form .gform_fields .gfield .ginput_container textarea::placeholder,
.gform_wrapper form .gform_fields .gfield .ginput_container input::placeholder {
	font-weight: 500;
	line-height: 1;
	color: var(--black);
}

.gform_wrapper form .gform_fields .gfield .ginput_container input:focus,
.gform_wrapper form .gform_fields .gfield .ginput_container textarea:focus {
	border-bottom: 1px solid var(--black);
}

.gform_wrapper form .gform_footer {
	margin-top: 28px;
}

.gform_wrapper form .gform_footer .gform_button {
	width: 100% !important;
	background-color: var(--yellow) !important;
	box-shadow: none;
	border: 0;
	border-radius: 8px;
	outline: 0;
	text-align: center !important;
	font-weight: 500 !important;
	padding: 20px 40px !important;
	font-size: var(--p-small) !important;
	line-height: 1 !important;
	text-wrap: balance;

	background-size: 110% 350%;
	background-repeat: no-repeat;
	background-position: -140% -140%;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Ccircle cx='100' cy='100' r='100' fill='rgba(0,0,0,0.1)' /%3E%3C/svg%3E%0A");
	transition: background-position 250ms 100ms, color 250ms 100ms;

	&:hover {
		background-position: 50% 50%;
		/* color: var(--white) !important; */
	}
}

.faq .accordion-item {
	padding-bottom: 28px;
	padding-top: 28px;
	border-bottom: 1px solid var(--gray-line);
	border-radius: 0 !important;


	&:first-child {
		.accordion-title-wrapper {
			padding-top: 0 !important;
		}
	}

	&:last-child {
		.accordion-title-wrapper {
			padding-bottom: 0 !important;
		}
	}

	.accordion-content-wrapper {
		padding-bottom: 0;
		margin-top: 28px;
	}
}

.loader-wrapper {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(255, 255, 255, 1);
	display: flex;
	justify-content: center;
	align-items: center;
	opacity: 1;
	z-index: 9999;
	transition: all .25s;
}

.stacking-cards {
	.card {
		/* margin-top: 30px; */
		border: 1px solid;
	}

	.last-card {
		position: relative;
		z-index: 10;
	}
}

.video-section {
	height: 200vh;
	align-items: flex-start;

	@media(max-width: 1024px) {
		height: auto;
	}
}

.carousel-ltr.brxe-block {
	display: block;
}

.how-it-works {
	counter-reset: section;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
	gap: 52px 32px;

	.how-it-works-col {
		padding: 0 32px;
		width: min(384px, 100%);
		position: relative;

		&:before {
			counter-increment: section;
			content: "0" counter(section);
			display: block;
			font-size: var(--p-small);
			font-weight: 900;
			line-height: 100%;
			width: 64px;
			height: 64px;
			display: flex;
			align-items: center;
			justify-content: center;
			background-color: var(--yellow);
			border-radius: 50%;
			margin: 0 auto 24px;
			color: var(--white);
		}
		


		&:after {
			content: '';
			display: block;
			width: 300px;
			height: 2px;
			position: absolute;
			top: 32px;
			left: calc(50% + 64px);
			background: repeating-linear-gradient(90deg,
					/* Direction of the gradient */
					#E6E6E6,
					/* Start color */
					#E6E6E6 35px,
					/* End color of the first grey stripe */
					white 35px,
					/* Start color of the white stripe */
					white 51px
					/* End color of the white stripe (35px grey + 16px white) */
				);
		}

		@media(max-width:1280px) {
			&:after {
				display: none;
			}
		}

		&:nth-child(3),
		&:nth-child(5) {
			&:after {
				display: none;
			}
		}

		&:nth-child(4) {
			&:after {
				content: '';
				display: block;
				width: 2px;
				height: 37px;
				position: absolute;
				top: -56px;
				left: 50%;
			}
		}
		
		@media(max-width: 1024px) {
			&:nth-child(4) {
				&:after {
					display: none;
				}
			}
		}
	}
}

.wpcf7-form {

	>p {
		label {
			color: var(--white);
			margin-bottom: 8px;
		}

		input {
			padding: 8px 24px;
			border-radius: 4px;

			&[type=submit] {
				width: 100%;
				background-color: var(--white);
				text-align: center;
				text-transform: uppercase;
				border: 0;
				font-weight: bold;
				letter-spacing: 1px;
				padding: 16px 24px;
			}
		}

		textarea {
			padding: 8px 24px;
			border-radius: 4px;
			height: 90px;
		}

		br {
			display: none;
		}
	}

	.wpcf7-not-valid-tip {
		color: #dc3232;
		font-size: 1em;
		font-weight: normal;
		display: block;
		background: white;
		padding: 4px 8px;
		border-radius: 7px;
	}

}