@font-face {
    font-family: 'Cairo';
    src: url('../cairo/static/Cairo-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Cairo';
    src: url('../cairo/static/Cairo-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Cairo';
    src: url('../cairo/static/Cairo-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

:root {
    --ds-primary: #0d6efd;
}

.filter-white { filter: brightness(0) invert(1); }


body {
    font-family: 'Cairo', sans-serif;
    min-height: 100vh;
}

.hover-shadow {
    transition: transform 0.2s, box-shadow 0.2s;
}

.hover-shadow:hover {
    transform: translateY(-3px);
    box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.15) !important;
}

.min-vh-50 {
    min-height: 50vh;
}

.text-truncate-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

[dir="rtl"] .me-auto {
    margin-right: 0 !important;
    margin-left: auto !important;
}

[dir="rtl"] .me-2 {
    margin-right: 0 !important;
    margin-left: 0.5rem !important;
}

[dir="rtl"] .me-3 {
    margin-right: 0 !important;
    margin-left: 1rem !important;
}

[dir="rtl"] .ms-2 {
    margin-left: 0 !important;
    margin-right: 0.5rem !important;
}

.card-img-top {
    width: 100%;
}

.hero-section {
    background: linear-gradient(135deg, var(--ds-primary) 0%, #0a58ca 100%);
}

@media (max-width: 991.98px) {
    .display-4 { font-size: 1.8rem; }
    .hero-section .btn-lg { font-size: 0.9rem; padding: 0.5rem 1rem; }
    
    /* Hide footer on mobile/tablet ONLY if feature is enabled */
    body.mobile-nav-enabled footer { display: none !important; }
    
    /* Add padding to body ONLY if feature is enabled */
    body.mobile-nav-enabled { padding-bottom: 70px !important; }
}

.mobile-bottom-nav {
    height: 65px;
    transition: transform 0.3s ease-in-out;
}

.mobile-bottom-nav a.active {
    color: var(--ds-primary) !important;
}

.mobile-bottom-nav i {
    line-height: 1;
}

.z-3 { z-index: 1030; }