/* Orion About Section — matches the real "About Us" section markup
   (orion-2/assets/src/pages/index.html, .our-story-section) using this
   project's custom breakpoints: sm=640, md=769, lg=992, xl=1199, 1xl=1380, 2xl=1752.
   Video-modal sub-component (.orion-play-btn / .orion-video-modal / etc., matching
   #playBtn/#videoModal in orion-2/assets/src/js/custom.js) is styled here; its
   interaction JS is js/orion-about.js. */

/* Elementor gives every widget wrapper a default max-width:99% (its
   "container widget width" flex behavior), which left a ~1% gap that the
   fullbleed banner's right edge could never actually reach. Override it
   back to 100% so the banner can bleed flush to the true viewport edge. */
.elementor-widget-orion-about {
    width: 100%;
    max-width: 100%;
}

.orion-about-section {
    position: relative;
    z-index: 20;
    padding-bottom: 40px;
}
@media (min-width: 640px) { .orion-about-section { padding-bottom: 56px; } }
@media (min-width: 992px) { .orion-about-section { padding-bottom: 0; } }

/* Full-bleed like the other sections (.orion-fullbleed in orion-hero-swiper.css)
   so the desktop banner's "right:0" reaches the true viewport edge instead of
   stopping short at the scrollbar-adjusted clientWidth. */
.orion-about-story {
    position: relative;
    overflow: hidden;
    width: 100vw;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
}
@media (min-width: 992px) {
    .orion-about-story {
        padding-top: 20px;
        padding-bottom: 56px;
    }
}

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

/* Scoped copy of the real .container schedule — the bare .container class
   is reset to max-width:none by a legacy ".elementor-page .container" rule
   in style.css (targeting the theme's page-level wrapper), so this widget
   uses its own class instead of colliding with that override. */
.orion-about-content-container {
    width: 100%;
    margin: 0 auto;
    padding: 0 16px;
}
@media (min-width: 640px) { .orion-about-content-container { max-width: 640px; } }
@media (min-width: 769px) { .orion-about-content-container { max-width: 769px; } }
@media (min-width: 992px) { .orion-about-content-container { max-width: 992px; } }
@media (min-width: 1199px) { .orion-about-content-container { max-width: 1199px; } }
@media (min-width: 1380px) { .orion-about-content-container { max-width: 1380px; } }
@media (min-width: 1752px) { .orion-about-content-container { max-width: 1752px; } }

/* Heading — HTML global h2 schedule (beats Kit flat h2). */
html body h2.orion-about-heading,
.orion-about-heading {
    width: 100%;
    position: relative;
    z-index: 2;
    margin: 0;
    font-family: var(--orion-font-heading, "El Messiri", serif) !important;
    color: #000;
    font-weight: 500 !important;
    font-size: 26px !important;
    line-height: 36px !important;
    letter-spacing: normal !important;
    text-transform: none !important;
}
@media (min-width: 640px) {
	html body h2.orion-about-heading,
	.orion-about-heading { font-size: 30px !important; line-height: 40px !important; }
}
@media (min-width: 769px) {
	html body h2.orion-about-heading,
	.orion-about-heading { font-size: 35px !important; line-height: 40px !important; }
}
@media (min-width: 992px) {
	html body h2.orion-about-heading,
	.orion-about-heading { max-width: 45%; margin-bottom: -65px; }
}
@media (min-width: 1199px) {
	html body h2.orion-about-heading,
	.orion-about-heading { font-size: 40px !important; line-height: 50px !important; }
}
@media (min-width: 1380px) {
	html body h2.orion-about-heading,
	.orion-about-heading { font-size: 46px !important; line-height: 55px !important; }
}
@media (min-width: 1752px) {
	html body h2.orion-about-heading,
	.orion-about-heading { font-size: 60px !important; line-height: 70px !important; margin-bottom: -100px; }
}

