:root {
  --color-primary: #f58220;
  --color-primary-dark: #d94a28;
  --color-secondary: #542f25;
  --color-text-primary: #3b241e;
  --color-text-secondary: #3b241e;
  --color-text-subtitle: #695a55;
  --color-background-container: #fff8ec;
  --color-background-sunken: #fff8ec;
  --color-white-gray: #fff8ec;
  --color-yellow: #ffd338;
}

html,
body {
  background: #fff8ec !important;
  color: #695a55;
}

body > #__next > main > div.bg-white.px-4 {
  background: #3b241e !important;
  color: #fff8ec;
}

body > #__next > main > div.bg-white.px-4 {
  position: relative;
  z-index: 30;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  background: #3b241e !important;
}

body > #__next > main > div.bg-white.px-4 a,
body > #__next > main > div.bg-white.px-4 button {
  color: #fff8ec;
}

.itakaf-logo {
  color: #f58220 !important;
}

.min-h-screen.bg-white {
  background: #fff8ec !important;
}

footer {
  background: #3b241e !important;
  color: #fff8ec !important;
}

footer a,
footer p,
footer span,
footer h2,
footer h3,
footer div {
  color: inherit;
}

.bg-primary {
  background-color: #f58220 !important;
}

.bg-primary:hover {
  background-color: #d94a28 !important;
}

.text-primary {
  color: #3b241e !important;
}

h1 {
  color: #3b241e !important;
}

.text-primary.itakaf-logo,
.itakaf-logo {
  color: #f58220 !important;
}

.bg-secondary {
  background-color: #542f25 !important;
}

.text-secondary {
  color: #542f25 !important;
}

[class*="DCDDFB"],
[class*="fde3e3"],
[class*="fff96a"] {
  background-color: #ffd338 !important;
  color: #3b241e !important;
}

[class*="text-black"],
[class*="text-gray-500"],
[class*="text-gray-600"],
[class*="text-gray-700"],
[class*="text-text-subtitle"] {
  color: #695a55 !important;
}

[class*="border-gray-100"],
[class*="border-gray-200"],
[class*="border-gray-300"] {
  border-color: #f5d6b3 !important;
}

[class*="002eff"] {
  --tw-gradient-from: #f58220 !important;
  --tw-gradient-to: #d94a28 !important;
  --tw-shadow-color: rgb(245 130 32 / 0.35) !important;
  box-shadow: 0 4px 6px rgb(245 130 32 / 0.35) !important;
}

[class*="1087ff"] {
  --tw-gradient-from: #f58220 !important;
}

[class*="001a99"] {
  --tw-gradient-to: #d94a28 !important;
}

[class*="1087ff"]::after,
[class*="002eff"]::after {
  background-image: linear-gradient(to bottom, #f58220, #d94a28) !important;
}

[class*="text-blue-500"] {
  color: #3b241e !important;
}

[class*="F3F7FF"],
[class*="F5F8FC"] {
  background-color: #fff8ec !important;
}

[class*="blue-100"] {
  background-color: #fff8ec !important;
}

[class*="blue-50"] {
  background-color: #fff8ec !important;
}

[class*="blue-200"] {
  border-color: #f5d6b3 !important;
}

/* Final i-takaful palette */
:root {
  --color-primary: #e31e24;
  --color-primary-dark: #e31e24;
  --color-secondary: #111111;
  --color-text-primary: #111111;
  --color-text-secondary: #111111;
  --color-text-subtitle: #111111;
  --color-background-container: #ffffff;
  --color-background-sunken: #ffffff;
  --color-white-gray: #ffffff;
  --color-yellow: #ffd21c;
}

html,
body,
#__next,
main,
.min-h-screen.bg-white {
  background: #ffffff !important;
  color: #111111;
}

body > #__next > main > div.bg-white.px-4 {
  background: #ffffff !important;
  color: #111111;
}

body > #__next > main > div.bg-white.px-4 a,
body > #__next > main > div.bg-white.px-4 button {
  color: #111111;
}

body > #__next > main > div.bg-white.px-4 [data-language-switcher] button {
  color: #111111 !important;
}

body > #__next > main > div.bg-white.px-4 .bg-primary {
  color: #ffffff !important;
}

.text-primary,
h1,
.text-secondary,
[class*="text-blue-500"] {
  color: #111111 !important;
}

