Change the alignment of title

[blueray453]

I have asciidoctor like:

.Sin, Debt
SAN 5477

I want to align title to the right. So, I used:

.title {
    text-align: right;
}

But it is not giving the expected behavior.

I checked with inspection tool and it is using title class.

What can i do at this point?

Just for clarification, this is the whole css:

/* @import url('https://fonts.googleapis.com/css2?family=Noto+Naskh+Arabic:wght@400;700&display=swap');
@import "https://cdn.jsdelivr.net/gh/asciidoctor/asciidoctor@2.0/data/stylesheets/asciidoctor-default.css"; */

@import url('asciidoctor.css');

/* Custom Color and Style Declarations */

/* Base colors */
:root {
    --base-border-color: #BBBBBB;
    --base-font-color: #000000;
    --role-subtitle-font-color: #666666;
    --mark-background-color: #CCCCCC;
    --abstract-font-color: #2C2C2C;
    --footer-border-color: #CCCCCC;
}

/* Heading and title colors */
h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--base-font-color);
}

.title {
    color: var(--role-subtitle-font-color);
}

/* Abstract styles */
.abstract {
    color: var(--abstract-font-color);
}

.abstract-title {
    color: var(--base-font-color);
    /* Heading font color */
}

/* Admonition column rule color */
.admonitionblock>.content {
    border-left: 3px solid var(--base-border-color);
}

/* Blockquote styling */
blockquote {
    border-left: 3px solid var(--base-border-color);
    color: var(--role-subtitle-font-color);
}

/* Verse block styling */
.verse {
    border-left: 3px solid var(--base-border-color);
    color: var(--role-subtitle-font-color);
}

/* Code block styling */
code {
    color: var(--base-font-color);
}

.literalblock {
    border-left: 3px solid var(--base-border-color);
    color: var(--base-font-color);
}

/* Sidebar block styling */
.sidebarblock>.content>.title {
    color: var(--base-font-color);
    /* Heading font color */
}

.sidebarblock {
    border-left: 3px solid var(--base-border-color);
}

/* Example block styling */
.exampleblock {
    border-left: 3px solid var(--base-border-color);
}

/* Thematic break styling */
hr {
    border-color: var(--base-border-color);
}

/* Footer border styling */
.footer {
    border-top: 1px solid var(--footer-border-color);
}

/* Mark background color */
mark {
    background-color: var(--mark-background-color);
}

/* TOC dot leader color (optional; setting it to inherit) */
.toc2>.toc-item {
    border-bottom-color: inherit;
}

/* Menu caret */
.menu-caret::before {
    content: " <font size=\"1.15em\">\u203a</font> ";
}

/* Page Margins */
@page {
    size: A4;
    margin-top: 0.59in;
    margin-bottom: 0.79in;
    /* top, right, bottom, left */
}

/* Verso (left) page-specific */
@page :left {
    margin-left: 0.79in;
    margin-right: 0.59in;

    @bottom-left {
        content: "Page " counter(page) " of " counter(pages);
        font-size: 12px;
        text-align: left;
        margin-left: .1in; /* abs(margin-left - margin-right) / 2 */
    }
}

/* Recto (right) page-specific */
@page :right {
    margin-left: 0.59in;
    margin-right: 0.79in;

    @bottom-right {
        content: "Page " counter(page) " of " counter(pages);
        font-size: 12px;
        text-align: right;
        margin-right: .1in; /* abs(margin-left - margin-right) / 2 */
    }
}

@font-face {
    font-family: 'Noto Naskh Arabic';
    src: url('fonts/NotoNaskhArabic-Regular.ttf') format('truetype');
    font-weight: 400;
}

@font-face {
    font-family: 'Noto Naskh Arabic';
    src: url('fonts/NotoNaskhArabic-Medium.ttf') format('truetype');
    font-weight: 500;
}

@font-face {
    font-family: 'Noto Naskh Arabic';
    src: url('fonts/NotoNaskhArabic-SemiBold.ttf') format('truetype');
    font-weight: 600;
}

@font-face {
    font-family: 'Noto Naskh Arabic';
    src: url('fonts/NotoNaskhArabic-Bold.ttf') format('truetype');
    font-weight: 700;
}

/* Custom styling for roles */
.reference {
    font-size: 12px;
    text-align: right;
    white-space: pre-wrap;
}

.arabic-text {
    font-family: 'Noto Naskh Arabic';
    direction: rtl;
    text-align: right;
    font-size: 24px;
}

.title {
    text-align: right;
}