@import "../../resources/scss/util/variables";
@import "../../resources/scss/util/mixins";
@import "../../resources/scss/vendor/bootstrap/mixins/breakpoints";

.large-callout-bar {
	margin-top: 4rem;
	margin-bottom: 4rem;
	padding: 3.5rem 6.25rem;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	position: relative;
	z-index: 2;

	@include media-breakpoint-down(md) {
		text-align: center;
		justify-content: center;

		.buttons {
			margin-top: 1rem;
			justify-content: center;
		}
	}
	@include media-breakpoint-down(xs) {
		padding: 2rem 3rem;
	}
    &.has-bg {
        &:after {
			content: "";
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background: var(--theme-colour);
			z-index: -1;
			transform: translateX(-100%);
			transition: transform 0.7s cubic-bezier(0.62, 0.38, 0.17, 0.85);
			transition-delay: 0.6s;
        }
        &.aos-animate {
            &:after {
				transition-delay: 0s;
				transform: translateX(0);
            }
        }
    }
	a.button {
		margin-top: 0.75rem;
		margin-bottom: 0.75rem;
	}
	.left {
		width: 50%;

		@include media-breakpoint-down(md) {
			width: 100%;
		}
	}
}