/* ============================================================
   OnlineShop.css
   صفحه معرفی خدمت «فروشگاه آنلاین» — هم‌راستا با تم صفحه اصلی
   پیشوند کلاس‌ها: os- (Online Shop) برای جلوگیری از تداخل با سایر صفحات
============================================================ */

/* ------------------------------------------------------------
   Keyframes
------------------------------------------------------------ */
@keyframes osFadeUp {
    from {
        opacity: 0;
        transform: translateY(26px);
    }

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

@keyframes osFadeLeft {
    from {
        opacity: 0;
        transform: translateX(-40px);
    }

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

@keyframes osFadeRight {
    from {
        opacity: 0;
        transform: translateX(40px);
    }

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

@keyframes osDotPulse {
    0%, 100% {
        transform: scale(1);
        opacity: .55;
    }

    50% {
        transform: scale(1.6);
        opacity: 1;
    }
}

@keyframes osFloat {
    0%, 100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }
}

@keyframes osShimmer {
    0% {
        background-position: -200% center;
    }

    100% {
        background-position: 200% center;
    }
}

/* ------------------------------------------------------------
   Design tokens (shared palette with HomePage.css)
------------------------------------------------------------ */
:root {
    --acc-red: #C81D25;
    --acc-red-2: #9B1219;
    --acc-blue: #1A6CA0;
    --acc-blue-2: #0B3954;
    --acc-teal: #087E8B;
    --acc-teal-2: #065E69;
    --acc-amber: #D4860A;
    --acc-amber-2: #A66808;
    --acc-purple: #7B52AB;
    --acc-purple-2: #5F3F87;
    --acc-green: #1A8C5B;
    --acc-green-2: #126A44;
    /* Pastel tints used for the site-type cards */
    --pastel-red: #F2848C;
    --pastel-red-2: #F7A39E;
    --pastel-blue: #86C4DC;
    --pastel-blue-2: #A9D6E7;
    --pastel-teal: #7FD0BE;
    --pastel-teal-2: #A5E1D3;
    --pastel-amber: #F5C29A;
    --pastel-amber-2: #FAD5B6;
    --pastel-purple: #C9A5E8;
    --pastel-purple-2: #DCC0F0;
    --pastel-green: #8FD9BC;
    --pastel-green-2: #B2E7D0;
    --os-card-bg: #fff;
    --os-card-border: 1px solid rgba(11,57,84,.10);
    --os-card-radius: 28px;
    --os-card-shadow: 0 8px 32px rgba(11,57,84,.08), 0 2px 8px rgba(11,57,84,.05), inset 0 1px 0 rgba(255,255,255,.90);
    --os-card-shadow-hover: 0 24px 48px rgba(11,57,84,.14), 0 6px 16px rgba(11,57,84,.08), inset 0 1px 0 rgba(255,255,255,.95);
    --os-ease: cubic-bezier(.34,1.56,.64,1);
    --os-glass-bg: linear-gradient(135deg, rgba(255,255,255,.70) 0%, rgba(243,250,255,.50) 100%);
    --os-glass-border: 1px solid rgba(11,57,84,.12);
    --os-glass-shadow: 0 4px 16px rgba(11,57,84,.08), 0 1px 2px rgba(11,57,84,.04), inset 0 1px 0 rgba(255,255,255,.90);
}


/* ------------------------------------------------------------
   Base / scroll reveal
------------------------------------------------------------ */
.os-page {
    direction: rtl;
    background:
        linear-gradient(180deg, #EEF4FA 0%, rgba(238, 244, 250, 0) 360px),
        radial-gradient(ellipse 50% 60% at 88% 8%, rgba(26, 108, 160, .08) 0%, transparent 70%),
        radial-gradient(ellipse 45% 50% at 8% 92%, rgba(11, 57, 84, .06) 0%, transparent 70%),
        #fff;
    overflow-x: hidden;
}
    .os-page * {
        box-sizing: border-box;
    }

.os-reveal {
    opacity: 0;
    will-change: opacity, transform;
}

.os-reveal-done {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
}

/* ------------------------------------------------------------
   Shared bits: section heading, placeholder media, buttons
------------------------------------------------------------ */
.os-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 12px;
    font-weight: 700;
    color: var(--acc-red);
    letter-spacing: 2.2px;
    text-transform: uppercase;
    margin-bottom: 16px;
    padding: 6px 18px;
    border-radius: 999px;
    background: rgba(200,29,37,.07);
    border: 1px solid rgba(200,29,37,.16);
    width: fit-content;
}

.os-section-head {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin-bottom: 48px;
}

.os-section-title {
    font-size: 34px;
    font-weight: 800;
    color: var(--acc-blue-2);
    margin: 0 0 0;
    line-height: 1.4;
    letter-spacing: -.2px;
    position: relative;
}

    .os-section-title::after {
        content: '';
        display: block;
        width: 44px;
        height: 3px;
        border-radius: 2px;
        background: var(--acc-red);
        margin: 16px auto 0;
        opacity: .9;
    }

.os-section-sub {
    font-size: 15px;
    color: #5a7a8e;
    max-width: 560px;
    margin: 14px 0 0;
    line-height: 1.9;
}

/* placeholder media block (خالی برای عکس‌های آینده) */
.os-placeholder {
    width: 100%;
    height: 100%;
    min-height: 260px;
    border-radius: 24px;
    background: repeating-linear-gradient(135deg, #eef2f5, #eef2f5 12px, #e6ebef 12px, #e6ebef 24px);
    border: 2px dashed rgba(11,57,84,.22);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: #8fa4b3;
    position: relative;
    overflow: hidden;
}

    .os-placeholder svg {
        width: 40px;
        height: 40px;
        stroke: #9db2c0;
        fill: none;
        stroke-width: 1.5;
        stroke-linecap: round;
        stroke-linejoin: round;
        opacity: .85;
    }

    .os-placeholder span {
        font-size: 12.5px;
        font-weight: 700;
        letter-spacing: .3px;
    }

    /* placeholder variant for use on dark backgrounds (e.g. inside the CTA) */
    .os-placeholder.is-on-dark {
        background: repeating-linear-gradient(135deg, rgba(255,255,255,.08), rgba(255,255,255,.08) 12px, rgba(255,255,255,.03) 12px, rgba(255,255,255,.03) 24px);
        border-color: rgba(255,255,255,.30);
        color: rgba(255,255,255,.55);
    }

        .os-placeholder.is-on-dark svg {
            stroke: rgba(255,255,255,.65);
        }

.os-btn-primary {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 30px;
    border-radius: 12px;
    background: var(--acc-red);
    color: #fff;
    text-decoration: none;
    font-weight: 700;
    font-size: 15px;
    overflow: hidden;
    border: none;
    cursor: pointer;
    transition: transform .25s ease, box-shadow .25s ease;
}

    .os-btn-primary:hover {
        color: #fff;
        transform: translateY(-4px);
        box-shadow: 0 18px 40px rgba(200,29,37,.35);
    }

    .os-btn-primary:active {
        transform: translateY(-1px) scale(.98);
    }

    .os-btn-primary::before {
        content: '';
        position: absolute;
        top: 0;
        left: -120%;
        width: 80px;
        height: 100%;
        background: rgba(255,255,255,.25);
        transform: skewX(-25deg);
        transition: .7s;
    }

    .os-btn-primary:hover::before {
        left: 140%;
    }

.os-btn-outline {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 30px;
    border-radius: 12px;
    border: 1px solid #d8dee3;
    background: #fff;
    color: #0B3954;
    text-decoration: none;
    font-weight: 700;
    font-size: 15px;
    transition: all .25s ease;
}

    .os-btn-outline:hover {
        transform: translateY(-4px);
        border-color: var(--acc-red);
        color: var(--acc-red);
        box-shadow: 0 12px 30px rgba(0,0,0,.08);
    }

    .os-btn-outline svg {
        width: 15px;
        height: 15px;
        stroke: currentColor;
        fill: none;
        stroke-width: 2.2;
        stroke-linecap: round;
        stroke-linejoin: round;
        transition: transform .3s ease;
    }

    .os-btn-outline:hover svg {
        transform: translateX(-4px);
    }

/* ============================================================
   1) HERO
============================================================ */
.os-hero {
    width: 100%;
    padding: 96px 0 88px;
    background: transparent;
    position: relative;
}

.os-hero-inner {
    max-width: 1360px;
    margin: 0 auto;
    padding: 0 72px;
    box-sizing: border-box;
    display: grid;
    grid-template-columns: 54% 46%;
    align-items: center;
    gap: 56px;
}

.os-hero-media {
    animation: osFadeLeft .8s ease both;
}

    .os-hero-media .os-placeholder {
        aspect-ratio: 1 / 0.92;
        min-height: 380px;
    }

.os-hero-content {
    animation: osFadeRight .8s .1s ease both;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.os-hero-title {
    font-size: 46px;
    font-weight: 800;
    color: #1f2937;
    line-height: 1.42;
    margin: 0 0 22px;
    letter-spacing: -.3px;
}

    .os-hero-title .os-accent {
        color: var(--acc-red);
    }

.os-hero-desc {
    font-size: 17px;
    line-height: 2;
    color: #6b7280;
    max-width: 560px;
    margin: 0 0 36px;
}

.os-hero-actions {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
}

    .os-hero-actions svg {
        width: 16px;
        height: 16px;
        stroke: currentColor;
        fill: none;
        stroke-width: 2;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

/* ============================================================
   2) SITE-TYPE CARDS  ( نسخه کارتی پاستلی و یکدست )
   ============================================================ */
.os-types {
    width: 100%;
    padding: 68px 0;
    background: transparent;
    position: relative;
}

.os-types-inner {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 40px;
    box-sizing: border-box;
}

.os-types-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}

/* --- کارت --- */
.os-tcard {
    --c1: var(--pastel-blue);
    --c2: var(--pastel-blue-2);
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    padding: 22px 20px 18px;
    border-radius: 18px;
    background: #fff;
    border: 1px solid rgba(11,57,84,.09);
    box-shadow: 0 4px 14px rgba(11,57,84,.05);
    text-decoration: none;
    overflow: hidden;
    transition: transform .35s var(--os-ease), box-shadow .35s ease, border-color .3s ease;
}

    /* نوار رنگی بالای کارت */
    .os-tcard::before {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        left: 0;
        height: 3px;
        background: linear-gradient(90deg, var(--c1), var(--c2));
        transform: scaleX(.28);
        transform-origin: right;
        transition: transform .45s var(--os-ease);
    }


    .os-tcard:hover {
        transform: translateY(-6px);
        border-color: color-mix(in srgb, var(--c1) 70%, transparent);
        box-shadow: 0 18px 34px rgba(11,57,84,.10);
    }

        .os-tcard:hover::before {
            transform: scaleX(1);
        }


/* --- آیکون --- */
.os-tcard-icon {
    width: 46px;
    height: 46px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 14px;
    background: linear-gradient(140deg, var(--c1), var(--c2));
    border: 1px solid color-mix(in srgb, var(--c1) 60%, transparent);
    transition: transform .4s var(--os-ease), background .35s ease, border-color .35s ease;
}

    .os-tcard-icon svg {
        width: 21px;
        height: 21px;
        stroke: var(--acc-blue-2);
        fill: none;
        stroke-width: 1.9;
        stroke-linecap: round;
        stroke-linejoin: round;
        transition: stroke .3s ease, transform .3s ease;
    }

    /* اگر جای svg عکس گذاشتی */
    .os-tcard-icon img {
        width: 24px;
        height: 24px;
        object-fit: contain;
        display: block;
    }

.os-tcard:hover .os-tcard-icon {
    transform: translateY(-3px) scale(1.06);
    background: linear-gradient(140deg, var(--c1), var(--c2));
    border-color: color-mix(in srgb, var(--c1) 80%, transparent);
}

    .os-tcard:hover .os-tcard-icon svg {
        stroke: var(--acc-blue-2);
    }

/* --- متن --- */
.os-tcard-name {
    font-size: 16px;
    font-weight: 800;
    color: var(--acc-blue-2);
    margin: 0;
}

.os-tcard-desc {
    font-size: 12.5px;
    color: #78889a;
    line-height: 1.8;
    margin: 5px 0 12px;
}

.os-tcard-more {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: auto;
    font-size: 12px;
    font-weight: 700;
    color: var(--acc-blue-2);
    opacity: .55;
    transform: translateX(4px);
    transition: opacity .3s ease, transform .3s var(--os-ease), color .3s ease;
}

    .os-tcard-more svg {
        width: 13px;
        height: 13px;
        stroke: currentColor;
        fill: none;
        stroke-width: 2.2;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

.os-tcard:hover .os-tcard-more {
    color: var(--c1);
    opacity: 1;
    transform: translateX(0);
}

/* --- رنگ هر کارت (پاستلی) --- */
.os-tcard.is-red {
    --c1: var(--pastel-red);
    --c2: var(--pastel-red-2);
}

.os-tcard.is-blue {
    --c1: var(--pastel-blue);
    --c2: var(--pastel-blue-2);
}

.os-tcard.is-teal {
    --c1: var(--pastel-teal);
    --c2: var(--pastel-teal-2);
}

.os-tcard.is-amber {
    --c1: var(--pastel-amber);
    --c2: var(--pastel-amber-2);
}

.os-tcard.is-purple {
    --c1: var(--pastel-purple);
    --c2: var(--pastel-purple-2);
}

.os-tcard.is-green {
    --c1: var(--pastel-green);
    --c2: var(--pastel-green-2);
}

/* --- کارت ویژه: فروشگاه آنلاین --- */
.os-tcard.is-featured {
    --c1: var(--pastel-red);
    --c2: var(--pastel-red-2);
    background: #fff;
    border-color: rgba(11,57,84,.09);
    box-shadow: 0 4px 14px rgba(11,57,84,.05);
}

    .os-tcard.is-featured::before {
        transform: scaleX(1);
    }

    .os-tcard.is-featured .os-tcard-badge {
        position: absolute;
        top: 16px;
        left: 16px;
        font-size: 10px;
        font-weight: 700;
        color: var(--acc-blue-2);
        background: linear-gradient(135deg, var(--pastel-red), var(--pastel-red-2));
        padding: 4px 10px;
        border-radius: 999px;
    }

    .os-tcard.is-featured .os-tcard-icon {
        background: linear-gradient(140deg, var(--pastel-red), var(--pastel-red-2));
        border-color: color-mix(in srgb, var(--pastel-red) 60%, transparent);
    }

        .os-tcard.is-featured .os-tcard-icon svg {
            stroke: var(--acc-blue-2);
        }

    .os-tcard.is-featured:hover .os-tcard-icon {
        background: linear-gradient(140deg, var(--pastel-red), var(--pastel-red-2));
        border-color: color-mix(in srgb, var(--pastel-red) 80%, transparent);
    }

    .os-tcard.is-featured .os-tcard-name {
        color: var(--acc-blue-2);
    }

    .os-tcard.is-featured .os-tcard-desc {
        color: #78889a;
    }

    .os-tcard.is-featured .os-tcard-more {
        color: var(--acc-blue-2);
        opacity: .55;
        transform: translateX(4px);
    }

    .os-tcard.is-featured:hover .os-tcard-more {
        color: var(--pastel-red);
        opacity: 1;
        transform: translateX(0);
    }

/* ============================================================
   3) STORE SHOWCASE  ( فروشگاه آنلاین؛ بیشتر از یک ویترین )
============================================================ */
.os-showcase {
    width: 100%;
    padding: 96px 0;
    background: transparent;
}

.os-showcase-inner {
    max-width: 1360px;
    margin: 0 auto;
    padding: 0 72px;
    box-sizing: border-box;
    display: grid;
    grid-template-columns: 42% 58%;
    align-items: center;
    gap: 64px;
}

.os-showcase-media {
    animation: osFadeLeft .8s ease both;
    position: relative;
}

    .os-showcase-media .os-placeholder {
        aspect-ratio: 1 / 0.95;
        min-height: 340px;
    }

    .os-showcase-media::after {
        content: '';
        position: absolute;
        top: 50%;
        left: -32px;
        transform: translateY(-50%);
        width: 1px;
        height: 78%;
        background: linear-gradient(180deg, transparent, rgba(200,29,37,.35), transparent);
    }

.os-showcase-content {
    animation: osFadeRight .8s .1s ease both;
}

.os-showcase-title {
    font-size: 28px;
    font-weight: 800;
    color: var(--acc-blue-2);
    margin: 0 0 10px;
    line-height: 1.45;
}

.os-showcase-sub {
    font-size: 15px;
    font-weight: 600;
    color: var(--acc-red);
    margin: 0 0 32px;
    line-height: 1.8;
}

.os-feature-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 26px 34px;
}

.os-feature-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(11,57,84,.12);
    text-align: right;
    font-size: 14px;
    font-weight: 700;
    color: var(--acc-blue-2);
    transition: color .25s ease, border-color .25s ease;
}

    .os-feature-item svg {
        width: 16px;
        height: 16px;
        flex-shrink: 0;
        stroke: var(--acc-teal);
        fill: none;
        stroke-width: 2.4;
        stroke-linecap: round;
        stroke-linejoin: round;
        transition: stroke .25s ease;
    }

    .os-feature-item:hover {
        color: var(--acc-red);
        border-color: rgba(200,29,37,.35);
    }

        .os-feature-item:hover svg {
            stroke: var(--acc-red);
        }

/* ============================================================
   4) PROCESS  ( فرآیند طراحی سایت )
============================================================ */
.os-process {
    width: 100%;
    padding: 96px 0;
    background: transparent;
    position: relative;
}

.os-process-inner {
    max-width: 1360px;
    margin: 0 auto;
    padding: 0 72px;
    box-sizing: border-box;
    position: relative;
    z-index: 1;
}

.os-process-track {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 4px;
    margin-top: 60px;
}

.os-process-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 20px;
    flex: 1;
    max-width: 170px;
    cursor: default;
}

.os-process-num {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--acc-blue-2);
    box-shadow: 0 10px 24px rgba(11,57,84,.22);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 19px;
    font-weight: 800;
    color: #fff;
    flex-shrink: 0;
    position: relative;
    z-index: 2;
    transition: transform .4s var(--os-ease), background .35s ease, box-shadow .35s ease;
}

    .os-process-num::after {
        content: '';
        position: absolute;
        inset: -6px;
        border-radius: 50%;
        border: 1.5px solid rgba(11,57,84,.18);
        opacity: 0;
        transform: scale(.82);
        transition: opacity .35s ease, transform .35s var(--os-ease);
    }

.os-process-step:hover .os-process-num {
    transform: translateY(-6px) scale(1.08);
    background: var(--acc-red);
    box-shadow: 0 16px 32px rgba(200,29,37,.28);
}

    .os-process-step:hover .os-process-num::after {
        opacity: 1;
        transform: scale(1);
        border-color: rgba(200,29,37,.30);
    }

.os-process-connector {
    flex: 0 0 auto;
    width: 100%;
    max-width: 64px;
    height: 1px;
    margin-top: 32px;
    background-image: linear-gradient(to left, rgba(11,57,84,.28) 40%, transparent 0%);
    background-position: top;
    background-size: 10px 1px;
    background-repeat: repeat-x;
    flex-shrink: 1;
}

.os-process-name {
    font-size: 15px;
    font-weight: 800;
    color: var(--acc-blue-2);
    margin: 0;
    transition: color .3s ease;
}

.os-process-desc {
    font-size: 12.5px;
    color: #8a9bab;
    line-height: 1.85;
    margin: 0;
}

.os-process-step:hover .os-process-name {
    color: var(--acc-red);
}

/* ============================================================
   5) PORTFOLIO  ( نمونه کارها )
============================================================ */
.os-portfolio {
    width: 100%;
    padding: 92px 0;
    background: transparent;
    position: relative;
}

.os-portfolio-inner {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 40px;
    box-sizing: border-box;
}

.os-portfolio-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 26px;
}

