/* ===========================
   Mobile Responsive
=========================== */

@media (max-width:768px){

.container{
    width:94%;
    max-width:100%;
    padding:15px;
}

.top-header{
    flex-direction:column;
    text-align:center;
    gap:15px;
}

.logo-box{
    flex-direction:column;
    gap:10px;
}

.logo{
    width:70px;
    height:70px;
}

.logo-box h1{
    font-size:20px;
}

.logo-box p{
    font-size:13px;
}

.date-box{
    text-align:center;
}

.today{
    font-size:13px;
}

.title{
    font-size:22px;
}

.card{
    padding:18px;
}

.landing-title{
    font-size:32px;
}

.landing-subtitle{
    font-size:18px;
}

.landing-text{
    font-size:14px;
    line-height:2;
}

.hero-info{
    display:flex;
    flex-direction:column;
    gap:15px;
}

.hero-card{
    width:100%;
}

.dashboard-grid{
    grid-template-columns:1fr;
}

.stats-grid{
    grid-template-columns:1fr;
}

.product{
    flex-direction:column;
    align-items:flex-start;
    gap:15px;
}

.qty{
    width:100%;
    justify-content:center;
}

.table{
    display:block;
    width:100%;
    overflow-x:auto;
    white-space:nowrap;
    font-size:13px;
}

.input{
    height:50px;
    font-size:15px;
}

.btn,
.landing-btn,
.landing-btn2{
    height:50px;
    font-size:15px;
}

.order-title{
    flex-direction:column;
    gap:10px;
    text-align:center;
}

.total-box{
    flex-direction:column;
    gap:10px;
    text-align:center;
}

.navbar{
    padding:12px;
}

.nav-left{
    justify-content:center;
    flex-wrap:wrap;
}

.footer{
    font-size:12px;
}

}

/* گوشی‌های کوچک */

@media (max-width:420px){

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

.logo{
    width:60px;
    height:60px;
}

.landing-logo img{
    width:90px;
}

.landing-title{
    font-size:28px;
}

.landing-subtitle{
    font-size:16px;
}

.hero-value{
    font-size:20px;
}

.hero-label{
    font-size:12px;
}

.card{
    padding:15px;
}

.welcome-card{
    padding:16px;
}

}