/* Orion Our Awards — matches the real "Our Awards" block from index-2.html's
   "about Image with text section" exactly, using this project's real
   breakpoints: sm=640, md=769, lg=992, xl=1199, 1xl=1380, 2xl=1752.
   .btn/.btn-primary-reverse/.container-2 are real hand-authored classes
   already compiled in orion-tailwind.css and reused directly. */

.orion-awards {
	width: 100%;
	position: relative;
	overflow: hidden;
	/* HTML: mb-10 md:mb-[50px] lg:mb-[70px] 1xl:mb-20 2xl:mb-[100px] */
	margin-bottom: 40px;
}
@media (min-width: 769px) { .orion-awards { margin-bottom: 50px; } }
@media (min-width: 992px) { .orion-awards { margin-bottom: 70px; } }
@media (min-width: 1380px) { .orion-awards { margin-bottom: 80px; } }
@media (min-width: 1752px) { .orion-awards { margin-bottom: 100px; } }

/* Below md, AOS fade-left/right starts off-canvas and stays at opacity:0
   inside overflow:hidden. AOS attribute selectors need !important here. */
@media (max-width: 768px) {
	.orion-awards [data-aos] {
		opacity: 1 !important;
		transform: none !important;
		pointer-events: auto;
	}
}

/* Opt-in "Standard" container width (the Container Width control) — same
   stepped max-width behavior as every other widget on the About page
   (see orion-why-choose.css's .orion-why__container comment). Used
   instead of .container-2 when this widget sits on a page whose own HTML
   source used plain .container for this section (about-us.html), rather
   than index-2.html's narrower .container-2. */
.orion-awards__container.container {
	width: 100%;
	margin: 0 auto;
	padding: 0 16px;
}
@media (min-width: 640px)  { .orion-awards__container.container { max-width: 640px; } }
@media (min-width: 769px)  { .orion-awards__container.container { max-width: 769px; } }
@media (min-width: 992px)  { .orion-awards__container.container { max-width: 992px; } }
@media (min-width: 1199px) { .orion-awards__container.container { max-width: 1199px; } }
@media (min-width: 1380px) { .orion-awards__container.container { max-width: 1380px; } }
@media (min-width: 1752px) { .orion-awards__container.container { max-width: 1752px; } }

.orion-awards__grid {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
	/* HTML: gap only with `md:flex … gap-9`; mobile uses content `pt-[30px]` alone. */
	gap: 0;
}
/* HTML: gap-9 → lg/xl:gap-[60px] → 2xl:gap-[90px] */
@media (min-width: 769px) { .orion-awards__grid { flex-direction: row; gap: 36px; } }
@media (min-width: 992px) { .orion-awards__grid { gap: 60px; } }
@media (min-width: 1752px) { .orion-awards__grid { gap: 90px; } }

.orion-awards__media-col {
	width: 100%;
}
@media (min-width: 769px) { .orion-awards__media-col { width: 47%; } }
@media (min-width: 1199px) { .orion-awards__media-col { width: 50%; } }
@media (min-width: 1380px) { .orion-awards__media-col { width: 61%; } }

/* Teal band — HTML uses before + after 500% bleeds; after hides from md up.
   Section overflow:hidden clips the bleed to the viewport edges. */
.orion-awards__media {
	position: relative;
	background-color: var(--orion-primary);
	padding: 16px 0;
}
.orion-awards__media::before,
.orion-awards__media::after {
	content: '';
	position: absolute;
	top: 0;
	width: 500%;
	height: 100%;
	background-color: var(--orion-primary);
	z-index: 0;
}
.orion-awards__media::before {
	left: 0;
	margin-left: -499%;
}
.orion-awards__media::after {
	right: 0;
	left: auto;
	margin-right: -499%;
}
@media (min-width: 769px) {
	.orion-awards__media { padding: 20px; padding-left: 0; }
	.orion-awards__media::after { content: none; }
}
@media (min-width: 1199px) { .orion-awards__media { padding: 30px; padding-left: 0; } }

.orion-awards__media-box {
	position: relative;
	z-index: 1;
	overflow: hidden;
}
.orion-awards__media-box::before { content: ''; display: block; padding-top: 66%; }
@media (min-width: 769px)  { .orion-awards__media-box::before { padding-top: 140%; } }
@media (min-width: 992px)  { .orion-awards__media-box::before { padding-top: 100%; } }
@media (min-width: 1199px) { .orion-awards__media-box::before { padding-top: 90%; } }
@media (min-width: 1752px) { .orion-awards__media-box::before { padding-top: 86.6%; } }