/* White card */
.orion-about-card {
    width: 100%;
    background: #fff;
    position: relative;
    padding: 24px 0 24px 0;
}
@media (min-width: 992px) {
    .orion-about-card {
        max-width: 91%;
        padding: 85px 40px 24px 0;
    }
}
@media (min-width: 1199px) { .orion-about-card { max-width: 89%; } }
@media (min-width: 1752px) {
    .orion-about-card {
        max-width: 76%;
        padding-top: 145px;
        padding-bottom: 48px;
    }
}

/* Video + text row */
.orion-about-row {
    max-width: 100%;
    display: flex;
    flex-direction: column;
    gap: 20px;
}
@media (min-width: 769px) { .orion-about-row { flex-direction: row; align-items: center; } }
@media (min-width: 992px) { .orion-about-row { gap: 40px; } }
@media (min-width: 1199px) { .orion-about-row { max-width: 98%; gap: 43px; } }
@media (min-width: 1380px) { .orion-about-row { gap: 56px; } }
@media (min-width: 1752px) { .orion-about-row { max-width: 92%; gap: 80px; } }

.orion-about-video-col { flex-shrink: 1; }

.orion-about-video-box {
    position: relative;
    width: 100%;
    height: 300px;
}
@media (min-width: 769px) { .orion-about-video-box { width: 270px; height: 370px; } }
@media (min-width: 1199px) { .orion-about-video-box { width: 290px; height: 400px; } }
@media (min-width: 1380px) { .orion-about-video-box { height: 360px; } }
@media (min-width: 1752px) { .orion-about-video-box { width: 340px; height: 100%; } }

/* Compound selector (2 classes) needed to beat Elementor's global
   ".elementor img{height:auto;max-width:100%}" reset (0,1,1 specificity),
   which otherwise forces the image back to its natural aspect ratio
   instead of filling the fixed-height box. */
.orion-about-video-box .orion-about-video-img {
    width: 100%;
    height: 100% !important;
    max-width: 100%;
    object-fit: cover;
}

.orion-about-play-svg {
    margin-left: 6px;
    width: 32px;
    height: 32px;
    fill: var(--orion-primary);
    stroke: var(--orion-primary);
}
@media (min-width: 769px) { .orion-about-play-svg { width: 36px; height: 36px; } }
@media (min-width: 1752px) { .orion-about-play-svg { width: 40px; height: 40px; } }

/* Play button overlay + circle (matches #playBtn's absolute inset-0 button +
   its inner bg-[#FFFFFFB2]/backdrop-blur circle, index.html) */
.orion-play-btn {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 0;
    padding: 0;
    cursor: pointer;
}

.orion-play-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid #fff;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
@media (min-width: 769px) { .orion-play-icon { width: 70px; height: 70px; } }
@media (min-width: 1752px) { .orion-play-icon { width: 80px; height: 80px; } }

/* Video modal (matches #videoModal, index.html) — hidden by default, JS
   toggles .is-open to display:flex. Mounted inline (a sibling of
   .orion-about-story within the same widget <section>), not moved to
   <body>, so multiple widget instances on one page never collide. */
.orion-video-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 99999;
    background: rgba(0, 0, 0, 0.8);
    align-items: center;
    justify-content: center;
    padding-top: 60px;
}
.orion-video-modal.is-open { display: flex; }

.orion-modal-content {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding-left: 16px;
    padding-right: 16px;
}

.orion-modal-close {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    width: 100%;
    background: transparent;
    border: 0;
    cursor: pointer;
}

.orion-video-wrapper { position: relative; }

.orion-video-player {
    width: 750px;
    max-width: 90vw;
    height: 100%;
    z-index: 50;
}
@media (min-width: 1199px) { .orion-video-player { width: 890px; } }
@media (min-width: 1752px) { .orion-video-player { width: 960px; } }

/* Text column */
.orion-about-text {
    padding: 10px 0;
    position: relative;
    z-index: 2;
}
.orion-about-text p {
    margin: 0 0 12px;
    font-size: 14px;
    line-height: 23px;
    color: #000;
}
.orion-about-text p + p { margin-top: 12px; }
@media (min-width: 992px) { .orion-about-text p { font-size: 15px; line-height: 25px; } }
@media (min-width: 1199px) {
    .orion-about-text p { line-height: 26px; margin-bottom: 16px; }
    .orion-about-text p + p { margin-top: 16px; }
}
@media (min-width: 1380px) { .orion-about-text p { line-height: 28px; } }
@media (min-width: 1752px) {
    .orion-about-text p { font-size: 18px; line-height: 32px; margin-bottom: 22px; }
    .orion-about-text p + p { margin-top: 22px; }
}

