html{
    font-size:16px;
    }
    
    img{
    max-width:100%;
    height:auto;
    }
    
    table{
    width:100%;
    }
    
    .container{
    width:90%;
    max-width:1400px;
    margin:auto;
    }
    
    @media(max-width:1400px){
    
    .container{
    max-width:1200px;
    }
    
    .hero h1{
    font-size:52px;
    }
    
    .cards{
    grid-template-columns:repeat(3,1fr);
    }
    
    .stats-grid{
    grid-template-columns:repeat(3,1fr);
    }
    
    .dashboard-grid{
    grid-template-columns:2fr 1fr;
    }
    
    .product-grid{
    grid-template-columns:repeat(3,1fr);
    }
    
    .shop-grid{
    grid-template-columns:repeat(3,1fr);
    }
    
    .pricing-grid{
    grid-template-columns:repeat(3,1fr);
    }
    
    .feature-grid{
    grid-template-columns:repeat(3,1fr);
    }
    
    .customer-grid{
    grid-template-columns:repeat(3,1fr);
    }
    
    .qr-container{
    grid-template-columns:repeat(2,1fr);
    }
    
    .checkout-grid{
    grid-template-columns:2fr 1fr;
    }
    
    .invoice{
    max-width:1000px;
    }
    
    }
    
    @media(max-width:1200px){
    
    .container{
    width:95%;
    }
    
    .sidebar{
    width:85px;
    }
    
    .sidebar .logo span,
    .sidebar .menu span{
    display:none;
    }
    
    .main{
    margin-left:85px;
    }
    
    .topbar{
    padding:0 20px;
    }
    
    .hero h1{
    font-size:44px;
    }
    
    .hero-container{
    gap:40px;
    }
    
    .cards{
    grid-template-columns:repeat(2,1fr);
    }
    
    .stats-grid{
    grid-template-columns:repeat(2,1fr);
    }
    
    .dashboard-grid{
    grid-template-columns:1fr;
    }
    
    .chart-card,
    .analytics-card,
    .sales-card,
    .activity-card{
    width:100%;
    }
    
    .product-grid{
    grid-template-columns:repeat(2,1fr);
    }
    
    .shop-grid{
    grid-template-columns:repeat(2,1fr);
    }
    
    .customer-grid{
    grid-template-columns:repeat(2,1fr);
    }
    
    .feature-grid{
    grid-template-columns:repeat(2,1fr);
    }
    
    .pricing-grid{
    grid-template-columns:repeat(2,1fr);
    }
    
    .testimonial-grid{
    grid-template-columns:repeat(2,1fr);
    }
    
    .performance-grid{
    grid-template-columns:repeat(2,1fr);
    }
    
    .product-details{
    grid-template-columns:280px 1fr;
    }
    
    .checkout-grid{
    grid-template-columns:1fr;
    }
    
    .invoice-details{
    grid-template-columns:1fr 1fr;
    }
    
    .modal-content{
    max-width:90%;
    }
    
    .table-card{
    overflow-x:auto;
    }
    
    .table-card table{
    min-width:900px;
    }
    
    }
    @media(max-width:992px){

        .sidebar{
        left:-260px;
        width:260px;
        z-index:1200;
        }
        
        .sidebar.show{
        left:0;
        }
        
        .sidebar .logo span,
        .sidebar .menu span{
        display:inline;
        }
        
        .main{
        margin-left:0;
        }
        
        .menu-toggle{
        display:block;
        }
        
        .nav-links{
        display:none;
        }
        
        .topbar{
        height:auto;
        padding:15px 20px;
        flex-wrap:wrap;
        gap:15px;
        }
        
        .page-header{
        flex-direction:column;
        align-items:flex-start;
        }
        
        .hero{
        padding:120px 0 70px;
        }
        
        .hero-container,
        .about-grid{
        grid-template-columns:1fr;
        text-align:center;
        }
        
        .hero-buttons{
        justify-content:center;
        }
        
        .hero-image{
        margin:auto;
        }
        
        .hero-stats{
        grid-template-columns:repeat(2,1fr);
        }
        
        .cards,
        .stats-grid,
        .product-grid,
        .shop-grid,
        .customer-grid,
        .feature-grid,
        .pricing-grid,
        .testimonial-grid,
        .performance-grid,
        .payment-grid,
        .qr-container{
        grid-template-columns:repeat(2,1fr);
        }
        
        .quick-actions{
        grid-template-columns:repeat(2,1fr);
        }
        
        .product-details{
        grid-template-columns:1fr;
        }
        
        .invoice-details{
        grid-template-columns:1fr;
        }
        
        .form-grid,
        .modal-grid{
        grid-template-columns:1fr;
        }
        
        .filter-container{
        flex-wrap:wrap;
        }
        
        .search-box{
        width:100%;
        }
        
        .table-card{
        overflow-x:auto;
        }
        
        .table-card table,
        .cart-table,
        .invoice-table{
        min-width:850px;
        }
        
        .checkout-grid{
        grid-template-columns:1fr;
        }
        
        .footer-links{
        justify-content:center;
        }
        
        }
        
        /*==============================*/
        
        @media(max-width:768px){
        
        body{
        font-size:15px;
        }
        
        .content{
        padding:18px;
        }
        
        .topbar{
        flex-direction:column;
        align-items:flex-start;
        }
        
        .profile{
        width:100%;
        justify-content:space-between;
        }
        
        .page-header{
        gap:12px;
        }
        
        .page-header h1{
        font-size:28px;
        }
        
        .hero h1{
        font-size:36px;
        }
        
        .hero p{
        font-size:15px;
        }
        
        .hero-buttons{
        flex-direction:column;
        align-items:center;
        }
        
        .hero-stats{
        grid-template-columns:1fr 1fr;
        gap:15px;
        }
        
        .cards,
        .stats-grid,
        .dashboard-grid,
        .product-grid,
        .shop-grid,
        .customer-grid,
        .feature-grid,
        .pricing-grid,
        .testimonial-grid,
        .performance-grid,
        .payment-grid,
        .quick-actions,
        .qr-container{
        grid-template-columns:1fr;
        }
        
        .filter-container{
        flex-direction:column;
        align-items:stretch;
        }
        
        .search-box,
        .filter-container input,
        .filter-container select{
        width:100%;
        }
        
        .products-header,
        .dashboard-header,
        .products-actions{
        flex-direction:column;
        align-items:flex-start;
        }
        
        .product-footer{
        flex-direction:column;
        }
        
        .product-footer button{
        width:100%;
        }
        
        .modal-content{
        padding:20px;
        }
        
        .modal-footer{
        justify-content:center;
        flex-wrap:wrap;
        }
        
        .invoice{
        padding:25px;
        }
        
        .receipt{
        max-width:100%;
        }
        
        .summary-row,
        .summary-total{
        font-size:15px;
        }
        
        .footer{
        padding:40px 20px;
        }
        
        .footer-links{
        flex-direction:column;
        gap:12px;
        }
        
        }
        @media(max-width:576px){

            html{
            font-size:14px;
            }
            
            .container{
            width:95%;
            }
            
            .content{
            padding:15px;
            }
            
            .topbar{
            padding:15px;
            gap:12px;
            }
            
            .page-header h1{
            font-size:24px;
            }
            
            .page-header p{
            font-size:13px;
            }
            
            .hero{
            padding:100px 0 50px;
            }
            
            .hero h1{
            font-size:30px;
            line-height:1.3;
            }
            
            .hero p{
            font-size:14px;
            }
            
            .hero-buttons{
            gap:12px;
            }
            
            .hero-buttons .primary-btn,
            .hero-buttons .secondary-btn{
            width:100%;
            justify-content:center;
            }
            
            .hero-stats{
            grid-template-columns:1fr;
            }
            
            .card,
            .chart-card,
            .analytics-card,
            .sales-card,
            .activity-card,
            .orders-card,
            .summary-box,
            .customer-card,
            .product-card,
            .payment-card,
            .checkout-card,
            .modal-content{
            padding:18px;
            }
            
            .card h2{
            font-size:28px;
            }
            
            .section-title h2{
            font-size:28px;
            }
            
            .section-title p{
            font-size:14px;
            }
            
            .product-image{
            height:200px;
            }
            
            .product-title{
            font-size:18px;
            }
            
            .product-price{
            font-size:24px;
            }
            
            .invoice{
            padding:18px;
            }
            
            .invoice-header{
            flex-direction:column;
            align-items:flex-start;
            gap:15px;
            }
            
            .invoice-table th,
            .invoice-table td{
            padding:10px;
            font-size:13px;
            }
            
            .receipt{
            padding:18px;
            font-size:13px;
            }
            
            .table-card table,
            .cart-table,
            .invoice-table{
            min-width:700px;
            }
            
            .modal-header{
            flex-direction:column;
            align-items:flex-start;
            gap:10px;
            }
            
            .modal-footer{
            flex-direction:column;
            }
            
            .modal-footer button{
            width:100%;
            }
            
            .profile img{
            width:42px;
            height:42px;
            }
            
            .profile h4{
            font-size:14px;
            }
            
            .footer{
            padding:30px 15px;
            }
            
            .footer h2{
            font-size:22px;
            }
            
            .footer p{
            font-size:14px;
            }
            
            }
            
            /*==============================*/
            
            @media(max-width:480px){
            
            html{
            font-size:13px;
            }
            
            .logo{
            font-size:20px;
            }
            
            .logo i{
            font-size:24px;
            }
            
            .page-header h1{
            font-size:22px;
            }
            
            .hero h1{
            font-size:26px;
            }
            
            .hero p{
            font-size:13px;
            }
            
            .primary-btn,
            .secondary-btn,
            .danger-btn{
            width:100%;
            padding:12px;
            font-size:14px;
            }
            
            .icon{
            width:40px;
            height:40px;
            font-size:16px;
            }
            
            .card-icon{
            width:55px;
            height:55px;
            font-size:22px;
            }
            
            .card h2{
            font-size:24px;
            }
            
            .summary-box h2,
            .customer-card h3,
            .performance-card h2{
            font-size:28px;
            }
            
            .chart-box{
            height:220px;
            }
            
            .product-image{
            height:180px;
            }
            
            .product-footer{
            gap:8px;
            }
            
            .product-footer button{
            padding:10px;
            font-size:13px;
            }
            
            .search-box input,
            .filter-container input,
            .filter-container select{
            height:42px;
            font-size:13px;
            }
            
            .form-group input,
            .form-group textarea,
            .form-group select{
            padding:12px;
            font-size:13px;
            }
            
            .qr-preview{
            width:180px;
            height:180px;
            }
            
            .scan-box{
            height:220px;
            }
            
            .notification-item{
            padding:15px;
            }
            
            .notification-item i{
            width:42px;
            height:42px;
            font-size:18px;
            }
            
            .timeline{
            padding-left:25px;
            }
            
            .timeline-item::before{
            left:-24px;
            width:14px;
            height:14px;
            }
            
            .close{
            width:36px;
            height:36px;
            font-size:18px;
            }
            
            }
            @media(max-height:700px){

                .sidebar{
                overflow-y:auto;
                }
                
                .topbar{
                position:static;
                }
                
                .hero{
                padding:80px 0 40px;
                }
                
                }
                
                /*==============================*/
                
                @media(max-width:900px) and (orientation:landscape){
                
                .hero{
                padding:90px 0 50px;
                }
                
                .hero-container,
                .about-grid{
                grid-template-columns:1fr;
                }
                
                .cards,
                .stats-grid,
                .feature-grid,
                .product-grid,
                .shop-grid{
                grid-template-columns:repeat(2,1fr);
                }
                
                .dashboard-grid{
                grid-template-columns:1fr;
                }
                
                }
                
                /*==============================*/
                
                @media(min-width:1600px){
                
                .container{
                max-width:1500px;
                }
                
                .cards{
                grid-template-columns:repeat(4,1fr);
                }
                
                .stats-grid{
                grid-template-columns:repeat(4,1fr);
                }
                
                .product-grid{
                grid-template-columns:repeat(5,1fr);
                }
                
                .shop-grid{
                grid-template-columns:repeat(5,1fr);
                }
                
                .customer-grid{
                grid-template-columns:repeat(4,1fr);
                }
                
                .feature-grid{
                grid-template-columns:repeat(4,1fr);
                }
                
                .dashboard-grid{
                grid-template-columns:2.5fr 1fr;
                }
                
                }
                
                /*==============================*/
                
                .hide-mobile{
                display:block;
                }
                
                .show-mobile{
                display:none;
                }
                
                @media(max-width:768px){
                
                .hide-mobile{
                display:none!important;
                }
                
                .show-mobile{
                display:block!important;
                }
                
                .mobile-center{
                text-align:center;
                }
                
                .mobile-full{
                width:100%;
                }
                
                .mobile-stack{
                display:flex;
                flex-direction:column;
                gap:15px;
                }
                
                }
                
                /*==============================*/
                
                @media print{
                
                body{
                background:#fff!important;
                color:#000!important;
                }
                
                .sidebar,
                .topbar,
                .footer,
                .pagination,
                .filter-container,
                .primary-btn,
                .secondary-btn,
                .danger-btn,
                .action-btn,
                .menu-toggle,
                .modal{
                display:none!important;
                }
                
                .main{
                margin:0!important;
                }
                
                .content{
                padding:0!important;
                }
                
                .table-card,
                .invoice,
                .receipt{
                box-shadow:none!important;
                border:none!important;
                }
                
                table{
                width:100%;
                border-collapse:collapse;
                }
                
                th,
                td{
                border:1px solid #000;
                padding:8px;
                }
                
                }
                
                /*==============================*/
                
                .text-truncate{
                overflow:hidden;
                white-space:nowrap;
                text-overflow:ellipsis;
                }
                
                .overflow-auto{
                overflow:auto;
                }
                
                .overflow-hidden{
                overflow:hidden;
                }
                
                .d-none{
                display:none!important;
                }
                
                .d-block{
                display:block!important;
                }
                
                .d-flex{
                display:flex!important;
                }
                
                .align-center{
                align-items:center;
                }
                
                .justify-center{
                justify-content:center;
                }
                
                .justify-between{
                justify-content:space-between;
                }
                
                .flex-column{
                flex-direction:column;
                }
                
                .flex-wrap{
                flex-wrap:wrap;
                }
                
                .w-100{
                width:100%;
                }
                
                .h-100{
                height:100%;
                }
                
                .mx-auto{
                margin-left:auto;
                margin-right:auto;
                }
                
                .round{
                border-radius:50%;
                }
                
                .shadow-sm{
                box-shadow:0 4px 10px rgba(0,0,0,.08);
                }
                
                .shadow-md{
                box-shadow:0 10px 25px rgba(0,0,0,.12);
                }
                
                .shadow-lg{
                box-shadow:0 20px 40px rgba(0,0,0,.18);
                }
                
                .fade{
                animation:fadeIn .4s ease;
                }
                
                .scale{
                animation:scaleIn .3s ease;
                }
                
                .rotate:hover{
                transform:rotate(10deg);
                }
                
                .zoom:hover{
                transform:scale(1.05);
                transition:.3s;
                }
                
                .slide:hover{
                transform:translateY(-6px);
                transition:.3s;
                }
                
                .pointer{
                cursor:pointer;
                }
                
                .select-none{
                user-select:none;
                }
                
                .border{
                border:1px solid var(--border);
                }
                
                .border-0{
                border:none;
                }
                
                .bg-white{
                background:#fff;
                }
                
                .bg-primary{
                background:var(--primary);
                color:#fff;
                }
                
                .text-primary{
                color:var(--primary);
                }
                
                .text-success{
                color:var(--success);
                }
                
                .text-danger{
                color:var(--danger);
                }
                
                .text-warning{
                color:var(--warning);
                }
                
                .text-muted{
                color:var(--gray);
                }