.page-wrapper {
    position: relative;
}

.bg-decoration {
    position: absolute;
    top: 500px;
    inset-inline-start: 0;
    z-index: 0;
    pointer-events: none;
}

.bg-decoration img {
    max-width: 100%;
}

@media (max-width: 992px) {
    .bg-decoration {
        max-width: 60%;
        bottom: 0;
    }
}


.contract-hero {
    min-height: 590px;
    border-radius: 0 0 100px 100px;
    overflow: hidden;
    isolation: isolate;
    margin-bottom: 96px;
}

.hero-bg-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.contract-hero .container-fluid {
    position: relative;
    z-index: 2;
    min-height: 590px;
    padding-top: 120px;
    padding-bottom: 40px;
    padding-inline: clamp(16px, 5.25vw, 100px);
}

@media (max-width: 992px) {
    .contract-hero .container-fluid {
        padding-top: 25px;
    }
}

/* breadcrumb */
html[dir="rtl"] .breadcrumb {
    --bs-breadcrumb-divider: url("../assets/images/icons/arrow-outlined.svg");
}

.breadcrumb {
    display: flex;
    justify-content: flex-end;
    animation: breadcrumbFade 0.8s ease forwards;
}

@keyframes breadcrumbFade {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.breadcrumb-item+.breadcrumb-item {
    padding-inline: 0;
}

.hero-breadcrumb .breadcrumb-item img {
    transform: translateY(-5px);
}

.hero-breadcrumb .breadcrumb {
    background: transparent;
    padding: 0;
    margin: 0;
}

.hero-breadcrumb .breadcrumb-item,
.hero-breadcrumb .breadcrumb-item a {
    color: var(--green-bg);
    font-weight: 700;
    text-decoration: none;
    font-size: var(--fs-16);
    transition: all 0.3s ease;
}

.hero-breadcrumb .breadcrumb-item a:hover {
    transform: translateY(-2px);
}

.hero-breadcrumb .breadcrumb-item.active {
    font-weight: 400;
}

.hero-breadcrumb .breadcrumb-item+.breadcrumb-item::before {
    float: none;
    padding-inline: 12px;
    color: #fff;
}

.hero-breadcrumb img {
    transition: transform 0.3s ease;
}

.hero-breadcrumb a:hover img {
    transform: translateY(-5px) scale(1.1);
}

/* breadcrumb */

.hero-title {
    color: #fff;
    font-size: var(--fs-64);
    font-weight: 700;
    line-height: 1.5;
}

.hero-desc {
    color: #fff;
    font-size: var(--fs-16);
    line-height: 1.5;
    max-width: 980px;
    margin-bottom: 24px;
}

.hero-actions {
    gap: 20px;
}

.hero-btn {
    height: 61px;
    border-radius: 12px;
    padding: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: var(--fs-24);
    font-weight: 500;
    border: 0;
    transition: all 0.3s ease;
    text-decoration: none;
}

.hero-btn-primary {
    background: rgba(20, 94, 78, 0.66);
    color: #fff;
    box-shadow: 0 10px 24px rgba(15, 107, 92, 0.35);
}

.hero-btn-primary:hover {
    background: linear-gradient(135deg, #0d5d50, #157562);
    color: #fff;
    transform: translateY(-2px);
}

.hero-btn-secondary {
    background: rgba(225, 236, 21, 0.20);
    color: #fff;
    box-shadow: 0 10px 24px rgba(123, 107, 29, 0.35);
}

.hero-btn-secondary:hover {
    background: linear-gradient(135deg, #6d5f1a, #957f2a);
    color: #fff;
    transform: translateY(-2px);
}

.hero-btn-tertiary {
    background: linear-gradient(135deg, rgba(28, 31, 36, 0.94) 0%, rgba(46, 50, 57, 0.9) 58%, rgba(64, 69, 78, 0.9) 100%);
    color: #f7f8fa;
    border: 1px solid rgba(173, 178, 188, 0.42);
    box-shadow: 0 10px 24px rgba(8, 10, 13, 0.32);
}

.hero-btn-tertiary:hover {
    background: linear-gradient(135deg, rgba(22, 24, 29, 0.98) 0%, rgba(52, 56, 64, 0.95) 100%);
    border-color: rgba(202, 207, 216, 0.7);
    color: #ffffff;
    transform: translateY(-2px);
}

.padding-62 {
    padding-top: 62px;
}

/* ══════════════════ CONTRACT DETAILS ══════════════════ */
.contract-details-container {
    padding-inline: clamp(16px, 5.25vw, 100px);
    overflow: hidden;
    padding-bottom: 96px;
}

.contract-details-container .section-title {
    font-size: var(--fs-32);
    font-style: normal;
    font-weight: 700;
    line-height: 1.5;
    color: var(--green-dark);
}

.section-line {
    display: block;
    width: 148px;
    height: 4px;
    background: var(--green);
    margin: 16px auto 0;
    margin-bottom: 48px;
}

.detail-card {
    position: relative;
    background: #fff;
    border-radius: 16px;
    padding: 16px;
    min-height: 258px;
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.25);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    z-index: 2;
}

.detail-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.14);
}

