:root {
    --font-family: Tajawal, sans-serif;
    --background: #FFFFFF;
    --foreground: #1A1A1A;
    --primary: #ffffff;
    --primary-foreground: #1A1A1A;
    --secondary: #ffffff;
    --secondary-foreground: #1A1A1A;
    --muted: #6B7280;
    --muted-foreground: #6B7280;
    --accent: #A89C90;
    --accent-foreground: #FFFFFF;
    --card: #FFFFFF;
    --card-foreground: #1A1A1A;
    --border: #E8E8E8;
    --input: #D9D9D9;
    --ring: #FFC677;
    --radius: 16px;
    --cols-mobile: 2;
    --cols-desktop: 5;
}

header,
footer#footer {
  background-color: #000000 !important;
}

header a,
header button,
header span,
header p,
header div,
header li,
header summary,
header details {
  color: #ffffff !important;
}

footer#footer a,
footer#footer button,
footer#footer span,
footer#footer p,
footer#footer div,
footer#footer li,
footer#footer h1,
footer#footer h2,
footer#footer h3,
footer#footer h4 {
  color: #ffffff !important;
      justify-content: center;
      text-align: center !important;

}

header svg path,
footer#footer svg path {
  fill: #ffffff !important;
  stroke: #ffffff !important;
}

header input {
  background-color: #000000 !important;
  color: #ffffff !important;
}
header input::placeholder {
  color: #dddddd !important;
}

footer#footer {
    text-align: center !important;
}

img:where(.space-y-4>:not(:last-child)) {
    margin: auto;
}

dialog#mobile-drawer .bg-background {
  background-color: #000000 !important;
}

button.btn.btn-filled.btn-lg.shrink-0.transition-all.duration-200 {
    border: 1px solid;
}

.btn-filled {
    border-color: #000000;
    background-color: #000000;
    color: #ffffff;
}