.orion-about-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 24px;
}
@media (min-width: 640px) { .orion-about-actions { gap: 24px; } }
@media (min-width: 992px) { .orion-about-actions { margin-top: 32px; } }
@media (min-width: 1199px) { .orion-about-actions { gap: 28px; } }
@media (min-width: 1380px) { .orion-about-actions { gap: 36px; } }
@media (min-width: 1752px) { .orion-about-actions { margin-top: 40px; } }

/* The theme's generic .btn (style.css) loads after the compiled utility .btn
   and flattens its padding/weight, so restore the reference schedule locally. */
.orion-about-actions .orion-about__cta,
.orion-about-actions .orion-about-phone {
    display: flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    white-space: nowrap;
    text-align: start;
    font-family: Lexend, sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 24px;
    letter-spacing: normal;
    padding: 5px 16px;
}
@media (min-width: 640px) {
    .orion-about-actions .orion-about__cta,
    .orion-about-actions .orion-about-phone { padding: 8px 20px; }
}
@media (min-width: 1199px) {
    .orion-about-actions .orion-about__cta,
    .orion-about-actions .orion-about-phone { padding: 10px 28px; font-size: 15px; }
}
@media (min-width: 1380px) {
    .orion-about-actions .orion-about__cta,
    .orion-about-actions .orion-about-phone { padding: 10px 34px; }
}
@media (min-width: 1752px) {
    .orion-about-actions .orion-about__cta,
    .orion-about-actions .orion-about-phone { padding: 12px 40px; font-size: 18px; }
}

.orion-about-phone {
    width: auto;
    color: #000;
    gap: 4px;
    transition: color .3s ease-in-out;
}
@media (min-width: 640px) { .orion-about-phone { gap: 12px; } }
.orion-about-phone:hover,
.orion-about-phone:focus,
.orion-about-phone:active { color: var(--orion-primary); }
.orion-about-phone span { font-weight: 300; }

.orion-about-phone-svg {
    stroke: var(--orion-primary);
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}
@media (min-width: 640px) { .orion-about-phone-svg { width: 22px; height: 22px; } }
@media (min-width: 1752px) { .orion-about-phone-svg { width: 24px; height: 24px; } }

/* Decorative side image (inside the white card) */
.orion-about-decor {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 56px;
    width: 40%;
    z-index: 1;
    display: none;
}
@media (min-width: 992px) { .orion-about-decor { display: block; } }
.orion-about-decor .orion-about-decor-img { height: 100% !important; width: auto; max-width: 100%; }

/* Right banner image — mobile variant sits inside the container; desktop
   variant bleeds outside it to reach the true right edge, matching source. */
.orion-about-banner {
    position: relative;
    width: 100%;
    height: 300px;
    display: block;
}
@media (min-width: 640px) { .orion-about-banner { height: 400px; } }
@media (min-width: 992px) { .orion-about-banner--mobile { display: none; } }

.orion-about-banner--desktop {
    display: none;
}
@media (min-width: 640px) { .orion-about-banner--desktop { height: 500px; } }
@media (min-width: 992px) {
    .orion-about-banner--desktop {
        display: block;
        position: absolute;
        top: 0;
        bottom: 0;
        right: 0;
        width: 36%;
        height: auto;
    }
}
@media (min-width: 1380px) { .orion-about-banner--desktop { width: 33%; } }
@media (min-width: 1921px) { .orion-about-banner--desktop { width: 50%; } }

.orion-about-banner .orion-about-banner-img {
    width: 100%;
    height: 100% !important;
    max-width: 100%;
    object-fit: cover;
}

