/* ========================================
   معرفی کوتاه فرش زارع

   اولویت‌های important برای هماهنگی با
   کلاس‌های Bootstrap هستند.
======================================== */

.brand-story {
    margin: 64px 0 !important;
    padding: 56px 32px !important;
    border: 1px solid #EEEEEE;
    border-radius: 12px !important;
    background-color: #F7F7F7 !important;
    direction: rtl;
    text-align: center;
}

    .brand-story > .mx-auto {
        max-width: 760px;
    }

        .brand-story > .mx-auto > span {
            margin-bottom: 16px !important;
            color: #777777 !important;
            font-size: 13px;
            font-weight: 500;
        }

    .brand-story h2 {
        margin: 0 0 20px !important;
        color: var(--text-black) !important;
        font-size: 30px !important;
        font-weight: 700 !important;
        line-height: 1.8 !important;
    }

    .brand-story p {
        margin: 0 0 28px !important;
        color: #666666 !important;
        font-size: 15px !important;
        line-height: 2.2 !important;
    }

    .brand-story .btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 46px;
        padding: 12px 26px !important;
        border: 1px solid #CCCCCC;
        border-radius: 6px;
        background-color: var(--white);
        color: var(--text-black) !important;
        font-family: inherit;
        font-size: 14px !important;
        font-weight: 500;
        line-height: 1.8;
        text-decoration: none;
        transition: border-color 0.2s ease, background-color 0.2s ease;
    }

        .brand-story .btn:not(:disabled):hover {
            border-color: var(--brand-green);
            background-color: var(--green-light);
        }

        .brand-story .btn:focus-visible {
            outline: 2px solid var(--text-black);
            outline-offset: 4px;
            box-shadow: none;
        }

        .brand-story .btn:disabled {
            opacity: 0.65;
            cursor: not-allowed;
        }

@media (max-width: 575px) {
    .brand-story {
        margin: 44px 0 !important;
        padding: 34px 22px !important;
        border-radius: 8px !important;
    }

        .brand-story h2 {
            margin-bottom: 16px !important;
            font-size: 23px !important;
        }

        .brand-story p {
            margin-bottom: 22px !important;
            font-size: 14px !important;
        }

        .brand-story .btn {
            width: 100%;
        }
}

@media (prefers-reduced-motion: reduce) {
    .brand-story .btn {
        transition: none;
    }
}