/* --- 1. Base Styles (Mobile Default) --- */
body {
    direction: rtl;
    font-size: 16px;
    background-color: white;
    font-family: 'Vazirmatn', sans-serif;
}

.logo-header{
    width: 20px;
}
.sidebar {
    display: none; /* Hidden on mobile */
}

.container {
    width: 100%;
    padding: 10px;
}

/* --- 2. Tablet Breakpoint --- */
@media (min-width: 500px) {
    body{
        background-color: white;
        font-family: 'Vazirmatn', sans-serif;
    }
    .container {
        width: 80%;
        margin: 0 auto;
    }
}

/* --- 3. Desktop Breakpoint --- */
@media (min-width: 1024px) {
    body {
        font-size: 18px; /* Larger text for desktop */
        background-color: #f0f0f0;
        font-family: 'Vazirmatn', sans-serif;
    }

    .sidebar {
        display: block; /* Show sidebar on desktop */
        width: 25%;
        float: left;
    }
    
    .container {
        width: 75%;
        float: right;
    }
}