/* ============================================================
   Layout 2 — "Discover Banner" (index-2.html .about-image-with-text-section)
   ============================================================ */
.elementor-widget-orion-about:has(.oab) {
    width: 100%;
    max-width: 100%;
}

.oab {
    position: relative;
    z-index: 20;
    overflow: hidden;
}

.oab-row {
    display: flex;
    flex-wrap: wrap;
}

.oab-content-col {
    width: 100%;
    order: 2;
}
@media (min-width: 992px) { .oab-content-col { width: 50%; order: 1; } }

.oab-content-inner {
    padding: 40px 0 40px;
}
@media (min-width: 640px)  { .oab-content-inner { padding-bottom: 28px; } }
@media (min-width: 992px)  { .oab-content-inner { padding-top: 70px; padding-bottom: 80px; padding-right: 65px; } }
@media (min-width: 1199px) { .oab-content-inner { padding-top: 90px; padding-bottom: 112px; padding-right: 75px; } }
@media (min-width: 1752px) { .oab-content-inner { padding-top: 120px; padding-bottom: 176px; padding-right: 128px; } }

/* HTML about style-2 heading — full h2 schedule */
html body h2.oab-heading,
.oab-heading {
    margin: 0 0 16px;
    color: #000;
    font-family: var(--orion-font-heading, "El Messiri", serif) !important;
    font-weight: 500 !important;
    font-size: 26px !important;
    line-height: 36px !important;
    text-transform: none !important;
}
@media (min-width: 640px) {
	html body h2.oab-heading,
	.oab-heading { font-size: 30px !important; line-height: 40px !important; }
}
@media (min-width: 769px) {
	html body h2.oab-heading,
	.oab-heading { font-size: 35px !important; line-height: 40px !important; }
}
@media (min-width: 992px)  { .oab-heading { width: 85%; } }
@media (min-width: 1199px) {
	html body h2.oab-heading,
	.oab-heading { margin-bottom: 20px; font-size: 40px !important; line-height: 50px !important; }
}
@media (min-width: 1380px) {
	html body h2.oab-heading,
	.oab-heading { font-size: 46px !important; line-height: 55px !important; }
}
@media (min-width: 1752px) {
	html body h2.oab-heading,
	.oab-heading { margin-bottom: 24px; font-size: 60px !important; line-height: 70px !important; }
}

/* HTML about body copy */
html body p.oab-text,
.oab-text {
    margin: 0 0 20px;
    color: #464343;
    font-family: var(--orion-font-body, Lexend, sans-serif) !important;
    font-weight: 300 !important;
    font-size: 14px !important;
    line-height: 23px !important;
}
@media (min-width: 992px) {
	html body p.oab-text,
	.oab-text { font-size: 15px !important; line-height: 25px !important; }
}
@media (min-width: 1199px) {
	html body p.oab-text,
	.oab-text { line-height: 26px !important; }
}
@media (min-width: 1380px) {
	html body p.oab-text,
	.oab-text { line-height: 28px !important; }
}
@media (min-width: 1752px) {
	html body p.oab-text,
	.oab-text { margin-bottom: 24px; font-size: 18px !important; line-height: 32px !important; }
}

.oab-features {
    list-style: none;
    margin: 0 0 32px;
    padding: 0;
}
.oab-features > *:not(:last-child) { margin-bottom: 10px; }
@media (min-width: 1199px) {
    .oab-features { margin-bottom: 36px; }
    .oab-features > *:not(:last-child) { margin-bottom: 12px; }
}

.oab-feature {
    display: flex;
    align-items: center;
    gap: 8px;
}

.oab-feature-icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    fill: var(--orion-primary);
}
@media (min-width: 1199px) { .oab-feature-icon { width: 20px; height: 20px; } }

.oab-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}
@media (min-width: 640px) { .oab-actions { gap: 16px; } }

.oab-phone {
    display: flex;
    align-items: center;
    gap: 4px;
    width: auto;
    /* Match HTML tel link: .btn with transparent bg, inherits .btn padding */
    background: transparent;
    border: none;
    color: #000;
    transition: color .3s ease-in-out;
}
@media (min-width: 640px) { .oab-phone { gap: 12px; } }
.oab-phone:hover,
.oab-phone:focus,
.oab-phone:active { color: var(--orion-primary); }
.oab-phone__text { font-weight: 300; color: inherit; }

