/* ==================== About Page Creative Style ==================== */
/* فونت و سایز در این فایل تنظیم نشده تا از style.css اصلی گرفته شود */

.about-page-wrap {
    position: relative;
    overflow: hidden;
}

    .about-page-wrap a {
        text-decoration: none;
    }

/* ==================== Hero ==================== */

.about-creative-hero {
    position: relative;
    padding: 3rem 0 2rem;
    overflow: hidden;
}

    .about-creative-hero::before {
        content: '';
        position: absolute;
        top: -160px;
        right: -160px;
        width: 420px;
        height: 420px;
        border-radius: 50%;
        background: rgba(34, 65, 115, 0.08);
        pointer-events: none;
    }

    .about-creative-hero::after {
        content: '';
        position: absolute;
        left: -170px;
        bottom: -190px;
        width: 460px;
        height: 460px;
        border-radius: 50%;
        background: rgba(34, 65, 115, 0.06);
        pointer-events: none;
    }

.about-hero-shell {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(320px, 0.75fr);
    gap: 2rem;
    align-items: stretch;
    min-height: 430px;
    padding: 2.5rem;
    border-radius: 2.5rem;
    background: radial-gradient(circle at 18% 20%, rgba(255,255,255,0.22), transparent 28%), linear-gradient(135deg, #10233f, #224173 55%, #1b3560);
    box-shadow: 0 28px 80px rgba(15, 23, 42, 0.18);
    overflow: hidden;
}

    .about-hero-shell::before {
        content: '';
        position: absolute;
        inset: 18px;
        border: 1px solid rgba(255,255,255,0.12);
        border-radius: 2rem;
        pointer-events: none;
    }

    .about-hero-shell::after {
        content: '';
        position: absolute;
        left: -100px;
        bottom: -120px;
        width: 310px;
        height: 310px;
        border-radius: 50%;
        background: rgba(255,255,255,0.08);
        pointer-events: none;
    }

.about-hero-content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    color: #ffffff;
}

.about-kicker,
.about-cta-label,
.about-section-mini-title {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    width: max-content;
    max-width: 100%;
    border-radius: 999px;
}

.about-kicker {
    color: #ffffff;
    background: rgba(255,255,255,0.12);
    border: 1px solid rgba(255,255,255,0.16);
    padding: 0.55rem 1rem;
    margin-bottom: 1rem;
    backdrop-filter: blur(12px);
}

.about-hero-content h1 {
    margin: 0 0 1rem;
    color: #ffffff;
}

.about-hero-text {
    max-width: 760px;
    color: rgba(255,255,255,0.86);
}

    .about-hero-text p {
        color: rgba(255,255,255,0.86);
    }

.about-hero-actions {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    flex-wrap: wrap;
    margin-top: 1.5rem;
}

.about-primary-btn,
.about-secondary-btn,
.about-cta-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.65rem;
    min-height: 48px;
    padding: 0.75rem 1.3rem;
    border-radius: 999px;
    transition: all 0.25s ease;
    position: relative;
    z-index: 2;
}

.about-primary-btn {
    background: #ffffff;
    color: #224173;
    box-shadow: 0 16px 32px rgba(0, 0, 0, 0.16);
}

.about-secondary-btn {
    color: #ffffff;
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.22);
}

    .about-primary-btn:hover,
    .about-secondary-btn:hover,
    .about-cta-btn:hover {
        transform: translateY(-3px);
    }

.about-primary-btn:hover {
    color: #224173;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.22);
}

.about-secondary-btn:hover {
    color: #ffffff;
    background: rgba(255,255,255,0.16);
}

/* ==================== Hero Visual ==================== */

.about-hero-visual {
    position: relative;
    z-index: 2;
    min-height: 360px;
    border-radius: 2rem;
    background: linear-gradient(rgba(255,255,255,0.07) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.07) 1px, transparent 1px);
    background-size: 34px 34px;
}

    .about-hero-visual::before {
        content: '';
        position: absolute;
        inset: 12%;
        border: 1px dashed rgba(255,255,255,0.25);
        border-radius: 50%;
    }

    .about-hero-visual::after {
        content: '';
        position: absolute;
        inset: 24%;
        border: 1px dashed rgba(255,255,255,0.18);
        border-radius: 50%;
    }

