@font-face {
    font-family: 'Vazir';
    src: url('../fonts/Vazir-Thin.eot');
    src: url('../fonts/Vazir-Thin.eot?#iefix') format('embedded-opentype'),
         url('../fonts/Vazir-Thin.woff2') format('woff2'),
         url('../fonts/Vazir-Thin.woff') format('woff'),
         url('../fonts/Vazir-Thin.ttf') format('truetype');
    font-weight: 100;
    font-style: normal;
}

@font-face {
    font-family: 'Vazir';
    src: url('../fonts/Vazir-Light.eot');
    src: url('../fonts/Vazir-Light.eot?#iefix') format('embedded-opentype'),
         url('../fonts/Vazir-Light.woff2') format('woff2'),
         url('../fonts/Vazir-Light.woff') format('woff'),
         url('../fonts/Vazir-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'Vazir';
    src: url('../fonts/Vazir.eot');
    src: url('../fonts/Vazir.eot?#iefix') format('embedded-opentype'),
         url('../fonts/Vazir.woff2') format('woff2'),
         url('../fonts/Vazir.woff') format('woff'),
         url('../fonts/Vazir.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Vazir';
    src: url('../fonts/Vazir-Medium.eot');
    src: url('../fonts/Vazir-Medium.eot?#iefix') format('embedded-opentype'),
         url('../fonts/Vazir-Medium.woff2') format('woff2'),
         url('../fonts/Vazir-Medium.woff') format('woff'),
         url('../fonts/Vazir-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'Vazir';
    src: url('../fonts/Vazir-Bold.eot');
    src: url('../fonts/Vazir-Bold.eot?#iefix') format('embedded-opentype'),
         url('../fonts/Vazir-Bold.woff2') format('woff2'),
         url('../fonts/Vazir-Bold.woff') format('woff'),
         url('../fonts/Vazir-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
}

body {
    font-family: 'Vazir', 'Tahoma', sans-serif;
}

/* User Profile Dropdown Animation */
.user-profile-container {
    
}

.user-profile-dropdown {
    opacity: 0;
    transform: translateY(-10px) scale(0.95);
    pointer-events: none;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.user-profile-container:hover .user-profile-dropdown {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: all;
}

.user-profile-dropdown-item {
    transform: translateX(0);
    will-change: transform;
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.3s ease, color 0.3s ease !important;
}

.user-profile-dropdown-item:hover {
    transform: translateX(-5px) !important;
}

/* Notification Dropdown Animation */
.notification-container {
    
}

.notification-dropdown {
    opacity: 0;
    transform: translateY(-10px) scale(0.95);
    pointer-events: none;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.notification-container:hover .notification-dropdown {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: all;
}

.notification-item {
    transform: translateX(0);
    will-change: transform;
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.3s ease, color 0.3s ease !important;
}

.notification-item:hover {
    transform: translateX(-5px) !important;
}

.notification-badge {
    position: absolute;
    top: 0;
    right: 0;
    width: 8px;
    height: 8px;
    background-color: #ef4444;
    border-radius: 50%;
    border: 2px solid white;
}

/* Sidebar Menu Items Animation */
.sidebar-menu-item {
    transform: translateX(0);
    will-change: transform;
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.3s ease, color 0.3s ease !important;
}

.sidebar-menu-item:hover {
    transform: translateX(-5px) !important;
}

.sidebar-menu-item.active {
    background-color: rgba(255, 255, 255, 0.1) !important;
    border-right: 3px solid white;
}

.sidebar-menu-item.active:hover {
    background-color: rgba(255, 255, 255, 0.15) !important;
}

/* Breadcrumb Animation */
.breadcrumb-item {
    transition: all 0.2s ease;
}

.breadcrumb-item:hover {
    transform: translateY(-1px);
}