.oab-phone-svg {
    stroke: var(--orion-primary);
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}
@media (min-width: 640px)  { .oab-phone-svg { width: 22px; height: 22px; } }
@media (min-width: 1752px) { .oab-phone-svg { width: 24px; height: 24px; } }

.oab-media-col {
    position: relative;
    width: 100%;
    order: 1;
    height: auto;
}
@media (min-width: 640px) { .oab-media-col { height: 350px; } }
@media (min-width: 769px) { .oab-media-col { height: 430px; } }
@media (min-width: 992px) {
    .oab-media-col {
        width: 50%;
        order: 2;
        position: absolute;
        top: 0;
        right: 0;
        height: 100%;
    }
}

.oab-media-img {
    width: 100%;
    height: auto;
    max-width: 100%;
    display: block;
    object-fit: cover;
}
@media (min-width: 640px) {
    .oab-media-img { height: 100% !important; }
}

/* Floating customer-review card — matches HTML absolute white card */
.oab-review {
    position: absolute;
    z-index: 0;
    left: 50%;
    bottom: -1px;
    transform: translateX(-50%);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 18px;
    width: 100%;
    max-width: 260px;
    padding: 10px;
    background: #fff;
    border-radius: 40px 40px 0 0;
    white-space: nowrap;
}
@media (min-width: 640px) {
    .oab-review { max-width: 430px; flex-wrap: nowrap; }
}
@media (min-width: 769px) {
    .oab-review {
        max-width: 570px;
        width: auto;
        padding: 16px 22px;
    }
}
@media (min-width: 992px) {
    .oab-review {
        left: auto;
        right: 0;
        transform: none;
        gap: 0;
        border-top-right-radius: 0;
    }
}
@media (min-width: 1199px) {
    .oab-review { padding-top: 22px; padding-bottom: 22px; }
}
@media (min-width: 1380px) {
    /* HTML 1xl:px-8 */
    .oab-review { padding-left: 32px; padding-right: 32px; }
}
@media (min-width: 1752px) {
    .oab-review {
        padding: 30px 40px;
        border-top-left-radius: 50px;
    }
}

.oab-review__avatars {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}
/* Avatar size/border from shared .customer utility (orion-tailwind) */
.oab-review__avatar {
    /* overlap handled by .customer margin-left */
}
.oab-review__avatar:first-child.customer,
.oab-review__avatars .customer:first-child {
    margin-left: 0;
}
@media (min-width: 640px) { .oab-review__avatars { width: auto; } }
@media (min-width: 769px) { .oab-review__avatars { margin-right: 20px; } }
@media (min-width: 1380px) { .oab-review__avatars { margin-right: 32px; } }

.oab-review__count {
    margin: 0;
    flex-shrink: 0;
    color: var(--orion-primary);
}
@media (min-width: 769px) { .oab-review__count { margin-right: 15px; } }

.oab-review__label {
    font-weight: 300;
    margin: 0;
    color: #000;
}

/* ── Layout 3 — index-4.html "Who We Are — Crafting, Creating Value" ──
   Real breakpoints: sm=640, md=769, lg=992, xl=1199, 1xl=1380, 2xl=1752. */
.oab3 {
	width: 100%;
	position: relative;
	overflow: hidden;
	margin-bottom: 32px;
}
@media (min-width: 769px)  { .oab3 { margin-bottom: 50px; } }
@media (min-width: 992px)  { .oab3 { margin-bottom: 60px; } }
@media (min-width: 1380px) { .oab3 { margin-bottom: 80px; } }
@media (min-width: 1752px) { .oab3 { margin-bottom: 100px; } }

