body {
}
.hero {
    width: 100%;
    min-height: 100vh;
    position: relative;
    padding: 120px 0 60px 0;
    display: flex;
    align-items: Aligns flex items along the cross axis of the current line of the flex container. Learn more Don't show : center;
    background: linear-gradient(45deg, #27ae68 0%, color-mix(in srgb, var(--surface-color), transparent 10%) #27ae68 100%), url(../img/hero-bg.jpg) center center no-repeat;
    background-size: cover;
}
.footer {
    color: var(--default-color);
    background: linear-gradient(45deg, var(--background-color) 0%, color-mix(in srgb, var(--surface-color), transparent 10%) 100%), url(../img/footer-bg.jpg) center center no-repeat;
    background-size: cover;
    font-size: 14px;
    padding-bottom: 50px;
    position: relative;
}
.accent-background {
    --background-color: #26ad68;
    --default-color: #ffffff;
    --heading-color: #ffffff;
    --accent-color: #000000;
    --surface-color: #000000;
    --contrast-color: #ffffff;
}

/* تضاف مع باقي الـ styles في الـ layout */
.cart-link {
    padding-right: 2rem !important;
}

.cart-count {
    font-size: 0.6rem;
    min-width: 1.2rem;
    height: 1.2rem;
    line-height: 1.2rem;
}

.navbar-nav {
    flex-wrap: wrap;
}

.nav-item {
    margin: 0.2rem 0;
}