.about-orbit-card {
    position: absolute;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    border-radius: 1.4rem;
    color: #ffffff;
    background: rgba(255,255,255,0.13);
    border: 1px solid rgba(255,255,255,0.18);
    backdrop-filter: blur(14px);
    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.16);
    padding: 0.85rem 1rem;
}

.about-orbit-main {
    top: 50%;
    right: 50%;
    transform: translate(50%, -50%);
    width: 118px;
    height: 118px;
    border-radius: 2rem;
    background: #ffffff;
    color: #224173;
}

    .about-orbit-main i {
        animation: aboutFanSpin 7s linear infinite;
    }

.about-orbit-top {
    top: 8%;
    right: 18%;
}

.about-orbit-right {
    top: 45%;
    left: 3%;
}

.about-orbit-bottom {
    bottom: 8%;
    right: 10%;
}

@keyframes aboutFanSpin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/* ==================== Trust ==================== */

.about-trust-section {
    padding: 0 0 2rem;
    margin-top: -1rem;
    position: relative;
    z-index: 3;
}

.about-trust-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}

.about-trust-card {
    background: rgba(255,255,255,0.88);
    border: 1px solid rgba(34, 65, 115, 0.09);
    border-radius: 1.5rem;
    padding: 1.25rem;
    box-shadow: 0 18px 45px rgba(15, 23, 42, 0.07);
    backdrop-filter: blur(14px);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

    .about-trust-card:hover {
        transform: translateY(-6px);
        box-shadow: 0 22px 55px rgba(15, 23, 42, 0.11);
    }

    .about-trust-card span,
    .about-side-icon,
    .about-content-icon,
    .about-value-card i {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: linear-gradient(214deg, #224173, #1b3560);
        color: #ffffff;
        box-shadow: 0 12px 24px rgba(34, 65, 115, 0.22);
    }

    .about-trust-card span {
        width: 48px;
        height: 48px;
        border-radius: 1rem;
        margin-bottom: 0.9rem;
    }

    .about-trust-card strong {
        display: block;
        color: #0f172a;
        margin-bottom: 0.45rem;
    }

    .about-trust-card p {
        margin: 0;
        color: #64748b;
    }

/* ==================== Story ==================== */

.about-story-section {
    padding: 2rem 0 3rem;
}

.about-story-layout {
    display: grid;
    grid-template-columns: 340px minmax(0, 1fr);
    gap: 1.3rem;
    align-items: start;
}

.about-story-side {
    position: sticky;
    top: 95px;
}

.about-side-panel,
.about-story-card,
.about-value-card,
.about-final-cta {
    background: #ffffff;
    border: 1px solid rgba(34, 65, 115, 0.09);
    border-radius: 1.8rem;
    box-shadow: 0 22px 58px rgba(15, 23, 42, 0.06);
}

.about-side-panel {
    padding: 1.5rem;
    position: relative;
    overflow: hidden;
}

    .about-side-panel::before {
        content: '';
        position: absolute;
        left: -70px;
        bottom: -80px;
        width: 190px;
        height: 190px;
        border-radius: 50%;
        background: rgba(34, 65, 115, 0.08);
    }

.about-side-icon {
    width: 58px;
    height: 58px;
    border-radius: 1.2rem;
    margin-bottom: 1rem;
    position: relative;
    z-index: 2;
}

.about-side-panel h2 {
    position: relative;
    z-index: 2;
    color: #0f172a;
    margin-bottom: 1rem;
}

.about-process-list {
    display: grid;
    gap: 0.85rem;
    position: relative;
    z-index: 2;
}

.about-process-item {
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr);
    gap: 0.8rem;
    align-items: start;
    background: #f8fafc;
    border: 1px solid rgba(34, 65, 115, 0.07);
    border-radius: 1.2rem;
    padding: 0.9rem;
}

    .about-process-item > span {
        width: 46px;
        height: 46px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: rgba(34, 65, 115, 0.08);
        color: #224173;
        border-radius: 1rem;
    }

    .about-process-item strong {
        display: block;
        color: #0f172a;
        margin-bottom: 0.25rem;
    }

    .about-process-item p {
        margin: 0;
        color: #64748b;
    }

.about-story-main {
    display: grid;
    gap: 1.2rem;
}

.about-story-card {
    padding: 1.6rem;
    position: relative;
    overflow: hidden;
}

    .about-story-card::before {
        content: '';
        position: absolute;
        top: -90px;
        left: -90px;
        width: 230px;
        height: 230px;
        border-radius: 50%;
        background: rgba(34, 65, 115, 0.06);
    }

.about-section-mini-title {
    position: relative;
    z-index: 2;
    color: #224173;
    background: rgba(34, 65, 115, 0.08);
    border: 1px solid rgba(34, 65, 115, 0.12);
    padding: 0.5rem 0.9rem;
    margin-bottom: 1rem;
}

.about-story-card h2,
.about-db-content {
    position: relative;
    z-index: 2;
}

.about-story-card h2 {
    color: #0f172a;
    margin-bottom: 0.9rem;
}

.about-db-content {
    color: #475569;
}

    .about-db-content p:last-child {
        margin-bottom: 0;
    }

/* ==================== Values ==================== */

.about-values-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}