.oab3__container {
	width: 100%;
	margin: 0 auto;
	padding: 0 16px;
}
@media (min-width: 640px)  { .oab3__container { max-width: 640px; } }
@media (min-width: 769px)  { .oab3__container { max-width: 769px; } }
@media (min-width: 992px)  { .oab3__container { max-width: 992px; } }
@media (min-width: 1199px) { .oab3__container { max-width: 1199px; } }
@media (min-width: 1380px) { .oab3__container { max-width: 1380px; } }
@media (min-width: 1752px) { .oab3__container { max-width: 1752px; } }

.oab3__header {
	display: flex;
	align-items: flex-start;
	flex-direction: column;
	gap: 18px;
	margin-bottom: 30px;
}
@media (min-width: 640px)  { .oab3__header { gap: 24px; } }
@media (min-width: 769px)  { .oab3__header { margin-bottom: 40px; } }
@media (min-width: 992px)  { .oab3__header { flex-direction: row; justify-content: space-between; gap: 40px; margin-bottom: 60px; } }

.oab3__col { width: 100%; }
@media (min-width: 992px) { .oab3__col--left, .oab3__col--right { width: 50%; } }
@media (min-width: 992px) { .oab3__col--right { width: 49%; } }

/* HTML bare h2 schedule — beat Global Typography */
html body h2.oab3__heading,
.oab3__heading {
	margin: 0 0 20px;
	color: #000;
	font-family: var(--orion-font-heading, "El Messiri", serif) !important;
	font-weight: 500 !important;
	font-size: 26px !important;
	line-height: 36px !important;
	text-transform: none !important;
}
@media (min-width: 640px) {
	html body h2.oab3__heading,
	.oab3__heading { font-size: 30px !important; line-height: 40px !important; }
}
@media (min-width: 769px)  {
	html body h2.oab3__heading,
	.oab3__heading { margin-bottom: 24px; font-size: 35px !important; line-height: 40px !important; }
}
@media (min-width: 992px)  {
	html body h2.oab3__heading,
	.oab3__heading { margin-bottom: 44px; }
}
@media (min-width: 1199px) {
	html body h2.oab3__heading,
	.oab3__heading { font-size: 40px !important; line-height: 50px !important; }
}
@media (min-width: 1380px) {
	html body h2.oab3__heading,
	.oab3__heading { margin-bottom: 55px; font-size: 46px !important; line-height: 55px !important; }
}
@media (min-width: 1752px) {
	html body h2.oab3__heading,
	.oab3__heading { font-size: 60px !important; line-height: 70px !important; }
}

.oab3__actions {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 12px;
}
@media (min-width: 640px) { .oab3__actions { flex-wrap: nowrap; gap: 16px; } }

/* Beat theme `a { color }` — HTML .btn-green-bg + !font-light (= 300). */
.oab3__phone.btn-green-bg {
	color: #000;
	display: inline-flex;
	font-weight: 300;
}
.oab3__phone {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-weight: 300;
}
@media (min-width: 640px) { .oab3__phone { gap: 12px; } }
.oab3__phone svg {
	width: 18px;
	height: 18px;
	flex-shrink: 0;
	color: var(--orion-primary);
	stroke: var(--orion-primary);
}
@media (min-width: 640px)  { .oab3__phone svg { width: 22px; height: 22px; } }
@media (min-width: 1199px) { .oab3__phone svg { width: 24px; height: 24px; } }

/* HTML text-gray-400 (#464343) + p leading schedule */
.oab3__text {
	color: #464343;
	margin: 0 0 20px;
	font-family: Lexend, sans-serif;
	font-weight: 300;
	font-size: 14px;
	line-height: 23px;
}
@media (min-width: 992px)  { .oab3__text { font-size: 15px; line-height: 25px; } }
@media (min-width: 1199px) { .oab3__text { margin-bottom: 28px; line-height: 26px; } }
@media (min-width: 1380px) { .oab3__text { line-height: 28px; } }
@media (min-width: 1752px) { .oab3__text { font-size: 18px; line-height: 32px; } }

