HOME

.mf-elementor-banner-small {
	.banner-content {
		padding: 25px 30px 25px;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		position: relative;
		z-index: 10;

		& > h2 {
			font-size: 24px;
		}
	}

	.banner-title {
		font-weight: 400;
		margin: 0 0 10px;
		line-height: 1;
		white-space: pre-line;
	}

	.banner-desc {
		margin-bottom: 0;
		font-size: 12px;

		p {
			margin-bottom: 0;
		}
	}

	.banner-price {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		border-radius: 50%;
		width: 60px;
		height: 60px;
		overflow: hidden;
		background-color: #f14705;
		color: $light;
		text-align: center;
		line-height: 1;

		.s-price {
			font-size: 18px;
			font-weight: 600;
			position: absolute;
			top: 50%;
			left: 0;
			right: 0;
			transform: translateY(-50%);
			text-align: center;
			line-height: 1;
			display: block;

			span {
				font-size: 12px;
				display: block;
			}
		}
	}

	.banner-featured-image {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-size: cover;
		background-position: left top;
		background-color: #f8f8f8;
		background-repeat: no-repeat;
	}

	.link {
		position: absolute;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		z-index: 20;
	}
}

.mf-elementor-banner-medium {
	.banner-content {
		padding: 25px 30px 25px;
		display: flex;
		flex-direction: column;
		position: relative;
		z-index: 10;

		& > h2 {
			font-size: 24px;
		}
	}

	.banner-title {
		font-weight: 300;
		margin: 0 0 10px;
		line-height: 1.2;
		white-space: pre-line;

		.hl-title {
			font-weight: 600;
		}
	}

	&.highlight-title-above,
	&.highlight-title-under {
		.banner-title {
			.hl-title {
				display: block;
			}
		}
	}

	.banner-desc {
		margin-bottom: 30px;
		font-size: 16px;

		p {
			margin-bottom: 0;
		}
	}

	.banner-featured-image {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-size: cover;
		background-position: left top;
		background-color: #f8f8f8;
		background-repeat: no-repeat;
	}

	.link {
		position: absolute;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		z-index: 20;
	}

	.btn-button {
		transition: all .5s;
		font-size: 16px;
		font-weight: 600;
		text-align: center;
		padding: 10px 17px;
		display: inline-block;
		border-radius: 4px;
		white-space: normal;
		line-height: 1;
		border-style: solid;
		border-width: 0;
		background-color: var(--mf-background-primary-color);
		color: var(--mf-background-primary-text-color);

	}
}

.mf-elementor-banner-large {
	.banner-content {
		padding: 25px 20px 0;
		display: flex;
		align-items: center;
		position: relative;
		z-index: 10;
	}

	.banner-left-content {
		margin-right: 88px;

		& > h2 {
			font-size: 36px;
		}
	}

	.banner-title {
		font-weight: 300;
		line-height: 1;
		margin: 0 0 18px;
		white-space: pre-line;

		.hl-title {
			font-weight: 600;
			color: #f30;
		}
	}

	.banner-desc {
		color: #999;

		p {
			margin-bottom: 0;
		}
	}

	.banner-sale-price {
		color: #999;
		font-size: 16px;
		text-decoration: line-through;
		display: block;
		line-height: 1;
		margin-bottom: 8px;
	}

	.banner-regular-price {
		font-size: 30px;
		display: block;
		color: #690;
		line-height: 1;
		margin-bottom: 20px;
	}

	.banner-featured-image {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-size: cover;
		background-position: left top;
		background-color: #f8f8f8;
		background-repeat: no-repeat;
	}

	.btn-button {
		transition: all .5s;
		font-size: 16px;
		font-weight: 600;
		text-align: center;
		padding: 10px 17px;
		display: inline-block;
		border-radius: 4px;
		white-space: normal;
		line-height: 1;
		border-style: solid;
		border-width: 0;
		background-color: var(--mf-background-primary-color);
		color: var(--mf-background-primary-text-color);

	}

	.link {
		position: absolute;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		z-index: 20;
	}
}

// Banner Large 2
.mf-elementor-banner-large-2 {
	position: relative;
	overflow: hidden;

	.feature-image {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 1;
	}

	.banner-wrapper > div {
		position: absolute;
		z-index: 9;
		top: 50%;
		transform: translateY(-50%);
	}

	.discount-box {
		left: 6.67%;

		.discount {
			font-size: 72px;
			color: #f9c039;
			font-weight: 600;
			line-height: 0.8;
			margin-bottom: 15px;
		}

		.discount-subtitle {
			font-size: 14px;
			color: #c7c3ea;
		}

		.discount-title {
			font-size: 24px;
			color: #fff;
			line-height: 1.2;
		}
	}

	.content-box {
		left: 25.45%;

		.title {
			color: #fff;
			margin: 0 0 12px;
			font-weight: 600;
			font-size: 30px;
		}

		.description {
			color: #c4c4ed;
		}
	}

	.price-box {
		left: 84.85%;

		.regular-price {
			font-size: 16px;
			color: #fff;
			text-decoration: line-through;
		}

		.sale-price {
			font-size: 36px;
			color: #b5e54f;
			font-weight: 700;
			line-height: 1;
			margin-bottom: 18px;
		}

		.banner-button {
			font-size: 14px;
			font-weight: 700;
			background-color: var(--mf-background-primary-color);
			color: var(--mf-background-primary-text-color);
		    display: inline-block;
		    border-radius: 3px;
		    padding: 6px 18px 8px 18px;
		}
	}
}

.mf-elementor-banner-app {
	.banner-wrapper {
		display: flex;
		padding-top: 57px;
		padding-bottom: 57px;
	}

	.banner-content {
		max-width: 44.24%;
		flex: 0 0 44.24%;
		padding-left: 90px;
		display: flex;
		align-items: center;
	}

	.banner-image {
		flex-shrink: 0;
	}

	.banner-main-content {
		flex-grow: 1;
		padding-left: 90px;

		.title {
			font-size: 30px;
			color: #000;
			font-weight: 600;
			margin: 0 0 20px;
		}

		.desc {
			color: #999;
			margin-bottom: 35px;
		}
	}

	.banner-button {
		flex-grow: 1;
		display: flex;
	    justify-content: center;
        align-items: flex-end;
        padding-right: 80px;
	}

	.mc4wp-form {
		.mc4wp-form-fields {
			display: flex;
			border-bottom: 1px solid #ccc;

			input[type="text"],
			input[type="email"] {
				color: #ccc;
				border: 0;
				padding: 10px 0;
				flex-grow: 1;
				background-color: transparent;
			}

			input[type="submit"] {
				color: var(--mf-primary-color);
				text-transform: uppercase;
				border: 0;
			    background: transparent;
			    font-size: 14px;
			    font-weight: 600;
			    padding: 0 10px;
			}
		}
	}
}

.mf-elementor-banner-app .mc4wp-form .mc4wp-form-fields input[type="text"]::placeholder,
.mf-elementor-banner-app .mc4wp-form .mc4wp-form-fields input[type="email"]::placeholder,
.mf-elementor-banner-app .mc4wp-form .mc4wp-form-fields input[type="text"]:-ms-input-placeholder,
.mf-elementor-banner-app .mc4wp-form .mc4wp-form-fields input[type="email"]:-ms-input-placeholder,
.mf-elementor-banner-app .mc4wp-form .mc4wp-form-fields input[type="text"]::-ms-input-placeholder,
.mf-elementor-banner-app .mc4wp-form .mc4wp-form-fields input[type="email"]::-ms-input-placeholder {
	color: #ccc;
}