:root {
    --button-color: #03a9f4;
    --green: #23c10c;
    --gray: #ced4db;
    --text: #ffffff;
    --t-black: #202020;
    --blue: #0d4082;
    --bg-primary: #ffffff;
    --bg-secondary: #f3f5f6;
    --bg-dark: #121212;
    --bg-card: #1e1e1e;
}

/* Dark Mode Styles */
.dark {
    --text: #000000;
    --t-black: #ffffff;
    --gray: #4a5568;
    --bg-primary: #000000;
    --bg-secondary: #1a1a1a;
    --bg-dark: #ffffff;
    --bg-card: #2d2d2d;
}

/* @font-face {
    font-family: "Zain";
    src: url("../../../fonts/Zain-Regular.ttf");
    font-weight: 600;
    font-display: swap;
} 
 
@font-face {
    font-family: "Anderson";
    src: url("../../../fonts/AndersonGrotesk.otf");
    font-weight: 900;
    font-display: swap;
}

body{
    font-family: 'Anderson', sans-serif;
} */

@font-face {
    font-family: "Zain";
    src: url("../../../fonts/Zain-Regular.ttf") format("truetype");
    font-weight: 400;
    font-display: swap;
}

/* @font-face {
    font-family: "Zain";
    src: url("../../../fonts/Zain-Bold.ttf") format("truetype");
    font-weight: 700;
    font-display: swap;
} */

@font-face {
    font-family: "Anderson";
    src: url("../../../fonts/AndersonGrotesk.otf") format("opentype");
    font-weight: 400;
    font-display: swap;
}

/* @font-face {
    font-family: "Anderson";
    src: url("../../../fonts/AndersonGrotesk-Bold.otf") format("opentype");
    font-weight: 700;
    font-display: swap;
}

@font-face {
    font-family: "Anderson";
    src: url("../../../fonts/AndersonGrotesk-Black.otf") format("opentype");
    font-weight: 900;
    font-display: swap;
} */

/* Arabic — use Zain */
html[lang="ar"] body {
    font-family: 'Zain', sans-serif;
}

/* English — use Anderson */
html[lang="en"] body {
    font-family: 'Anderson', sans-serif;
}

/* Fallback */
body {
    font-family: 'Anderson', 'Zain', sans-serif;
}


/* Apply dark mode to body */
body.dark-mode {
    background-color: var(--bg-primary);
    color: var(--text);
}

/* Dark mode specific overrides for common elements */
.dark body {
    background-color: #000000 !important;
    color: #ffffff !important;
}

.dark header,
.dark .header {
    background-color: #1a1a1a !important;
}

.dark .bg-white,
.dark [style*="background-color: #fff"],
.dark [style*="background-color:#fff"] {
    background-color: #1e1e1e !important;
}

.dark .text-gray-500,
.dark .text-\[\#8290a3\] {
    color: #a0aec0 !important;
}

.dark .shadow-xl {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5) !important;
}

.dark [style*="background-color: #fdfdfd"] {
    background-color: #1e1e1e !important;
}

.dark [style*="background-color: #f3f5f6"] {
    background-color: #2d2d2d !important;
}

.dark input,
.dark textarea,
.dark select {
    background-color: #2d2d2d !important;
    color: #ffffff !important;
    border-color: #4a5568 !important;
}

.dark .bg-\[\#f3f5f6\] {
    background-color: #2d2d2d !important;
}

.dark .bg-\[\#8290a3\] {
    background-color: #4a5568 !important;
}

.dark a,
.dark .link a {
    color: #ffffff !important;
}

.dark .mobile-nav-item a {
    color: #ffffff !important;
}

/* Dark mode for inline styles in blade files */
/* Blue color #000675 */
.dark [style*="#000675"],
.dark [style*="background-color: #000675"] {
    background-color: #1a1a2e !important;
}

/* Cyan color #00FFCE */
.dark [style*="#00FFCE"],
.dark [style*="background-color: #00FFCE"] {
    background-color: #00ccaa !important;
}

/* White backgrounds */
.dark [style*="background-color: #fff"],
.dark [style*="background-color: #ffffff"],
.dark [style*="background-color:#fff"],
.dark [style*="background-color:#ffffff"] {
    background-color: #1e1e1e !important;
}

/* Text colors */
.dark [style*="color: #000"],
.dark [style*="color: #000000"],
.dark [style*="color:#000"],
.dark [style*="color:#000000"] {
    color: #ffffff !important;
}

/* Border colors */
.dark [style*="border-color"] {
    border-color: #4a5568 !important;
}

/* Gradient backgrounds */
.dark .gradient,
.dark [style*="background-image: linear-gradient"] {
    background-image: linear-gradient(
        to top,
        #1a1a2e 0%,
        #0d0d2b 35%,
        #0d0d2b 60%,
        #0d0d2b 100%
    ) !important;
}

/* Sky blue backgrounds */
.dark .bg-sky-400,
.dark [style*="background-image: linear-gradient"] {
    background: linear-gradient(to top right, #1a1a2e, #0d0d2b) !important;
}

/* Blue text colors */
.dark [style*="color: #000675"],
.dark .text-\[\#000675\] {
    color: #00ffce !important;
}

/* Green text */
.dark [style*="color: #00FFCE"],
.dark .text-green-400 {
    color: #00ccaa !important;
}

/* Button backgrounds */
.dark [style*="background-color"] {
    filter: brightness(0.9);
}

/* Images in dark mode - make them slightly brighter */
.dark img {
    opacity: 0.9;
    filter: brightness(0.95);
}

/* updatre container for chrome broser screen */
.container {
    @media (width >=96rem) {
        max-width: 90rem !important;
    }
}

.drop-shadow-salem {
    filter: drop-shadow(-10px 10px 20px #8494c1a9);
}

/* updatre container for chrome broser */