/* HTML `.custom-list` + `space-y-2.5` — padding/icon from Tailwind; spacing here. */
.oab3__list {
	list-style: none;
	margin: 0;
	display: block;
}
.oab3__list > li + li { margin-top: 10px; }
.oab3__list li p {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	color: #000;
	font-family: Lexend, sans-serif;
	font-weight: 300;
	font-size: 14px;
	line-height: 23px;
}
@media (min-width: 992px)  { .oab3__list li p { font-size: 15px; line-height: 25px; } }
@media (min-width: 1199px) { .oab3__list li p { gap: 12px; line-height: 26px; } }
@media (min-width: 1380px) { .oab3__list li p { line-height: 28px; } }
@media (min-width: 1752px) { .oab3__list li p { font-size: 18px; line-height: 32px; } }

.oab3__video {
	position: relative;
	width: 100%;
	height: 300px;
	overflow: hidden;
}
@media (min-width: 640px)  { .oab3__video { height: 350px; } }
@media (min-width: 769px)  { .oab3__video { height: 425px; } }
@media (min-width: 992px)  { .oab3__video { height: 535px; } }
@media (min-width: 1199px) { .oab3__video { height: 600px; } }
@media (min-width: 1752px) { .oab3__video { height: 750px; } }

/* Compound selector beats Elementor `.elementor img { height:auto; max-width:100% }`
   (same pattern as `.orion-about-video-box .orion-about-video-img`). */
.oab3__video .oab3__video-thumb,
.oab3__video .oab3__video-player {
	width: 100%;
	height: 100% !important;
	max-width: none;
	object-fit: cover;
	display: block;
}
.oab3__video-thumb.is-hidden { display: none; }
.oab3__video-player { display: none; }
.oab3__video-player.is-active { display: block; }

/*
 * Elementor ≤767px sets `.e-con.e-flex { flex-wrap: wrap }` via
 * `--flex-wrap-mobile`. With column flex that can collapse container height.
 */
.e-con.e-flex:has(> .elementor-widget-orion-about) {
	--flex-wrap: nowrap;
	flex-wrap: nowrap;
}
.elementor-widget-orion-about > .elementor-widget-container {
	height: auto;
}

.oab3__play-btn {
	position: absolute;
	inset: 0;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	background: none;
	border: none;
	padding: 0;
	cursor: pointer;
}
.oab3__play-btn.is-hidden { display: none; }
.oab3__play-btn::before {
	content: '';
	position: absolute;
	width: 60px;
	height: 60px;
	border-radius: 9999px;
	background-color: rgba(255, 255, 255, 0.7);
	border: 1px solid #fff;
	backdrop-filter: blur(4px);
}
@media (min-width: 640px)  { .oab3__play-btn::before { width: 70px; height: 70px; } }
@media (min-width: 1199px) { .oab3__play-btn::before { width: 80px; height: 80px; } }
.oab3__play-btn svg {
	position: relative;
	width: 28px;
	height: 28px;
	margin-left: 6px;
	fill: var(--orion-primary);
	stroke: var(--orion-primary);
}
@media (min-width: 640px)  { .oab3__play-btn svg { width: 36px; height: 36px; } }
@media (min-width: 1199px) { .oab3__play-btn svg { width: 40px; height: 40px; } }

/* ── About page intro (Elementor text-editor `.orion-about-intro`) ──
   Matches about-us.html “start text” section.
   Elementor `.e-con .elementor-widget.elementor-widget { margin-block-end: 0 }`
   is (0,3,0) — beat it with ≥3 classes + set margin-block-end (not only margin-bottom). */