.text-primary.itakaf-logo,
.itakaf-logo {
  color: #e31e24 !important;
}

footer {
  background: #111111 !important;
  color: #ffffff !important;
}

.bg-primary,
.bg-primary:hover {
  background-color: #e31e24 !important;
}

.bg-secondary {
  background-color: #111111 !important;
}

[class*="DCDDFB"],
[class*="fde3e3"],
[class*="fff96a"] {
  background-color: #ffd21c !important;
  color: #111111 !important;
}

[class*="text-black"],
[class*="text-gray-500"],
[class*="text-gray-600"],
[class*="text-gray-700"],
[class*="text-text-subtitle"] {
  color: #111111 !important;
}

[class*="border-gray-100"],
[class*="border-gray-200"],
[class*="border-gray-300"],
[class*="blue-200"] {
  border-color: #111111 !important;
}

[class*="002eff"],
[class*="1087ff"],
[class*="001a99"] {
  --tw-gradient-from: #e31e24 !important;
  --tw-gradient-to: #e31e24 !important;
  --tw-shadow-color: rgb(227 30 36 / 0.35) !important;
  box-shadow: 0 4px 6px rgb(227 30 36 / 0.35) !important;
}

[class*="1087ff"]::after,
[class*="002eff"]::after {
  background-image: linear-gradient(to bottom, #e31e24, #e31e24) !important;
}

[class*="blue-100"],
[class*="blue-50"],
[class*="F3F7FF"],
[class*="F5F8FC"] {
  background-color: #ffffff !important;
}

/* Takaful advisory banner */
.bg-blue-100 {
  background-color: #e31e24 !important;
  color: #ffffff !important;
}

.bg-blue-100 [class*="text-black"] {
  color: #ffffff !important;
}

.bg-blue-100 .text-primary {
  color: #ffd21c !important;
}

/* Keep the provider marquee filled and moving smoothly with repeated sets */
div[class*="animate-[marquee_45s_linear_infinite]"] {
  animation-duration: 24s !important;
}

/* Replace the original blue/pink hero artwork with the project palette */
section.relative.flex.items-center.bg-cover {
  background-color: #ffffff !important;
  background-image: linear-gradient(
    135deg,
    #ffffff 0%,
    #ffffff 38%,
    #fff7f7 68%,
    #ffe9e9 100%
  ) !important;
}

/* Footer: keep a single high-contrast surface regardless of legacy classes. */
footer > div[class*="bg-[#F3F7FF]"] {
  background-color: #ffffff !important;
  color: #111111 !important;
}

footer > div[class*="bg-[#F3F7FF]"] .text-primary-dark,
footer > div[class*="bg-[#F3F7FF]"] .text-primary-dark :is(p, span, h2, h3, a) {
  color: #111111 !important;
}

footer > div[class*="bg-[#F3F7FF]"] .text-primary-dark a:hover {
  color: #e31e24 !important;
}

footer > div[class*="bg-[#F3F7FF]"] .text-primary-dark .itakaf-logo {
  color: #e31e24 !important;
}

/* About section: retain the original artwork/pattern and recolour it to red. */
[data-i18n-section="about"] {
  background-color: #e31e24 !important;
  background-image: linear-gradient(rgb(227 30 36 / 0.68), rgb(227 30 36 / 0.68)),
    url('https://images.bjak.my/about-us-landing-bg-mobile.webp') !important;
  background-blend-mode: color, normal !important;
}

[data-i18n-section="about"] h2 {
  color: #e31e24 !important;
}

[data-i18n-section="about"] h3 {
  color: #e31e24 !important;
}

@media (max-width: 1023px) {
  [data-i18n-section="about"] {
    padding-bottom: 0 !important;
  }

  [data-i18n-section="about"] > img[alt="About Us"] {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    display: block !important;
    width: 100vw !important;
    max-width: none !important;
    height: auto !important;
    margin: 24px 0 0 auto !important;
    transform: none !important;
  }
}

@media (min-width: 1024px) {
  [data-i18n-section="about"] {
    background-image: linear-gradient(rgb(227 30 36 / 0.68), rgb(227 30 36 / 0.68)),
      url('https://images.bjak.my/about-us-landing-bg-desktop.webp') !important;
  }
}