/* Compound selector needed to beat Elementor's global
   ".elementor img{height:auto;max-width:100%}" reset (0,1,1 specificity). */
.orion-awards__media-box .orion-awards__media-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100% !important;
	object-fit: cover;
	max-width: none;
}

.orion-awards__content {
	width: 100%;
	padding-top: 30px;
}
@media (min-width: 769px) {
	.orion-awards__content { width: 53%; padding-top: 0; }
}
@media (min-width: 1199px) { .orion-awards__content { width: 50%; } }
@media (min-width: 1380px) { .orion-awards__content { width: 44.5%; } }

/* HTML global h2 schedule. Higher specificity than bare `h2` in style.css;
   Elementor title_typo is not stored on demo data so no !important needed. */
.orion-awards h2.orion-awards__title {
	margin: 0 0 10px;
	font-family: var(--orion-font-heading, "El Messiri", serif);
	font-weight: 500;
	color: #000;
	font-size: 26px;
	line-height: 36px;
}
@media (min-width: 640px)  { .orion-awards h2.orion-awards__title { font-size: 30px; line-height: 40px; } }
@media (min-width: 769px)  { .orion-awards h2.orion-awards__title { font-size: 35px; line-height: 40px; } }
@media (min-width: 1199px) { .orion-awards h2.orion-awards__title { font-size: 40px; line-height: 50px; } }
@media (min-width: 1380px) {
	.orion-awards h2.orion-awards__title {
		margin-bottom: 20px;
		font-size: 46px;
		line-height: 55px;
	}
}
@media (min-width: 1752px) { .orion-awards h2.orion-awards__title { font-size: 60px; line-height: 70px; } }

/* HTML global `p`: Lexend 300 — 14/23 → 15/25@lg → 15/26@xl → 15/28@1xl → 18/32@2xl. */
.orion-awards p.orion-awards__desc {
	margin: 0 0 20px;
	color: #464343;
	font-family: var(--orion-font-body, Lexend, sans-serif);
	font-size: 14px;
	font-weight: 300;
	line-height: 23px;
}
@media (min-width: 992px)  { .orion-awards p.orion-awards__desc { font-size: 15px; line-height: 25px; } }
@media (min-width: 1199px) { .orion-awards p.orion-awards__desc { margin-bottom: 24px; line-height: 26px; } }
@media (min-width: 1380px) { .orion-awards p.orion-awards__desc { margin-bottom: 32px; line-height: 28px; } }
@media (min-width: 1752px) { .orion-awards p.orion-awards__desc { font-size: 18px; line-height: 32px; } }

.orion-awards__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}
@media (min-width: 1199px) { .orion-awards__list { gap: 14px; } }
@media (min-width: 1380px) { .orion-awards__list { gap: 18px; } }

.orion-awards__list li {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0;
	color: #000;
}
@media (min-width: 640px) { .orion-awards__list li { gap: 16px; } }

/* HTML: `p.font-medium` — same size schedule as body, weight 500. */
.orion-awards__list li p {
	margin: 0;
	font-family: var(--orion-font-body, Lexend, sans-serif);
	font-size: 14px;
	font-weight: 500;
	line-height: 23px;
	color: #000;
}
@media (min-width: 992px)  { .orion-awards__list li p { font-size: 15px; line-height: 25px; } }
@media (min-width: 1199px) { .orion-awards__list li p { line-height: 26px; } }
@media (min-width: 1380px) { .orion-awards__list li p { line-height: 28px; } }
@media (min-width: 1752px) { .orion-awards__list li p { font-size: 18px; line-height: 32px; } }

.orion-awards__badge {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 40px;
	height: 40px;
	border-radius: 9999px;
	border: 1px solid rgba(0, 0, 0, 0.15);
}
@media (min-width: 640px) { .orion-awards__badge { width: 43px; height: 43px; } }
@media (min-width: 1199px) { .orion-awards__badge { width: 46px; height: 46px; } }
@media (min-width: 1380px) { .orion-awards__badge { width: 48px; height: 48px; } }

.orion-awards__badge svg {
	width: 18px;
	height: 18px;
	flex-shrink: 0;
	fill: var(--orion-primary);
}
@media (min-width: 640px) { .orion-awards__badge svg { width: 22px; height: 22px; } }
@media (min-width: 1199px) { .orion-awards__badge svg { width: 24px; height: 24px; } }

.orion-awards__cta { margin-top: 20px; }
@media (min-width: 1199px) { .orion-awards__cta { margin-top: 40px; } }