.about-value-card {
    padding: 1.25rem;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

    .about-value-card:hover {
        transform: translateY(-6px);
        box-shadow: 0 22px 55px rgba(15, 23, 42, 0.1);
    }

    .about-value-card i {
        width: 48px;
        height: 48px;
        border-radius: 1rem;
        margin-bottom: 0.9rem;
    }

    .about-value-card strong {
        display: block;
        color: #0f172a;
        margin-bottom: 0.45rem;
    }

    .about-value-card p {
        margin: 0;
        color: #64748b;
    }

/* ==================== CTA ==================== */

.about-final-cta-section {
    padding: 0 0 5rem;
}

.about-final-cta {
    padding: 1.8rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    overflow: hidden;
    position: relative;
    background: radial-gradient(circle at 12% 20%, rgba(34,65,115,0.11), transparent 26%), #ffffff;
}

    .about-final-cta::before {
        content: '';
        position: absolute;
        left: -90px;
        bottom: -100px;
        width: 250px;
        height: 250px;
        background: rgba(34, 65, 115, 0.07);
        border-radius: 50%;
        pointer-events: none;
    }

.about-cta-label {
    color: #224173;
    background: rgba(34, 65, 115, 0.08);
    border: 1px solid rgba(34, 65, 115, 0.12);
    padding: 0.5rem 0.9rem;
    margin-bottom: 0.9rem;
    position: relative;
    z-index: 2;
}

.about-final-cta h2,
.about-final-cta p {
    position: relative;
    z-index: 2;
}

.about-final-cta h2 {
    color: #0f172a;
    margin-bottom: 0.45rem;
}

.about-final-cta p {
    color: #64748b;
    margin: 0;
}

.about-cta-btn {
    min-width: 210px;
    background: linear-gradient(214deg, #224173, #1b3560);
    color: #ffffff;
    box-shadow: 0 14px 28px rgba(34, 65, 115, 0.24);
}

    .about-cta-btn:hover {
        color: #ffffff;
        box-shadow: 0 18px 34px rgba(34, 65, 115, 0.32);
    }

/* ==================== Dark Mode ==================== */

body.dark-mode .about-creative-hero::before,
body.dark-mode .about-creative-hero::after {
    background: rgba(255,255,255,0.035);
}

body.dark-mode .about-trust-card,
body.dark-mode .about-side-panel,
body.dark-mode .about-story-card,
body.dark-mode .about-value-card,
body.dark-mode .about-final-cta {
    background: #1e293b;
    border-color: rgba(255,255,255,0.08);
    box-shadow: 0 22px 58px rgba(0, 0, 0, 0.28);
}

    body.dark-mode .about-trust-card strong,
    body.dark-mode .about-side-panel h2,
    body.dark-mode .about-process-item strong,
    body.dark-mode .about-story-card h2,
    body.dark-mode .about-value-card strong,
    body.dark-mode .about-final-cta h2 {
        color: #f1f5f9;
    }

    body.dark-mode .about-trust-card p,
    body.dark-mode .about-process-item p,
    body.dark-mode .about-db-content,
    body.dark-mode .about-value-card p,
    body.dark-mode .about-final-cta p {
        color: #cbd5e1;
    }

body.dark-mode .about-process-item {
    background: rgba(15, 23, 42, 0.52);
    border-color: rgba(255,255,255,0.07);
}

/* ==================== Mobile Bottom Menu ==================== */

.about-mobile-bottom-bar {
    display: none !important;
}

/* ==================== Responsive ==================== */

@media (max-width: 991px) {
    .about-hero-shell {
        grid-template-columns: 1fr;
    }

    .about-hero-visual {
        min-height: 280px;
    }

    .about-trust-grid,
    .about-values-grid {
        grid-template-columns: 1fr;
    }

    .about-story-layout {
        grid-template-columns: 1fr;
    }

    .about-story-side {
        position: static;
    }

    .about-final-cta {
        flex-direction: column;
        align-items: flex-start;
    }

    .about-cta-btn {
        width: 100%;
    }

    .about-mobile-bottom-bar {
        display: grid !important;
    }
}

@media (max-width: 767px) {
    body.about-page {
        padding-bottom: 98px;
    }

    .about-creative-hero {
        padding: 1.5rem 0 1rem;
    }

    .about-hero-shell {
        min-height: unset;
        padding: 1.2rem;
        border-radius: 1.5rem;
        gap: 1.2rem;
    }

        .about-hero-shell::before {
            inset: 10px;
            border-radius: 1.2rem;
        }

    .about-hero-actions {
        display: grid;
        grid-template-columns: 1fr;
    }

    .about-primary-btn,
    .about-secondary-btn {
        width: 100%;
    }

    .about-hero-visual {
        min-height: 230px;
    }

    .about-orbit-main {
        width: 92px;
        height: 92px;
        border-radius: 1.4rem;
    }

    .about-orbit-card span {
        display: none;
    }

    .about-trust-section {
        margin-top: 0;
    }

    .about-trust-card,
    .about-side-panel,
    .about-story-card,
    .about-value-card,
    .about-final-cta {
        border-radius: 1.35rem;
        padding: 1rem;
    }

    .about-process-item {
        grid-template-columns: 40px minmax(0, 1fr);
    }

        .about-process-item > span {
            width: 40px;
            height: 40px;
        }

    .about-mobile-bottom-bar {
        position: fixed;
        right: 12px;
        left: 12px;
        bottom: 12px;
        height: 66px;
        background: rgba(255, 255, 255, 0.96);
        border: 1px solid rgba(0, 0, 0, 0.06);
        border-radius: 24px;
        box-shadow: 0 12px 35px rgba(0, 0, 0, 0.16);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        z-index: 1040;
        padding: 8px;
        grid-template-columns: 1fr 1.25fr;
        gap: 8px;
        direction: rtl;
    }

    .about-bottom-item {
        border: none;
        background: transparent;
        color: #555;
        border-radius: 18px;
        font-family: inherit;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.35rem;
        text-decoration: none;
    }

    .about-call-bottom-btn {
        background: linear-gradient(214deg, #224173, #1b3560);
        color: #ffffff;
        box-shadow: 0 8px 18px rgba(34, 65, 115, 0.24);
    }

        .about-call-bottom-btn:hover {
            color: #ffffff;
        }
}