/**
 * Orion Hero Widget Styles
 * 
 * @package Orion_Construction
 * @since 1.0.0
 */

/* Orion Hero Widget */
.orion-hero {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.orion-hero__main {
    position: relative;
    width: 100%;
    min-height: 100vh;
    display: flex;
    align-items: center;
}

.orion-hero__background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 1;
	 transform: none;
    transition: opacity 0.8s ease;
}

.orion-hero__overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(26, 42, 29, 0.7);
    z-index: 2;
}

.orion-hero__text-content {
    position: relative;
    z-index: 3;
    color: #ffffff;
   	padding: 60px;
   	margin-left: 100px;
	background-color:rgba(0, 0, 0, 0.35);
	max-width:800px;
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.orion-hero__category {
   font-weight: 500;
    font-size: 20px;
    text-transform: uppercase;
    line-height: 100%;
    letter-spacing: 4px;
    opacity: 0.9;
	margin-bottom:55px;
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.orion-hero__main-heading {
/*     font-size: 3.5rem;
    font-weight: 700;
    line-height: 1.1;
    margin: 0 0 10px 0; */
	margin-bottom : 0;
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.orion-hero__sub-heading {
    font-size: 3.5rem;
    font-weight: 700;
    line-height: 1.1;
    margin: 0;
    transition: opacity 0.8s ease, transform 0.8s ease;
}

/* Service Cards Section */
.orion-hero__service-cards {
/*     position: relative; */
    z-index: 4;
/*     margin-top: -50px; */
	position: absolute;
    bottom: 40px;
    left: 100px;
    padding: 0 20px;
}

.orion-hero__cards-container {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 26px;
    max-width: 1720px;
    margin: 0 auto;
}

/* Slider mode */
.orion-hero__cards-container[data-slider="1"] {
    display: flex;
    gap: 26px;
    overflow: hidden;
}

.orion-hero__cards-container[data-slider="1"] .orion-hero__service-card {
    flex: 0 0 410px;
}

.orion-hero__cards-nav {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 40px;
    z-index: 5;
    pointer-events: none; /* allow clicks only on buttons */
}

.orion-hero__nav-btn {
    width: 42px;
    height: 42px;
    border: 1px solid rgba(0,0,0,0.15);
    background: #fff;
    color: #1a2a1d;
    border-radius: 50%;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 20px rgba(0,0,0,0.15);
    pointer-events: auto; /* re-enable on buttons */
}

.orion-hero__nav-btn[disabled] {
    opacity: .35;
    cursor: default;
}

.orion-hero__service-card {
    background: #ffffff;
/*     border-radius: 8px; */
/*     padding: 24px; */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    display: flex;
/*     flex-direction: column; */
	flex-direction:row;
	gap:30px;
    justify-content: space-between;
	align-items:center;
/*     min-height: 140px; */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
	max-width:410px;
	width:100%;
}

.orion-hero__service-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
}

/* Active card state */
.orion-hero__service-card.active {
    transform: translateY(-8px);
    box-shadow: 0 20px 50px color-mix(in srgb, var(--orion-primary) 30%, transparent);
    border: 2px solid var(--orion-primary);
    background: linear-gradient(135deg, #ffffff 0%, #f8fffe 100%);
}

.orion-hero__service-card.active .orion-hero__card-title {
    color: var(--orion-primary);
    font-weight: 600;
}

.orion-hero__service-card.active .orion-hero__card-desc {
    color: var(--orion-primary);
    font-weight: 400;
}

.orion-hero__card-content {
    flex: 1;
	margin: 28px 0 25px 29px;
}

.orion-hero__card-title{
/*     font-size: 1.25rem; */
/*     font-weight: 600; */
    color: #1a2a1d;
/*     margin: 0 0 8px 0; */
/* 	 margin-bottom: 18px; */
	margin-bottom:10px;
}

.orion-hero__card-desc {
    color: #666666;
    margin: 0;
/*     line-height: 1.4; */
	font-size:16px;
	font-family:Lexend;
	text-transform:capitalize;
	font-weight:300;
	line-height:26px;
	
}

.orion-hero__card-image {
/*     margin-top: 16px; */
	max-width: 125px;
    width: 100%;
    text-align: right;
	margin: 16px 16px 16px 0;
}

.orion-hero__card-image img {
		height:86px;
     width: 100%;
    object-fit: cover;
    display: block;

/*     border-radius: 6px; */
	
}

/* Layout-specific styles */
.orion-hero.layout_1 .orion-hero__text-content {
    text-align: left;
}
.orion-hero.layout_1 .orion-hero__text-content h1, .orion-hero.layout_1 .orion-hero__text-content h2, .orion-hero.layout_1 .orion-hero__text-content h3,.orion-hero.layout_1 .orion-hero__text-content h4{
        color: #ffffff;
}

.orion-hero.layout_2 .orion-hero__text-content {
    text-align: center;
    max-width: 800px;
    margin: 0 auto;
}

.orion-hero.layout_3 .orion-hero__text-content {
    text-align: left;
}

.orion-hero.layout_4 .orion-hero__text-content {
    text-align: left;
}

/* Responsive Design */
@media (max-width: 1200px) {
    .orion-hero__cards-container {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
    }
    
    .orion-hero__service-card {
        min-height: 120px;
    }
}

@media (max-width: 768px) {
    .orion-hero__main {
        min-height: 500px;
    }
    
    .orion-hero__text-content {
        padding: 0 30px;
        text-align: center;
    }
    
    .orion-hero__main-heading,
    .orion-hero__sub-heading {
        font-size: 2.5rem;
    }
    
    .orion-hero__service-cards {
        margin-top: -30px;
        padding: 0 15px;
    }
    
    .orion-hero__cards-container {
        grid-template-columns: 1fr;
        gap: 15px;
    }
    
    .orion-hero__service-card {
        min-height: auto;
        padding: 20px;
    }
}

@media (max-width: 480px) {
    .orion-hero__main-heading,
    .orion-hero__sub-heading {
        font-size: 2rem;
    }
    
    .orion-hero__text-content {
        padding: 0 20px;
    }
    
    .orion-hero__service-cards {
        padding: 0 10px;
    }
}

/* Animation Effects */
.orion-hero__heading,
.orion-hero__sub-heading,
.orion-hero__description,
.orion-hero__button {
    opacity: 0;
    animation: fadeInUp 0.8s ease forwards;
}

.orion-hero__heading {
    animation-delay: 0.2s;
}

.orion-hero__sub-heading {
    animation-delay: 0.4s;
}

.orion-hero__description {
    animation-delay: 0.6s;
}

.orion-hero__button {
    animation-delay: 0.8s;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Hover Effects */
.orion-hero:hover .orion-hero__overlay {
    background-color: rgba(26, 42, 29, 0.7);
    transition: background-color 0.3s ease;
}

/* Focus States for Accessibility */
.orion-hero__button:focus {
    outline: 3px solid var(--orion-primary);
    outline-offset: 2px;
}

/* Print Styles */
@media print {
    .orion-hero {
        min-height: auto;
        page-break-inside: avoid;
    }
    
    .orion-hero__background,
    .orion-hero__overlay {
        display: none;
    }
    
    .orion-hero__content {
        color: #000000;
        text-shadow: none;
    }
    
    .orion-hero__button {
        background-color: #cccccc;
        color: #000000;
        border: 1px solid #000000;
        box-shadow: none;
    }
}

/* ===== Layout 3 (Home Style 3) =====
   Matches the real hero-section markup from index-3.html exactly, using
   this project's real breakpoints: sm=640, md=769, lg=992, xl=1199,
   1xl=1380, 2xl=1752. .orion-fullbleed is the shared full-bleed class from
   orion-hero-swiper.css; .btn/.btn-green-bg are real hand-authored classes
   already compiled in orion-tailwind.css and reused directly. */

.hero3 {
    position: relative;
    overflow: hidden;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: left top;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    min-height: 515px;
    margin-bottom: 32px;
}
@media (min-width: 640px)  { .hero3 { min-height: 610px; } }
@media (min-width: 769px)  { .hero3 { min-height: 650px; margin-bottom: 50px; } }
@media (min-width: 992px)  { .hero3 { min-height: 700px; margin-bottom: 60px; } }
@media (min-width: 1199px) { .hero3 { min-height: 100vh; } }
@media (min-width: 1380px) { .hero3 { margin-bottom: 80px; } }
@media (min-width: 1752px) { .hero3 { margin-bottom: 100px; } }

.hero3__overlay {
    position: absolute;
    inset: 0;
    /* HTML .overlay-background: from-[#00000090] → to transparent */
    background-image: linear-gradient(to top, #00000090 0%, transparent 100%);
}

.hero3__container {
    position: absolute;
    inset: 0;
    width: 100%;
    padding: 0 20px;
}
@media (min-width: 640px) { .hero3__container { padding: 0 48px; } }

.hero3__swiper {
    height: 100%;
}

.hero3__slide-content {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    text-align: center;
    width: 100%;
    max-width: 100%;
    height: 100%;
    margin: 0 auto;
    padding-top: 52px;
    padding-bottom: 52px;
}
@media (min-width: 640px) {
    .hero3__slide-content { padding-top: 80px; padding-bottom: 80px; }
}
@media (min-width: 769px)  { .hero3__slide-content { max-width: 75%; } }
@media (min-width: 992px)  { .hero3__slide-content { padding-top: 160px; } }
@media (min-width: 1199px) { .hero3__slide-content { max-width: 70%; } }
@media (min-width: 1380px) {
    .hero3__slide-content { padding-top: 112px; padding-bottom: 112px; }
}
@media (min-width: 1752px) {
    .hero3__slide-content { padding-top: 136px; padding-bottom: 136px; }
}

/* HTML hero-3 label: Lexend medium uppercase + h6 size scale */
html body h6.hero3__label,
.hero3__label {
    color: #fff;
    text-transform: uppercase !important;
    font-family: var(--orion-font-body, Lexend, sans-serif) !important;
    font-weight: 500 !important;
    letter-spacing: 4px !important;
    margin: 0;
    font-size: 15px !important;
    line-height: 26px !important;
}
@media (min-width: 640px) {
	html body h6.hero3__label,
	.hero3__label { font-size: 16px !important; }
}
@media (min-width: 992px) {
	html body h6.hero3__label,
	.hero3__label { font-size: 17px !important; }
}
@media (min-width: 1199px) {
	html body h6.hero3__label,
	.hero3__label { font-size: 18px !important; line-height: 32px !important; }
}
@media (min-width: 1380px) {
	html body h6.hero3__label,
	.hero3__label { letter-spacing: 2.2px !important; }
}
@media (min-width: 1752px) {
	html body h6.hero3__label,
	.hero3__label { font-size: 22px !important; }
}

/* Beat unlayered theme `a { color: primary }` so .btn-green-bg stays black
   like the HTML Tailwind utility (text-black → hover primary-900). */
.hero3__cta.btn-green-bg {
    color: #000;
}
.hero3__cta.btn-green-bg:hover,
.hero3__cta.btn-green-bg:focus,
.hero3__cta.btn-green-bg:active {
    color: var(--orion-primary, var(--orion-primary));
}

html body h1.hero3__heading,
.hero3__heading {
    color: #fff;
    margin-top: 20px;
    margin-bottom: 24px;
    font-family: var(--orion-font-heading, "El Messiri", serif) !important;
    font-weight: 500 !important;
    font-size: 28px !important;
    line-height: 36px !important;
    text-transform: none !important;
}
@media (min-width: 640px) {
	html body h1.hero3__heading,
	.hero3__heading { font-size: 36px !important; line-height: 44px !important; }
}
@media (min-width: 992px)  {
    html body h1.hero3__heading,
    .hero3__heading {
        margin-top: 32px;
        margin-bottom: 32px;
        font-size: 42px !important;
        line-height: 52px !important;
    }
}
@media (min-width: 1199px) {
	html body h1.hero3__heading,
	.hero3__heading { font-size: 48px !important; line-height: 60px !important; }
}
@media (min-width: 1380px) {
	html body h1.hero3__heading,
	.hero3__heading { font-size: 55px !important; line-height: 66px !important; }
}
@media (min-width: 1752px) {
	html body h1.hero3__heading,
	.hero3__heading { font-size: 70px !important; line-height: 84px !important; }
}

.hero3 .swiper-pagination,
.hero3 .swiper-button-next,
.hero3 .swiper-button-prev {
    z-index: 2;
}

.hero3 .swiper-button-next,
.hero3 .swiper-button-prev {
    width: 30px;
    height: 30px;
    background-color: rgba(255, 255, 255, 0.302); /* #FFFFFF4D */
    /* HTML backdrop-blur-sm */
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border-radius: 9999px;
    display: none;
    align-items: center;
    justify-content: center;
    color: #fff;
}
@media (min-width: 769px)  { .hero3 .swiper-button-next, .hero3 .swiper-button-prev { width: 40px; height: 40px; display: flex; } }
@media (min-width: 1199px) { .hero3 .swiper-button-next, .hero3 .swiper-button-prev { width: 45px; height: 45px; } }
@media (min-width: 1752px) { .hero3 .swiper-button-next, .hero3 .swiper-button-prev { width: 50px; height: 50px; } }

.hero3 .swiper-button-next:after,
.hero3 .swiper-button-prev:after {
    color: #fff;
    font-size: 16px;
}
@media (min-width: 769px) { .hero3 .swiper-button-next:after, .hero3 .swiper-button-prev:after { font-size: 20px; } }

/* HTML .home-3-hero .swiper-pagination: flex center pb-5 */
.hero3 .swiper-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-bottom: 20px;
    width: 100%;
}

.hero3 .swiper-pagination-bullet {
    opacity: 1;
    background-color: #ffffff59;
    width: 12px;
    height: 12px;
    margin: 0 8px;
    display: block;
}
@media (min-width: 1380px) {
    .hero3 .swiper-pagination-bullet { width: 14px; height: 14px; }
}

.hero3 .swiper-pagination-bullet-active {
    background-color: #fff;
    opacity: 1;
}

/* ── Hero Layout 4 — index-4.html (split image/content slider) ────────
   Real breakpoints: sm=640, md=769, lg=992, xl=1199, 1xl=1380, 2xl=1752. */

/*
 * Elementor ≤767px sets `.e-con.e-flex { flex-wrap: wrap }` via
 * `--flex-wrap-mobile`. With column flex that can collapse container height
 * and overlap the following section. Force nowrap for this widget.
 */
.e-con.e-flex:has(> .elementor-widget-orion-hero) {
	--flex-wrap: nowrap;
	flex-wrap: nowrap;
}
.elementor-widget-orion-hero > .elementor-widget-container {
	height: auto;
}

.hero4 {
    position: relative;
    overflow: hidden;
    margin-bottom: 32px;
}
@media (min-width: 769px)  { .hero4 { margin-bottom: 50px; } }
@media (min-width: 992px)  { .hero4 { margin-bottom: 60px; } }
@media (min-width: 1380px) { .hero4 { margin-bottom: 80px; } }
@media (min-width: 1752px) { .hero4 { margin-bottom: 100px; } }
.oh2-hero__container{
    /* Match HTML .container-2: no width:100%. As a flex child it sizes from
       content + max-width (same shrink behavior as the reference). */
    margin: 0 auto;
    padding: 0 16px;
}
@media (min-width: 640px) { .oh2-hero__container { max-width: 640px; } }
@media (min-width: 769px) { .oh2-hero__container { max-width: 768px; } }
@media (min-width: 992px) { .oh2-hero__container { max-width: 992px; } }
@media (min-width: 1199px) { .oh2-hero__container { max-width: 1170px; } }
@media (min-width: 1380px) { .oh2-hero__container { max-width: 1260px; } }
@media (min-width: 1752px) { .oh2-hero__container { max-width: 1472px; } }

/* z-index:3 — in the reference, the teal content panel's own background
   sits on an element with no explicit z-index (auto), so this decorative
   shape's explicit z-index:1 already stacks above it. Our .hero4__content
   carries z-index:2 for its own reasons, which fully painted over this at
   the old z-index:1 (same rect, opaque background) — go one higher instead
   of touching .hero4__content's stacking. */
.hero4__decor {
    display: none;
    position: absolute;
    right: 0;
    bottom: 0;
    width: 40.5%;
    height: 100%;
    z-index: 3;
    pointer-events: none;
    align-items: center;
    justify-content: center;
}
@media (min-width: 640px) { .hero4__decor { display: flex; } }
.hero4__decor img { width: 100%; margin-top: 0; margin-bottom: auto; }

.hero4__row {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
}
@media (min-width: 992px) { .hero4__row { flex-direction: row; } }

/* HTML: lg:h-auto md:h-[450px] sm:h-[400px] h-full */
.hero4__media {
    width: 100%;
    height: auto;
    position: relative;
    z-index: 2;
}
@media (min-width: 640px)  { .hero4__media { height: 400px; } }
@media (min-width: 769px)  { .hero4__media { height: 450px; } }
@media (min-width: 992px)  { .hero4__media { width: 50%; height: auto; } }

.hero4__img-swiper, .hero4__img-swiper .swiper-wrapper { height: 100% !important; }
.hero4__img-swiper .swiper-slide { height: auto; width: 100%; }
.hero4__img { width: 100%; height: 100% !important; object-fit: cover; display: block; max-width: none; }
@media (max-width: 639px) {
	.hero4__img { height: auto; aspect-ratio: 390 / 374; }
}

.hero4__content {
    width: 100%;
    background-color: var(--orion-primary);
    padding-top: 28px;
    position: relative;
    z-index: 2;
}
@media (min-width: 640px)  { .hero4__content { padding-top: 36px; } }
@media (min-width: 992px)  { .hero4__content { width: 50%; padding-top: 135px; } }
@media (min-width: 1199px) { .hero4__content { padding-top: 165px; } }
@media (min-width: 1380px) { .hero4__content { padding-top: 150px; } }
/* HTML 2xl:pt-[210px] */
@media (min-width: 1752px) { .hero4__content { padding-top: 210px; } }

/* Match HTML `.container` + lg/1xl/2xl max-width overrides on the hero copy column.
   Tailwind container: sm→640, md→768; then lg:max-w-[540px] etc. from the markup. */
.hero4__inner {
    width: 100%;
    margin: 0 auto;
    padding: 0 16px;
    position: relative;
    z-index: 2;
}
@media (min-width: 640px)  { .hero4__inner { max-width: 640px; } }
@media (min-width: 769px)  { .hero4__inner { max-width: 768px; } }
@media (min-width: 992px)  { .hero4__inner { max-width: 540px; } }
@media (min-width: 1380px) { .hero4__inner { max-width: 632px; } }
@media (min-width: 1752px) { .hero4__inner { max-width: 720px; } }

/* HTML .sub-title + !font-normal on slide labels */
.hero4__subtitle {
    text-transform: uppercase !important;
    color: #fff;
    font-family: var(--orion-font-body, Lexend, sans-serif) !important;
    font-weight: 400 !important;
    font-size: 14px !important;
    line-height: 100% !important;
    letter-spacing: 4px !important;
    margin: 0 0 20px;
}
@media (min-width: 640px)  { .hero4__subtitle { font-size: 15px !important; } }
@media (min-width: 769px)  { .hero4__subtitle { font-size: 16px !important; } }
@media (min-width: 992px)  { .hero4__subtitle { font-size: 17px !important; } }
@media (min-width: 1199px) { .hero4__subtitle { margin-bottom: 28px; } }
@media (min-width: 1380px) {
	.hero4__subtitle { margin-bottom: 40px; letter-spacing: 0.25em !important; }
}
@media (min-width: 1752px) {
	.hero4__subtitle { margin-bottom: 50px; font-size: 20px !important; letter-spacing: 5px !important; }
}

html body h1.hero4__heading,
.hero4__heading {
    color: #fff;
    margin: 0 0 12px;
    font-family: var(--orion-font-heading, "El Messiri", serif) !important;
    font-weight: 500 !important;
    font-size: 28px !important;
    line-height: 36px !important;
    text-transform: none !important;
}
@media (min-width: 640px)  {
	html body h1.hero4__heading,
	.hero4__heading { font-size: 36px !important; line-height: 44px !important; }
}
@media (min-width: 992px)  {
	html body h1.hero4__heading,
	.hero4__heading { font-size: 42px !important; line-height: 52px !important; }
}
@media (min-width: 1199px) {
	html body h1.hero4__heading,
	.hero4__heading { margin-bottom: 16px; font-size: 48px !important; line-height: 60px !important; }
}
@media (min-width: 1380px) {
	html body h1.hero4__heading,
	.hero4__heading { margin-bottom: 24px; font-size: 55px !important; line-height: 66px !important; }
}
@media (min-width: 1752px) {
	html body h1.hero4__heading,
	.hero4__heading { font-size: 70px !important; line-height: 84px !important; }
}

/* HTML p schedule: text-sm / lg:15 / 2xl:18 + leading 23→25→26→28→32 */
.hero4__text {
    color: #fff;
    margin: 0 0 28px;
    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)  { .hero4__text { font-size: 15px !important; line-height: 25px !important; } }
@media (min-width: 1199px) { .hero4__text { margin-bottom: 36px; line-height: 26px !important; } }
@media (min-width: 1380px) { .hero4__text { margin-bottom: 48px; line-height: 28px !important; } }
@media (min-width: 1752px) { .hero4__text { font-size: 18px !important; line-height: 32px !important; } }

/* Beat theme `a { color: primary }` — HTML .btn-green-bg is text-black */
.hero4__cta.btn-green-bg {
	color: #000;
}
.hero4__cta.btn-green-bg:hover,
.hero4__cta.btn-green-bg:focus,
.hero4__cta.btn-green-bg:active {
	color: var(--orion-primary, var(--orion-primary));
}

/* HTML .home-4-hero .project-custom-arrow width/height schedule */
.hero4__nav {
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    gap: 8px;
    margin-top: 28px;
    margin-left: auto;
    margin-right: auto;
    width: 105px;
    height: 50px;
    position: relative;
    z-index: 2;
    flex-shrink: 0;
    padding-bottom: 0;
}
@media (min-width: 640px)  {
	.hero4__nav { width: 130px; height: 60px; margin-left: auto; margin-right: 0; }
}
@media (min-width: 769px)  { .hero4__nav { margin-top: 32px; width: 150px; height: 70px; } }
@media (min-width: 1199px) { .hero4__nav { margin-top: 50px; width: 162px; height: 75px; } }
@media (min-width: 1380px) { .hero4__nav { margin-top: 55px; width: 175px; height: 80px; } }
@media (min-width: 1752px) { .hero4__nav { width: 212px; height: 100px; } }

.hero4__nav .swiper-button-next,
.hero4__nav .swiper-button-prev {
    position: relative;
    /* Match HTML `.home-4-hero .swiper-button-*` → `relative top-0 mt-0`. */
    top: 0;
    bottom: 0;
    left: auto;
    right: auto;
    margin-top: 0;
    margin-bottom: 0;
    margin-left: 0;
    margin-right: 0;
    width: 50px;
    height: 50px;
    background-color: rgba(0, 0, 0, 0.3);
    border-radius: 0;
}
.hero4__nav .swiper-button-prev { left: 0; right: auto; }
.hero4__nav .swiper-button-next { right: 0; left: auto; }
@media (min-width: 640px)  { .hero4__nav .swiper-button-next, .hero4__nav .swiper-button-prev { width: 60px; height: 60px; } }
@media (min-width: 769px)  { .hero4__nav .swiper-button-next, .hero4__nav .swiper-button-prev { width: 70px; height: 70px; } }
@media (min-width: 1199px) { .hero4__nav .swiper-button-next, .hero4__nav .swiper-button-prev { width: 75px; height: 75px; } }
@media (min-width: 1380px) { .hero4__nav .swiper-button-next, .hero4__nav .swiper-button-prev { width: 80px; height: 80px; } }
@media (min-width: 1752px) { .hero4__nav .swiper-button-next, .hero4__nav .swiper-button-prev { width: 100px; height: 100px; } }
.hero4__nav .swiper-button-next:after,
.hero4__nav .swiper-button-prev:after {
    color: #fff;
    font-size: 28px;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero4__stats {
    width: 100%;
    background-color: #fff;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 16px 16px 0;
    position: relative;
    z-index: 20;
}
@media (min-width: 992px)  { .hero4__stats { justify-content: flex-start; gap: 0; } }
@media (min-width: 1199px) { .hero4__stats { flex-wrap: nowrap; padding: 22px 0 22px 55px; } }
@media (min-width: 1380px) { .hero4__stats { padding-right: 32px; } }
@media (min-width: 1752px) { .hero4__stats { padding: 30px 40px 30px 100px; } }

.hero4__avatars {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}
@media (min-width: 640px) { .hero4__avatars { width: auto; } }
@media (min-width: 769px)  { .hero4__avatars { margin-right: 12px; } }
@media (min-width: 1199px) { .hero4__avatars { margin-right: 20px; } }
@media (min-width: 1380px) { .hero4__avatars { margin-right: 32px; } }

.hero4__avatar {
    border-radius: 9999px;
    width: 38px;
    height: 38px;
    overflow: hidden;
    border: 1px solid #fff;
    background: #fff;
    margin-left: -9px;
    flex-shrink: 0;
}
@media (min-width: 640px) { .hero4__avatar { width: 45px; height: 45px; border-width: 2px; margin-left: -14px; } }
@media (min-width: 1199px) { .hero4__avatar { width: 52px; height: 52px; } }
@media (min-width: 1752px) { .hero4__avatar { width: 64px; height: 64px; } }
.hero4__avatar:first-child { margin-left: 0; }
.hero4__avatar img { width: 100%; height: 100% !important; object-fit: cover; }

/* HTML bare h2 schedule — beat theme h2 (40px/600) */
html body h2.hero4__stat-number,
.hero4__stat-number {
    margin: 0 12px -6px 0;
    flex-shrink: 0;
    font-family: var(--orion-font-heading, "El Messiri", serif) !important;
    font-weight: 500 !important;
    color: #000;
    font-size: 26px !important;
    line-height: 36px !important;
    text-transform: none !important;
}
@media (min-width: 640px)  {
	html body h2.hero4__stat-number,
	.hero4__stat-number { margin-top: 0; margin-bottom: 0; font-size: 30px !important; line-height: 40px !important; }
}
@media (min-width: 769px)  {
	html body h2.hero4__stat-number,
	.hero4__stat-number { font-size: 35px !important; line-height: 40px !important; }
}
@media (min-width: 1199px) {
	html body h2.hero4__stat-number,
	.hero4__stat-number { margin-right: 35px; font-size: 40px !important; line-height: 50px !important; }
}
@media (min-width: 1380px) {
	html body h2.hero4__stat-number,
	.hero4__stat-number { font-size: 46px !important; line-height: 55px !important; }
}
@media (min-width: 1752px) {
	html body h2.hero4__stat-number,
	.hero4__stat-number { font-size: 60px !important; line-height: 70px !important; }
}

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