/* Custom Fonts */
@font-face {
    font-family: 'Foundry Gridnik';
    src: url('../fonts/Foundry Gridnik/FoundryGridnik-Regular.woff2') format('woff2'),
         url('../fonts/Foundry Gridnik/FoundryGridnik-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Foundry Gridnik';
    src: url('../fonts/Foundry Gridnik/FoundryGridnik-Bold.woff2') format('woff2'),
         url('../fonts/Foundry Gridnik/FoundryGridnik-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
}
@font-face {
    font-family: 'DIN Next LT Arabic';
    src: url('../fonts/DIN Next LT Arabic/DINNextLTArabic-Light.woff2') format('woff2'),
         url('../fonts/DIN Next LT Arabic/DINNextLTArabic-Light.woff') format('woff');
    font-weight: 300;
    font-style: normal;
}
@font-face {
    font-family: 'DIN Next LT Arabic';
    src: url('../fonts/DIN Next LT Arabic/DINNextLTArabic-Bold.woff2') format('woff2'),
         url('../fonts/DIN Next LT Arabic/DINNextLTArabic-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
}

body {
    font-family: 'Foundry Gridnik' !important;
    direction: ltr;
}
html[lang="ar"] body {
    font-family: 'DIN Next LT Arabic' !important;
    direction: rtl;
}

/* --- Modern Welcome Page Animations & Theme Colors --- */
:root {
    --black: #000000;
    --black-c75: #636466;
    --black-c35: #B1B3B6;
}

body {
    background: var(--black);
    color: var(--black-c35);
}

h1, h2, h3, h4, h5, h6 {
    color: var(--black-c35);
    letter-spacing: 0.01em;
}

.card {
    background: rgba(24, 24, 24, 0.95);
    border: none;
    border-radius: 1.5rem;
    box-shadow: 0 8px 32px 0 rgba(0,0,0,0.25);
    color: var(--black-c35);
}

.btn-primary, .btn-outline-dark {
    background: var(--black-c75);
    color: #fff;
    border: none;
    border-radius: 0.5rem;
    padding: 0.75rem 2rem;
    font-weight: 600;
    transition: background 0.3s, transform 0.2s, box-shadow 0.2s;
}
.btn-primary:hover, .btn-outline-dark:hover {
    background: var(--black-c35);
    color: var(--black);
    transform: translateY(-2px) scale(1.04);
    box-shadow: 0 4px 24px 0 rgba(177,179,182,0.15);
}

img.animated-img {
    border-radius: 1.25rem;
    box-shadow: 0 4px 32px 0 rgba(0,0,0,0.18);
    transition: transform 0.4s cubic-bezier(.4,2,.6,1), box-shadow 0.3s;
}
img.animated-img:hover {
    transform: scale(1.045) rotate(-1deg);
    box-shadow: 0 8px 48px 0 rgba(177,179,182,0.18);
}

.fade-in {
    opacity: 0;
    animation: fadeIn 1.2s ease-out forwards;
}
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.slide-up {
    opacity: 0;
    transform: translateY(40px);
    animation: slideUp 1.1s cubic-bezier(.4,2,.6,1) forwards;
}
@keyframes slideUp {
    from { opacity: 0; transform: translateY(40px); }
    to { opacity: 1; transform: translateY(0); }
}

.zoom-in {
    opacity: 0;
    transform: scale(0.92);
    animation: zoomIn 1.1s cubic-bezier(.4,2,.6,1) forwards;
}
@keyframes zoomIn {
    from { opacity: 0; transform: scale(0.92); }
    to { opacity: 1; transform: scale(1); }
}

/* Responsive tweaks */
@media (max-width: 991px) {
    .welcome-main {
        flex-direction: column !important;
        gap: 2rem;
    }
    .welcome-card, .welcome-images {
        max-width: 100% !important;
        margin: 0 auto !important;
    }
}
@media (max-width: 575px) {
    .card {
        border-radius: 1rem;
        padding: 1rem;
    }
    .welcome-images img {
        border-radius: 0.75rem;
    }
}

footer {
    color: var(--black-c75) !important;
    font-size: 1rem;
    letter-spacing: 0.02em;
    background: transparent;
    border: none;
}