.detail-icon {
    width: 48px;
    height: 48px;
    border-radius: 8px;
    background: var(--foundation-green-light-hover);
    display: flex;
    align-items: center;
    justify-content: center;
}

.detail-icon img {
    object-fit: contain;
    display: block;
}

.detail-title {
    color: var(--green);
    font-size: var(--fs-24);
    font-weight: 700;
    line-height: 1.5;
    margin-bottom: 8px;
}

.detail-subtitle {
    color: #976800;
    font-size: var(--fs-20);
    font-weight: 600;
    line-height: 1.5;
    margin-bottom: 16px;
}

.detail-text {
    color: var(--Foundation-Green-Darker);
    font-size: var(--fs-16);
    font-weight: 400;
    line-height: 1.5;
    margin: 0;
}

/* ══════════════════ RECRUITMENT STEPS ══════════════════ */
.recruitment-steps-section {
    position: relative;
    z-index: 2;
}

.steps-card {
    margin: 0 auto;
    background: #E8EFED;
    border-radius: 100px;
    padding: 76px 241px 127px 241px;
    position: relative;
    overflow: hidden;
}

.recruitment-steps-section .section-title {
    font-size: var(--fs-48);
    font-style: normal;
    font-weight: 700;
    line-height: 1.5;
    color: var(--green-dark);
}

.timeline-wrapper {
    position: relative;
    width: min(958px, 100%);
    margin: 0 auto;
    aspect-ratio: 771 / 1919;
}

.recruitment-steps-section .section-line {
    margin-bottom: 44px;
}

.timeline-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
}

.step-circle {
    width: clamp(42px, 5vw, 80px);
    height: clamp(42px, 5vw, 80px);
    border-radius: 50%;
    background: var(--green);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(18px, 2vw, 32px);
    font-weight: 700;
}

.step-content h3 {
    margin: 0 0 10px;
    color: var(--green);
    font-size: clamp(16px, 2vw, 28px);
    font-weight: 700;
    line-height: 1.4;
}

.step-content p {
    margin: 0;
    font-size: clamp(13px, 1.4vw, 18px);
    line-height: 1.6;
    color: var(--green-dark);
}

/* positions based on your svg */
.step {
    position: absolute;
    z-index: 3;
    transform: translate(-50%, -50%);
}

/* step 1 */
.step-1 {
    top: 10.5%;
    inset-inline-end: 50.42%;
}

html[dir="ltr"] .step-1 {
    inset-inline-end: 43%;
}

.step-1 .step-content {
    position: absolute;
    top: 50%;
    inset-inline-end: calc(100% + 67px);
    transform: translateY(-50%);
    width: clamp(180px, 23vw, 442px);
}

/* step 2 */
.step-2 {
    top: 26.4%;
    inset-inline-start: -4%;
}

html[dir="ltr"] .step-2 {
    inset-inline-start: 2.2%;
}

.step-2 .step-content {
    position: absolute;
    top: 50%;
    inset-inline-start: calc(100% + 67px);
    transform: translateY(-50%);
    width: clamp(180px, 22vw, 280px);
}

/* step 3 */
.step-3 {
    top: 42.5%;
    inset-inline-end: 3%;
}

html[dir="ltr"] .step-3 {
    inset-inline-end: -4.8%;
}

