/* Add custom CSS styles below */ 
/* Import Fonts and Icons */
@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@300;400;700;800&display=swap');
@import url("https://site-assets.fontawesome.com/releases/v6.4.2/css/all.css");

body *:not(i) {
  font-family: 'Tajawal', sans-serif;
  Text-align: justify;
  font-size: 17px;

}
:root {
    --main-color: #646e34; /* اللون الرئيسي */
    --second-color: #e0d67f; /* اللون الثانوي */
    --white-color: #fff; /* اللون الأبيض */
    --normal-box-shadow: -8px 10px 15px -3px rgba(0,0,0,0.1);
    --secondary-text-color: #4a4a4a; /* لون النص الثانوي */
    --link-color: #646e34; /* لون الروابط */
}

/* Body and Header Styling */
body {
    background-color: rgba(249, 250, 251,1); /* لون الخلفية */
    color: var(--secondary-text-color);
}

/* Navbar Styling */
header.store-header {
    margin-bottom: 0px;
    background: transparent;
    background-size: cover;
}

.main-nav-container.fixed-header .inner {
    background: var(--white-color) !important; /* لون الخلفية */
    border-radius: 0px 0px 30px 30px;
    padding-top: 10px;
    box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px var(--main-color);
}

.top-navbar {
    padding-top: 15px;
    background-color: var(--main-color) !important; /* لون الشريط العلوي */

}

.top-navbar a {
    color: var(--white-color) !important; /* لون الروابط في الشريط العلوي */
}

button, .btn {
    background-color:#e0d67f  !important; /* تغيير لون الزر */
    color: #ffffff !important; /* تغيير لون النص */
    border-radius: 10px !important; /* تدوير الحواف */
    transition: all 0.3s ease-in-out !important; /* تأثير السلاسة */
}

button:hover, .btn:hover {
    background-color:#cc5500   !important; /* تغيير لون الزر عند المرور عليه */
    transform: scale(1.05) !important; /* تكبير بسيط */
}
button:visited, .btn:visited {
    background-color: #646e34  !important; /* تغيير لون الزر عند النقر عليه */
    transform: scale(1.05) !important; /* تكبير بسيط */
}
div#mainnav,
.inner.bg-inherit {
    background: var(--white-color) !important; /* لون الخلفية للقائمة */
}
.product-card {
    border-radius: 15px !important; /* تدوير الحواف */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1) !important; /* إضافة ظل */
    transition: transform 0.3s ease-in-out !important;
}

.product-card:hover {
    transform: translateY(-5px) !important; /* رفع البطاقة عند المرور */
}

.s-cart-summary-total {
    color: var(--main-color) !important; /* لون إجمالي السلة */
}

/* تحسين تحميل الصور عن طريق تفعيل "Lazy Loading" */
img {
    width: 100%;
    height: auto;
    loading: lazy;
}

/* تحسين سرعة التنقلات */
a {
    color: var(--link-color); /* لون الروابط المتناسقة */
    text-decoration: none;
    transition: color 0.2s ease;
}

a:hover {
    color: var(--second-color); /* لون الروابط عند التمرير */
    }
    @keyframes typing {
    from { width: 0; }
    to { width: 100%; }
}

h1, .hero-title {
    overflow: hidden;
    white-space: nowrap;
    border-right: 2px solid #ff6600;
    width: 100%;
    animation: typing 3s steps(30, end) infinite alternate;
}

    /* Footer Styling */
.footer-is-light .store-footer .store-footer__inner,
footer.store-footer .store-footer__inner {
    background-color: var(--main-color) !important; /* لون خلفية الفوتر */
    color: var(--white-color) !important; /* لون النص في الفوتر */
}

.footer-is-light .store-footer a,
footer.store-footer a {
    color: var(--second-color) !important; /* لون روابط الفوتر */
    text-decoration: none;
}

.footer-is-light .store-footer a:hover,
footer.store-footer a:hover {
    color: #e0e0e0 !important; /* لون روابط الفوتر عند التمرير */
}

@media (max-width: 768px) {
    .product-card {
        width: 100% !important; /* جعل المنتجات تمتد بعرض الشاشة */
    }

    .navbar {
        font-size: 14px !important; /* تصغير حجم الخط في القائمة */
    }
}/* Add custom CSS styles below */