html body .e-con .elementor-widget.orion-about-intro,
html body .elementor-widget.elementor-widget.orion-about-intro,
html body .orion-about-intro.container {
	width: 100%;
	margin-inline: auto;
	padding-inline: 16px;
	/* HTML section: mb-10 / lg:mb-[50px] / 1xl:mb-17 (68px) / 2xl:mb-[100px] */
	margin-bottom: 40px;
	margin-block-end: 40px;
}
@media (min-width: 640px)  {
	html body .e-con .elementor-widget.orion-about-intro,
	html body .elementor-widget.elementor-widget.orion-about-intro,
	html body .orion-about-intro.container { max-width: 640px; }
}
@media (min-width: 769px)  {
	html body .e-con .elementor-widget.orion-about-intro,
	html body .elementor-widget.elementor-widget.orion-about-intro,
	html body .orion-about-intro.container { max-width: 769px; }
}
@media (min-width: 992px)  {
	html body .e-con .elementor-widget.orion-about-intro,
	html body .elementor-widget.elementor-widget.orion-about-intro,
	html body .orion-about-intro.container {
		max-width: 992px;
		margin-bottom: 50px;
		margin-block-end: 50px;
	}
}
@media (min-width: 1199px) {
	html body .e-con .elementor-widget.orion-about-intro,
	html body .elementor-widget.elementor-widget.orion-about-intro,
	html body .orion-about-intro.container { max-width: 1199px; }
}
@media (min-width: 1380px) {
	html body .e-con .elementor-widget.orion-about-intro,
	html body .elementor-widget.elementor-widget.orion-about-intro,
	html body .orion-about-intro.container {
		max-width: 1380px;
		margin-bottom: 68px;
		margin-block-end: 68px;
	}
}
@media (min-width: 1752px) {
	html body .e-con .elementor-widget.orion-about-intro,
	html body .elementor-widget.elementor-widget.orion-about-intro,
	html body .orion-about-intro.container {
		max-width: 1752px;
		margin-bottom: 100px;
		margin-block-end: 100px;
	}
}

html body .orion-about-intro h4.orion-about-intro__lead,
.orion-about-intro h4.orion-about-intro__lead,
.orion-about-intro h4 {
	margin: 0 0 30px;
	font-family: "El Messiri", var(--orion-font-heading, serif);
	font-weight: 500;
	color: #000;
	letter-spacing: 0.3px;
	text-transform: none;
	font-size: 20px;
	line-height: 28px;
}
@media (min-width: 769px) {
	html body .orion-about-intro h4.orion-about-intro__lead,
	.orion-about-intro h4.orion-about-intro__lead,
	.orion-about-intro h4 {
		margin-bottom: 32px;
		font-size: 22px;
		line-height: 28px;
	}
}
@media (min-width: 1199px) {
	html body .orion-about-intro h4.orion-about-intro__lead,
	.orion-about-intro h4.orion-about-intro__lead,
	.orion-about-intro h4 {
		font-size: 24px;
		line-height: 32px;
	}
}
@media (min-width: 1380px) {
	html body .orion-about-intro h4.orion-about-intro__lead,
	.orion-about-intro h4.orion-about-intro__lead,
	.orion-about-intro h4 {
		line-height: 36px;
	}
}
@media (min-width: 1752px) {
	html body .orion-about-intro h4.orion-about-intro__lead,
	.orion-about-intro h4.orion-about-intro__lead,
	.orion-about-intro h4 {
		margin-bottom: 40px;
		font-size: 30px;
		line-height: 42px;
	}
}

html body .orion-about-intro p.orion-about-intro__body,
.orion-about-intro p.orion-about-intro__body,
.orion-about-intro p {
	font-family: Lexend, var(--orion-font-body, sans-serif);
	font-weight: 300;
	color: #000;
	font-size: 14px;
	line-height: 23px;
}
@media (min-width: 992px) {
	html body .orion-about-intro p.orion-about-intro__body,
	.orion-about-intro p.orion-about-intro__body,
	.orion-about-intro p {
		font-size: 15px;
		line-height: 25px;
	}
}
@media (min-width: 1199px) {
	html body .orion-about-intro p.orion-about-intro__body,
	.orion-about-intro p.orion-about-intro__body,
	.orion-about-intro p { line-height: 26px; }
}
@media (min-width: 1380px) {
	html body .orion-about-intro p.orion-about-intro__body,
	.orion-about-intro p.orion-about-intro__body,
	.orion-about-intro p { line-height: 28px; }
}
@media (min-width: 1752px) {
	html body .orion-about-intro p.orion-about-intro__body,
	.orion-about-intro p.orion-about-intro__body,
	.orion-about-intro p {
		font-size: 18px;
		line-height: 32px;
	}
}