.ube-banner-title {
	font-size: 34px;
	line-height: 1.3;
}

.ube-banner-description {
	font-size: 18px;
}

.ube-banner-content {
	color: var(--g5-color-heading);
}

.ube-banner {
	.btn-light {
		box-shadow: 0 4px 9px rgba(0, 0, 0, 0.05);
	}


	.btn.btn-link, .btn.btn-link:not(:disabled):not(.disabled):active {
		color: inherit;
	}

	&.ube-banner-has-effect:hover:after,
	&:after {
		background-color: transparent;
	}

	.ube-banner-btn.icon-after > svg,
	.ube-banner-btn.icon-after > i {
		margin-left: 5px;
	}
}

.ube-banner-layout-02 {
	.ube-banner-content {
		color: var(--g5-color-heading);
		padding: 2.5rem 3rem;
	}

	.ube-banner-description {
		font-size: 15px;
		line-height: 1.6;
	}

	.ube-banner-btn {
		margin-top: 30px;
	}
}

.ube-banner-layout-03 {
	.ube-banner-btn {
		margin-top: 10px;
	}

	.ube-banner-content {
		padding: 35px;
		color: #fff;
	}
}

.custom-ube-banner-layout-03 {
	.ube-banner-title, .ube-banner-title a {
		@include d-flex();
		@include flex-column();
	}

	.ube-banner-title {
		font-size: 40px;
		font-weight: 500;
		margin-bottom: 0;
		mark {
			color: inherit;
			font-size: 18px;
			background-color: transparent;
		}
	}


	.ube-banner-btn {
		margin-top: 0;
		font-size: 0;
		width: 48px;
		height: 48px;
		padding: 0;
		border-radius: 50%;
		background-color: currentColor;
		border: none;
		letter-spacing: -3px;
		line-height: 3rem;

		&:after, &:before {
			font-weight: 600;
			font-family: var(--g5-font-icon);
			content: "\f054";
			font-size: 18px;
			color: var(--g5-color-heading);
			display: inline-block;
			@include transition(opacity .3s);
			@include transform(translateX(-5px));


		}

		&:before {
			visibility: hidden;
			opacity: 0;
		}

		&:hover {
			background-color: var(--g5-color-heading);
			border-color: var(--g5-color-heading);

			&:after, &:before {
				color: #fff;
			}
		}


	}


	&:hover {
		.ube-banner-btn {
			&:after, &:before {
				@include transform(translateX(0));
				-webkit-animation-name: bounceAlpha;
				animation-name: bounceAlpha;
				-webkit-animation-duration: 1.4s;
				animation-duration: 1.4s;
				-webkit-animation-iteration-count: infinite;
				animation-iteration-count: infinite;
				-webkit-animation-timing-function: linear;
				animation-timing-function: linear;

			}

			&:before {
				visibility: visible;
				opacity: 1;
				-webkit-animation-delay: 0.2s;
				animation-delay: 0.2s;
			}
		}
	}

	.ube-banner-content {
		padding: 30px;
		@include d-flex();
		@include align-items-end();
		@include justify-content-between();

	}
}

@keyframes bounceAlpha {
	0% {
		opacity: 1;
		@include transform(translateX(0) scale(1));
	}
	25% {
		opacity: 0;
		@include transform(translateX(10px) scale(0.9));
	}
	26% {
		opacity: 0;
		@include transform(translateX(-10px) scale(0.9));
	}
	55% {
		opacity: 1;
		@include transform(translateX(0) scale(1));
	}
}