/* Orion Quotation CTA — matches the real "Contact Now section" from
   index-2.html exactly, using this project's real breakpoints:
   sm=640, md=769, lg=992, xl=1199, 1xl=1380, 2xl=1752.
   .btn/.btn-green-bg/.container-2 are real hand-authored classes already
   compiled in orion-tailwind.css and reused directly. */

.orion-quote {
	width: 100%;
	position: relative;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	padding-top: 0;
	padding-bottom: 32px;
}
@media (min-width: 640px) { .orion-quote { margin-top: -30px; padding-top: 56px; } }
@media (min-width: 769px) { .orion-quote { padding-top: 96px; padding-bottom: 48px; } }
@media (min-width: 992px) { .orion-quote { margin-top: -50px; } }
@media (min-width: 1199px) { .orion-quote { padding-top: 192px; } }
@media (min-width: 1380px) { .orion-quote { margin-top: -60px; } }
@media (min-width: 1752px) { .orion-quote { margin-top: -80px; } }

/* Beat Elementor's deep-container lazyload gate
   (`.e-con.e-parent:nth-of-type(n+4):not(.e-lazyloaded) * { background-image:none !important }`)
   so the banner + white fade paint without waiting for scroll. Specificity must
   match or exceed that rule. */
.e-con.e-parent:nth-of-type(n+4) .orion-quote {
	background-image: var(--orion-quote-bg, none);
}
.e-con.e-parent:nth-of-type(n+4) .orion-quote__overlay {
	background-image: linear-gradient(to bottom, #fff, rgba(255, 255, 255, 0));
}

.orion-quote__overlay {
	position: absolute;
	inset: 0;
	background-image: linear-gradient(to bottom, #fff, rgba(255, 255, 255, 0));
}

.orion-quote__container {
	position: relative;
	z-index: 1;
}

.orion-quote__content-wrap {
	width: 100%;
}
@media (min-width: 769px) { .orion-quote__content-wrap { max-width: 68%; } }
@media (min-width: 1199px) { .orion-quote__content-wrap { max-width: 60%; } }

h2.orion-quote__title { margin: 0 0 10px; text-align: left; font-size: var(--orion-h1-size); }
@media (min-width: 640px) { h2.orion-quote__title { margin-bottom: 16px; } }
@media (min-width: 769px) { h2.orion-quote__title { margin-bottom: 24px; } }

.orion-quote__sub {
	margin: 0 0 24px;
	/* HTML: text-gray-400 */
	color: #464343;
	font-weight: 400;
	text-align: left;
}
@media (min-width: 640px) { .orion-quote__sub { margin-bottom: 35px; } }
@media (min-width: 769px) { .orion-quote__sub { margin-bottom: 50px; } }

/* Bar — HTML: p-5 / sm:p-[22px] / md:py-[30px] md:px-[25px] / lg… / xl… /
   1xl:py-[50px] 1xl:px-[55px] / 2xl:py-[55px] 2xl:px-[60px] */
.orion-quote__bar {
	background-color: var(--orion-primary);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;
	text-align: center;
	gap: 16px;
	padding: 20px;
}
@media (min-width: 640px) { .orion-quote__bar { padding: 22px; } }
@media (min-width: 769px) { .orion-quote__bar { flex-direction: row; text-align: left; padding: 30px 25px; } }
@media (min-width: 992px) { .orion-quote__bar { padding: 40px 45px; } }
@media (min-width: 1199px) { .orion-quote__bar { padding: 45px 50px; } }
@media (min-width: 1380px) { .orion-quote__bar { padding: 50px 55px; } }
@media (min-width: 1752px) { .orion-quote__bar { padding: 55px 60px; } }

/* HTML: text-[22px] sm:text-[26px] md:text-[28px] lg:text-[30px]
   1xl:text-[38px] 2xl:text-[45px] font-light — NOT theme h3 (30px). */
.orion-quote__bar-text {
	margin: 0;
	color: #fff;
	font-weight: 300;
	font-size: 22px;
	line-height: 30px;
}
@media (min-width: 640px) { .orion-quote__bar-text { font-size: 26px; line-height: 32px; } }
@media (min-width: 769px) { .orion-quote__bar-text { font-size: 28px; line-height: 38px; } }
@media (min-width: 992px) { .orion-quote__bar-text { font-size: 30px; line-height: 40px; } }
@media (min-width: 1380px) { .orion-quote__bar-text { font-size: 38px; line-height: 40px; } }
@media (min-width: 1752px) { .orion-quote__bar-text { font-size: 45px; line-height: 60px; } }