*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:'Vazirmatn',sans-serif;
    scroll-behavior:smooth;
    }
    
    body{
    background:#f7f6f3;
    color:#222;
    transition:.4s;
    }
    
    .navbar{
    background:#103d35;
    padding:15px;
    }
    
    .navbar-brand{
    font-size:28px;
    font-weight:bold;
    }
    
    .nav-link{
    color:#fff !important;
    margin:0 10px;
    transition:.3s;
    border-bottom:2px solid transparent;
    }
    
    .nav-link:hover,
    .nav-link.active{
    color:#ffd54f !important;
    border-color:#ffd54f;
    }
    
    .hero{
    padding:150px 0 100px;
    background:#efe8dd;
    overflow:hidden;
    }
    
    .hero-text{
    animation:heroText 1.3s ease;
    }
    
    @keyframes heroText{
    
    from{
    
    opacity:0;
    transform:translateX(-120px);
    
    }
    
    to{
    
    opacity:1;
    transform:translateX(0);
    
    }
    
    }
    
    .hero img{
    
    border-radius:20px;
    
    box-shadow:0 15px 35px rgba(0,0,0,.2);
    
    }
    .slider-img{

        height:420px;
        
        object-fit:cover;
        
        }
        
        .category-card{
        
        background:white;
        
        padding:30px;
        
        border-radius:15px;
        
        transition:.4s;
        
        cursor:pointer;
        
        box-shadow:0 5px 15px rgba(0,0,0,.1);
        
        }
        
        .category-card:hover{
        
        transform:translateY(-10px);
        
        background:#103d35;
        
        color:white;
        
        }
        
        .product-card{
        
        transition:.4s;
        
        overflow:hidden;
        
        }
        
        .product-card img{
        
        height:220px;
        
        object-fit:cover;
        
        }
        
        .product-card:hover{
        
        transform:translateY(-8px);
        
        box-shadow:0 12px 25px rgba(0,0,0,.2);
        
        }
        
        .price{
        
        color:#0f8b5f;
        
        font-weight:bold;
        
        }
        footer{

            background:#103d35;
            
            color:white;
            
            padding:50px 0;
            
            margin-top:70px;
            
            }
            
            .counter{
            
            font-size:55px;
            
            font-weight:bold;
            
            color:#0f8b5f;
            
            }
            
            .dark{
            
            background:#111;
            
            color:white;
            
            }
            
            .dark .card{
            
            background:#222;
            
            color:white;
            
            }
            
            .dark .hero{
            
            background:#1b1b1b;
            
            }
            
            .dark .navbar{
            
            background:#000;
            
            }
            
            @media(max-width:768px){
            
            .hero{
            
            text-align:center;
            
            padding-top:120px;
            
            }
            
            .slider-img{
            
            height:220px;
            
            }
            
            .hero h1{
            
            font-size:32px;
            
            }
            
            }