.os-portfolio-card {
    --c1: var(--pastel-blue);
    --c2: var(--pastel-blue-2);
    background: var(--os-card-bg);
    border: var(--os-card-border);
    border-radius: 22px;
    box-shadow: var(--os-card-shadow);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform .4s var(--os-ease), box-shadow .4s ease;
}

    .os-portfolio-card:hover {
        transform: translateY(-8px);
        box-shadow: var(--os-card-shadow-hover);
    }

.os-portfolio-media {
    position: relative;
}

    .os-portfolio-media .os-placeholder {
        min-height: 190px;
        border-radius: 0;
        border: none;
        border-bottom: 1px solid rgba(11,57,84,.08);
    }

        .os-portfolio-media .os-placeholder svg {
            width: 34px;
            height: 34px;
        }

.os-portfolio-tag {
    position: absolute;
    top: 14px;
    right: 14px;
    font-size: 10.5px;
    font-weight: 700;
    color: var(--acc-blue-2);
    background: linear-gradient(135deg, var(--c1), var(--c2));
    padding: 5px 12px;
    border-radius: 999px;
    box-shadow: 0 4px 10px rgba(11,57,84,.14);
}

.os-portfolio-body {
    padding: 20px 22px 24px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.os-portfolio-title {
    font-size: 17px;
    font-weight: 800;
    color: var(--acc-blue-2);
    margin: 0 0 8px;
}

.os-portfolio-desc {
    font-size: 13px;
    color: #78889a;
    line-height: 1.9;
    margin: 0 0 16px;
}

.os-portfolio-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: auto;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--acc-blue-2);
    opacity: .6;
    text-decoration: none;
    transform: translateX(4px);
    transition: opacity .3s ease, transform .3s var(--os-ease), color .3s ease;
}

    .os-portfolio-link svg {
        width: 13px;
        height: 13px;
        stroke: currentColor;
        fill: none;
        stroke-width: 2.2;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

.os-portfolio-card:hover .os-portfolio-link {
    color: var(--c1);
    opacity: 1;
    transform: translateX(0);
}

.os-portfolio-card.is-blue {
    --c1: var(--pastel-blue);
    --c2: var(--pastel-blue-2);
}

.os-portfolio-card.is-red {
    --c1: var(--pastel-red);
    --c2: var(--pastel-red-2);
}

.os-portfolio-card.is-teal {
    --c1: var(--pastel-teal);
    --c2: var(--pastel-teal-2);
}

/* ============================================================
   6) CLOSING CTA
============================================================ */
.os-cta {
    width: 100%;
    padding: 76px 0;
    background: transparent;
}

.os-cta-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 48px 64px;
    box-sizing: border-box;
    border-radius: 32px;
    background-image: url('/Content/Image/Banner/banner.webp');
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    aspect-ratio: 3 / 1;
    min-height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.os-cta-center {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 20px;
    max-width: 640px;
}

.os-cta-text {
    max-width: 560px;
}

.os-cta-title {
    font-size: 26px;
    font-weight: 800;
    color: #fff;
    margin: 0 0 10px;
    line-height: 1.5;
}

.os-cta-sub {
    font-size: 14.5px;
    color: rgba(255,255,255,.82);
    line-height: 1.9;
    margin: 0;
}

.os-cta-actions {
    display: flex;
    justify-content: center;
    gap: 14px;
    flex-wrap: wrap;
}

.os-cta .os-btn-primary {
    background: #fff;
    color: var(--acc-red);
}

    .os-cta .os-btn-primary:hover {
        color: var(--acc-red);
        box-shadow: 0 18px 40px rgba(200,29,37,.45);
    }

    .os-cta .os-btn-primary::before {
        background: rgba(200,29,37,.30);
    }

.os-cta .os-btn-outline {
    background: transparent;
    border-color: rgba(255,255,255,.35);
    color: #fff;
}

    .os-cta .os-btn-outline:hover {
        border-color: #fff;
        color: #fff;
        box-shadow: none;
    }

/* ============================================================
   RESPONSIVE
============================================================ */
@media (max-width: 1180px) {
    .os-process-track {
        flex-wrap: wrap;
        row-gap: 40px;
    }

    .os-process-connector {
        display: none;
    }

    .os-process-step {
        max-width: 30%;
        flex: 0 0 30%;
    }

    .os-portfolio-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 991px) {
    .os-hero-inner,
    .os-showcase-inner {
        grid-template-columns: 1fr;
        padding: 0 40px;
    }

    .os-hero {
        padding: 64px 0;
    }

    .os-hero-content {
        align-items: center;
        text-align: center;
    }

    .os-hero-title {
        font-size: 34px;
    }

    .os-hero-desc {
        max-width: 100%;
    }

    .os-hero-actions {
        justify-content: center;
    }

    .os-hero-media {
        order: -1;
    }

        .os-hero-media .os-placeholder {
            min-height: 280px;
        }

    .os-types-inner,
    .os-showcase-inner,
    .os-process-inner,
    .os-portfolio-inner {
        padding: 0 40px;
    }

    .os-types-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .os-showcase-content {
        text-align: center;
    }

    .os-showcase-title, .os-showcase-sub {
        text-align: center;
    }

    .os-showcase-media::after {
        display: none;
    }

    .os-feature-item {
        font-size: 13px;
    }

    .os-process-step {
        max-width: 45%;
        flex: 0 0 45%;
    }

    .os-cta-inner {
        aspect-ratio: auto;
        min-height: 340px;
        padding: 40px 28px;
    }

    .os-cta-text {
        max-width: 100%;
    }

    .os-cta-actions {
        justify-content: center;
    }
}

@media (max-width: 640px) {
    .os-hero-inner,
    .os-types-inner,
    .os-showcase-inner,
    .os-process-inner,
    .os-portfolio-inner {
        padding: 0 20px;
    }

    .os-hero-title {
        font-size: 27px;
    }

    .os-cta-inner {
        aspect-ratio: 864 / 1821;
        min-height: auto;
        width: 84%;
        margin: 0 auto;
        padding: 32px 22px;
        border-radius: 22px;
        background-color: var(--acc-red);
        background-image: url('/Content/Image/Banner/bannermobile.webp');
        background-position: center center;
        background-size: cover;
        background-repeat: no-repeat;
    }

    .os-cta-title {
        font-size: 20px;
    }

    .os-cta-sub {
        font-size: 13px;
    }

    .os-section-title {
        font-size: 24px;
    }

    .os-types-grid {
        grid-template-columns: 1fr;
    }

    .os-feature-grid {
        grid-template-columns: 1fr;
    }

    .os-process-step {
        max-width: 100%;
        flex: 0 0 100%;
    }

    .os-portfolio-grid {
        grid-template-columns: 1fr;
    }

    .os-hero-actions, .os-cta-actions {
        width: 100%;
    }

    .os-btn-primary, .os-btn-outline {
        width: 100%;
        justify-content: center;
    }

    .os-tcard {
        padding: 18px 16px 16px;
    }
}

.os-featlist {
    list-style: none;
    margin: 28px 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 32px;
    row-gap: 2px;
    direction: rtl;
}

    .os-featlist li {
        position: relative;
        padding: 14px 20px 14px 0;
        font-size: 15px;
        font-weight: 600;
        line-height: 1.9;
        color: #1F3B4D;
        border-bottom: 1px solid rgba(11,57,84,.10);
        transition: color .22s ease, border-color .22s ease;
    }

        .os-featlist li::before {
            content: "";
            position: absolute;
            right: 0;
            top: 50%;
            width: 7px;
            height: 7px;
            border-radius: 50%;
            background: var(--c1, #E2626B);
            transform: translateY(-50%);
            opacity: .75;
            transition: transform .22s ease, opacity .22s ease;
        }

        .os-featlist li:hover {
            color: #0B3954;
            border-color: rgba(11,57,84,.22);
        }

            .os-featlist li:hover::before {
                transform: translateY(-50%) scale(1.35);
                opacity: 1;
            }

@media (max-width: 991px) {
    .os-featlist {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 24px;
    }
}

@media (max-width: 575px) {
    .os-featlist {
        grid-template-columns: 1fr;
    }
}