.step-3 .step-content {
    position: absolute;
    top: 50%;
    inset-inline-end: calc(100% + 67px);
    transform: translateY(-50%);
    width: clamp(180px, 20.5vw, 300px);

}

/* step 4 */
.step-4 {
    top: 58.1%;
    inset-inline-start: -4%;
}

html[dir="ltr"] .step-4 {
    inset-inline-start: 2.5%;
}

.step-4 .step-content {
    position: absolute;
    top: 50%;
    inset-inline-start: calc(100% + 67px);
    transform: translateY(-50%);
    width: clamp(180px, 22vw, 280px);
}

/* step 5 */
.step-5 {
    bottom: 22.5%;
    inset-inline-end: 2.2%;
}

html[dir="ltr"] .step-5 {
    inset-inline-end: -4.5%;
}

.step-5 .step-content {
    position: absolute;
    top: 50%;
    inset-inline-end: calc(100% + 67px);
    transform: translateY(-50%);
    width: clamp(180px, 22vw, 280px);
}

/* step 6 */
.step-6 {
    bottom: 7%;
    inset-inline-end: 48.42%;
}

html[dir="ltr"] .step-6 {
    inset-inline-end: 40.5%;
}

.step-6 .step-content {
    position: absolute;
    top: 50%;
    inset-inline-end: calc(100% + 67px);
    transform: translateY(-50%);
    width: clamp(180px, 20vw, 288px);
}

/* ================= RESPONSIVE ================= */

@media (max-width: 991px) {

    /* fix steps card padding */
    .steps-card {
        padding: 40px 20px 60px;
        border-radius: 40px;
    }

    /* hide svg timeline on mobile */
    .timeline-svg {
        display: none;
    }

    /* reset wrapper */
    .timeline-wrapper {
        aspect-ratio: unset;
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: 32px;
    }

    /* reset step position */
    .step {
        position: relative;
        transform: none;
        top: auto;
        left: auto;
        right: auto;
        bottom: auto;
        display: flex;
        align-items: flex-start;
        gap: 16px;
    }

    /* reset step content */
    .step-content {
        position: static !important;
        width: 100% !important;
    }

    /* circle size */
    .step-circle {
        width: 48px;
        height: 48px;
        font-size: 18px;
        flex-shrink: 0;
    }

    /* text size */
    .step-content h3 {
        font-size: 18px;
    }

    .step-content p {
        font-size: 14px;
    }

}

/* ══════════════════ STATICS ══════════════════ */

.statics-container {
    padding-inline: clamp(16px, 5.25vw, 100px);
    overflow: hidden;
    padding-block: 105px;
    z-index: 1;
    position: relative;
}

.statics-container .section-title {
    font-size: var(--fs-48);
    font-style: normal;
    font-weight: 700;
    line-height: 1.5;
    color: var(--green-dark);
}

.statics-section {
    position: relative;
}

.statics-section .bg-decoration-statics {
    position: absolute;
    top: -120px;
    inset-inline-end: 0;
    max-width: 100%;
}

@media (max-width: 992px) {
    .bg-decoration-statics {
        max-width: 60%;
        bottom: 0;
    }
}

.stat-card {
    display: flex;
    padding: 16px 24px;
    flex-direction: column;
    align-items: center;
    flex: 1 0 0;
    border-radius: 24px;
    background: #F6F1E6;
    min-height: 234px;
    transition: all .4s ease;
}

.stat-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

.stat-card:hover .icon {
    transform: translateX(-50%) scale(1.1);
}

.stat-card .icon {
    display: flex;
    width: 64px;
    height: 64px;
    padding: 12px;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-radius: 50%;
    background: #976800;
    transition: all .3s ease;
}


.stat-card .stat-number {
    font-size: clamp(24px, 3vw, 64px);
    font-style: normal;
    font-weight: 700;
    line-height: 1.5;
    color: var(--green-dark);
    letter-spacing: -0.24px;
}

.stat-card .stat-text {
    font-size: var(--fs-24);
    font-weight: 500;
    line-height: normal;
    letter-spacing: -0.24px;
    color: var(--green-dark);
}

html[dir="ltr"] .timeline-svg,
html[dir="ltr"] .bg-decoration,
html[dir="ltr"] .statics-section .bg-decoration-statics {
    transform: scaleX(-1);
}