Why this happens: Astra Pro injects its own inline styles that sit above your stylesheet. Adding !important forces your colors to win. Open your style.css in File Manager, select all, delete, and paste this entire replacement.

style.css — full replacement
select all → delete → paste
/*
Theme Name:   Perfumika — Saffron Dusk
Template:     astra
Version:      1.0.0
*/

/* ── Base ── */
body {
  background-color: #0A0805 !important;
  color: #FAE8D0 !important;
}

a {
  color: #C46820 !important;
}
a:hover {
  color: #E09050 !important;
}

/* ── Header ── */
.site-header,
#masthead,
.ast-desktop-header,
.main-header-bar {
  background-color: #181008 !important;
  border-bottom: 0.5px solid #3A2010 !important;
}

.site-title a,
.site-title a:hover,
.ast-site-title-wrap a {
  color: #F0C090 !important;
}

.main-header-menu a,
.ast-builder-menu a {
  color: #A07050 !important;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-size: 11px;
}
.main-header-menu a:hover,
.ast-builder-menu a:hover {
  color: #C46820 !important;
}

/* ── Page / Content background ── */
.ast-separate-container,
.ast-page-builder-template,
#page,
.site,
.content-area,
#content {
  background-color: #0A0805 !important;
}

.ast-container,
.entry-content,
.ast-article-post {
  background-color: #0E0A06 !important;
  color: #FAE8D0 !important;
}

/* ── Headings ── */
h1, h2, h3, h4, h5, h6 {
  color: #F0C090 !important;
}

/* ── Buttons ── */
.ast-btn,
.button,
button[type="submit"],
input[type="submit"],
.wp-block-button__link {
  background-color: #C46820 !important;
  color: #0A0805 !important;
  border: none !important;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-size: 11px;
}
.ast-btn:hover,
.button:hover,
input[type="submit"]:hover {
  background-color: #E09050 !important;
}

/* ── Sidebar & Widgets ── */
.widget,
.widget-area,
.ast-sidebar-wrap {
  background: #181008 !important;
  color: #A07050 !important;
}

/* ── Footer ── */
.site-footer,
.ast-small-footer,
#colophon {
  background-color: #181008 !important;
  border-top: 0.5px solid #3A2010 !important;
  color: #6A4A20 !important;
}
Where to paste this

1
Go to Hostinger File Manager → public_html/wp-content/themes/perfumika-child/style.css

2
Open the file → scroll to the very bottom of what's already there

3
Paste the entire block below after the last closing bracket } — don't replace anything, just add at the end

4
Click Save → then Ctrl + Shift + R to hard refresh your site

WordPress will automatically load Tajawal and Cairo from Google Fonts via the @import line below — no need to install anything separately.

The CSS — paste at the bottom of style.css

Bilingual Font Rules
add to bottom of style.css
/* ── Google Fonts Import ── */
@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@300;400;500&family=Cairo:wght@300;400;500&family=Cormorant+Garamond:ital,wght@0,300;0,400;1,300&family=Jost:wght@200;300;400&display=swap');

/* ── Arabic (RTL) — Tajawal headings, Cairo body ── */
:lang(ar),
[dir="rtl"],
[dir="rtl"] body {
  font-family: 'Cairo', sans-serif !important;
  direction: rtl;
}

[dir="rtl"] h1,
[dir="rtl"] h2,
[dir="rtl"] h3,
[dir="rtl"] h4,
[dir="rtl"] h5,
[dir="rtl"] h6 {
  font-family: 'Tajawal', sans-serif !important;
  font-weight: 300;
  letter-spacing: 0;
}

/* ── English (LTR) — Cormorant headings, Jost body ── */
:lang(en),
[dir="ltr"] body,
.lang-en body {
  font-family: 'Jost', sans-serif !important;
  font-weight: 300;
}

[dir="ltr"] h1,
[dir="ltr"] h2,
[dir="ltr"] h3,
[dir="ltr"] h4,
[dir="ltr"] h5,
[dir="ltr"] h6,
.lang-en h1,
.lang-en h2,
.lang-en h3 {
  font-family: 'Cormorant Garamond', serif !important;
  font-weight: 300;
  font-style: italic;
}

/* ── Mixed content — English text inside Arabic page ── */
.en-text,
.english-content,
[lang="en"] {
  font-family: 'Jost', sans-serif !important;
  direction: ltr;
}

.en-text h1,
.en-text h2,
.en-text h3,
[lang="en"] h1,
[lang="en"] h2,
[lang="en"] h3 {
  font-family: 'Cormorant Garamond', serif !important;
  font-style: italic;
}

/* ── Fragrance names always in English font ── */
.fragrance-name,
.perfume-title,
.listing-title {
  font-family: 'Cormorant Garamond', serif !important;
  font-style: italic;
  font-weight: 300;
  direction: ltr;
}