<template>
    <v-flex :class='"xl"+colSize+" lg2 md2 sm4 xs12  RTL text-lg-right WM-Subtitle"'>
        <div :class='"Step En color-"+color+""' v-text="number"></div>
        <div class="Title">
            <div class="FA" v-text="titleFa"></div>
            <div class="EN" v-text="titleEn"></div>
        </div>
    </v-flex>
</template>

<script>
export default {
    name: "wm-section-title",
    props: {
        colSize: { default: "2" },
        titleFa: { default: "عنوان بخش" },
        titleEn: { default: "Part Title" },
        color: { default: "cyan" },
        number: { default: "01" },
    },
    data: function ()  {
        return {}
    },
};
</script>
<style lang="scss" scoped>
/* --------------------------------------------------------
                        SectionTitle :: Begin
-------------------------------------------------------- */

.WM-Subtitle .Step {
    font-size: 50px;
    opacity: 0.2;
    float: right;
    line-height: 60px;
}

.WM-Subtitle .Title {
    float: right;
    margin-right: -30px;
    margin-top: 8px;
}

.WM-Subtitle .Title .FA {
    font-size: 20px;
    line-height: 1.2;
}

.WM-Subtitle .Title .EN {
    font-size: 12px;
    letter-spacing: 5px;
    text-transform: uppercase;
    font-family: 'Montserrat-Regular', sans-serif;
}

</style>

