.elementor-12 .elementor-element.elementor-element-be91a87{--display:flex;}/* Start custom CSS for html, class: .elementor-element-5525231 *//* ============================================================
   🎨 تحفة فنية - إضافات CSS متقدمة
   ============================================================ */

/* ------------------------------------------
   1. تأثيرات الخلفية العامة
------------------------------------------ */
body {
    background: linear-gradient(180deg, #f5f7fb 0%, #eef2f8 100%);
    background-attachment: fixed;
}

/* ------------------------------------------
   2. الهيدر - تأثير زجاجي أنيق
------------------------------------------ */
header {
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(200, 164, 92, 0.15);
}

/* ------------------------------------------
   3. اللوجو - تأثير حركي ثلاثي الأبعاد
------------------------------------------ */
.logo-wrapper img {
    transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
    filter: drop-shadow(0 8px 30px rgba(0, 0, 0, 0.08));
}
.logo-wrapper img:hover {
    transform: scale(1.05) rotate(-2deg);
    filter: drop-shadow(0 12px 40px rgba(200, 164, 92, 0.25));
}

/* ------------------------------------------
   4. الهيرو - تأثيرات خلفية متحركة (بارالاكس خفيف)
------------------------------------------ */
.hero {
    background: linear-gradient(145deg, #0a1628 0%, #1a2f4a 40%, #0a1628 100%);
    position: relative;
    overflow: hidden;
}
.hero::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(ellipse at 30% 50%, rgba(200, 164, 92, 0.04) 0%, transparent 60%);
    animation: heroGlow 15s ease-in-out infinite alternate;
    z-index: 0;
}
@keyframes heroGlow {
    0% { transform: translate(0, 0) scale(1); opacity: 0.6; }
    100% { transform: translate(10%, 5%) scale(1.2); opacity: 1; }
}

/* أيقونات الخلفية - تأثير عائم */
.hero .bg-icon {
    animation: floatIcon 8s ease-in-out infinite;
    transition: all 0.3s;
}
.hero .bg-icon:nth-child(2) { animation-delay: 2s; }
.hero .bg-icon:nth-child(3) { animation-delay: 4s; }
.hero .bg-icon:nth-child(4) { animation-delay: 1.5s; }
.hero .bg-icon:nth-child(5) { animation-delay: 3.5s; }

@keyframes floatIcon {
    0%, 100% { transform: translateY(0) rotate(var(--rot, 0deg)); }
    50% { transform: translateY(-15px) rotate(var(--rot, 0deg)); }
}

/* ------------------------------------------
   5. البطاقات - تأثيرات راقية
------------------------------------------ */
.why-card,
.product-card,
.cert-item {
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    position: relative;
}

/* تأثير وهج عند التمرير */
.why-card::after,
.product-card::after,
.cert-item::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: inherit;
    background: linear-gradient(135deg, rgba(200, 164, 92, 0.05), transparent 60%);
    opacity: 0;
    transition: opacity 0.6s ease;
    pointer-events: none;
}
.why-card:hover::after,
.product-card:hover::after,
.cert-item:hover::after {
    opacity: 1;
}

/* ------------------------------------------
   6. المنتجات - إطار ذهبي متوهج
------------------------------------------ */
.product-card {
    position: relative;
    overflow: hidden;
}
.product-card::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: linear-gradient(135deg, #c8a45c, #f0d080, #c8a45c);
    background-size: 300% 300%;
    border-radius: 26px;
    z-index: -1;
    opacity: 0;
    transition: opacity 0.6s ease;
    animation: shimmerBorder 3s ease-in-out infinite;
}
.product-card:hover::before {
    opacity: 1;
}
@keyframes shimmerBorder {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* صورة المنتج - تكبير أنيق */
.product-card .product-image img {
    transition: all 0.7s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.product-card:hover .product-image img {
    transform: scale(1.08) rotate(-1deg);
}

/* ------------------------------------------
   7. الأزرار - تأثيرات نبضية
------------------------------------------ */
.btn-primary,
.btn-buy,
.btn-whatsapp,
.btn-whatsapp-large {
    position: relative;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.btn-primary::after,
.btn-buy::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.2) 0%, transparent 60%);
    opacity: 0;
    transition: opacity 0.6s ease;
    transform: scale(0.5);
}
.btn-primary:hover::after,
.btn-buy:hover::after {
    opacity: 1;
    transform: scale(1);
}

/* زر "تصفح جميع المنتجات" - تأثير مميز */
.btn-browse {
    position: relative;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.btn-browse::before {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 54px;
    padding: 2px;
    background: linear-gradient(135deg, #c8a45c, #f0d080, #c8a45c);
    background-size: 300% 300%;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0;
    transition: opacity 0.6s ease;
    animation: shimmerBorder 3s ease-in-out infinite;
}
.btn-browse:hover::before {
    opacity: 1;
}
.btn-browse:hover {
    transform: translateY(-4px) scale(1.02);
    box-shadow: 0 12px 40px rgba(200, 164, 92, 0.25);
}

/* ------------------------------------------
   8. شارات وبادجات - تأثيرات لامعة
------------------------------------------ */
.hero-badge,
.hero-direct-badge,
.factory-badge,
.establish-date {
    position: relative;
    overflow: hidden;
}
.hero-badge::after,
.factory-badge::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.15), transparent);
    transform: rotate(30deg) translateX(-100%);
    transition: transform 0.8s ease;
}
.hero-badge:hover::after,
.factory-badge:hover::after {
    transform: rotate(30deg) translateX(100%);
}

/* ------------------------------------------
   9. الإحصائيات - أرقام متحركة (تأثير عدّاد)
------------------------------------------ */
.hero-stats .number {
    display: inline-block;
    transition: all 0.3s ease;
}
.hero-stats div:hover .number {
    transform: scale(1.1);
    color: #f0d080;
}

/* ------------------------------------------
   10. الفوتر - تأثيرات راقية
------------------------------------------ */
footer {
    position: relative;
}
footer::before {
    content: '';
    position: absolute;
    top: -4px;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, transparent, #c8a45c, #f0d080, #c8a45c, transparent);
    background-size: 300% 100%;
    animation: shimmerLine 4s ease-in-out infinite;
}
@keyframes shimmerLine {
    0% { background-position: 0% 0%; }
    50% { background-position: 100% 0%; }
    100% { background-position: 0% 0%; }
}

/* اللوجو في الفوتر - إطار متوهج */
.footer-logo .logo-frame {
    position: relative;
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.footer-logo .logo-frame:hover {
    transform: scale(1.05) rotate(-2deg);
    box-shadow: 0 8px 35px rgba(200, 164, 92, 0.3);
}
.footer-logo .logo-frame::after {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 18px;
    background: linear-gradient(135deg, #c8a45c, #f0d080, #c8a45c);
    background-size: 300% 300%;
    z-index: -1;
    opacity: 0;
    transition: opacity 0.6s ease;
    animation: shimmerBorder 3s ease-in-out infinite;
}
.footer-logo .logo-frame:hover::after {
    opacity: 1;
}

/* ------------------------------------------
   11. روابط الفوتر - حركة أنيقة
------------------------------------------ */
.footer-grid a {
    position: relative;
    transition: all 0.4s ease;
}
.footer-grid a::before {
    content: '›';
    position: absolute;
    right: -20px;
    opacity: 0;
    color: #c8a45c;
    transition: all 0.4s ease;
}
.footer-grid a:hover {
    padding-right: 25px;
    color: #c8a45c;
}
.footer-grid a:hover::before {
    opacity: 1;
    right: 0;
}

/* ------------------------------------------
   12. أيقونات التواصل الاجتماعي
------------------------------------------ */
.social-footer a {
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.social-footer a:hover {
    transform: translateY(-6px) scale(1.1);
    box-shadow: 0 8px 25px rgba(200, 164, 92, 0.3);
}

/* ------------------------------------------
   13. شهادات الجودة - أيقونات متحركة
------------------------------------------ */
.cert-item .icon {
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.cert-item:hover .icon {
    transform: scale(1.2) rotate(-5deg);
}

/* ------------------------------------------
   14. أقسام من نحن - تأثير ظهور تدريجي
------------------------------------------ */
.about-section {
    position: relative;
}
.about-section::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, #c8a45c, #f0d080, #c8a45c, transparent);
    opacity: 0.2;
}

/* ------------------------------------------
   15. عناوين الأقسام - خط تحتي متحرك
------------------------------------------ */
.section-title::after {
    width: 80px;
    height: 3px;
    background: linear-gradient(90deg, #c8a45c, #f0d080);
    border-radius: 4px;
    transition: width 0.6s ease;
    margin: 14px auto 0;
}
.section-title:hover::after {
    width: 120px;
}

/* ------------------------------------------
   16. تأثيرات إضافية - ظلال ناعمة
------------------------------------------ */
.hero-image img,
.about-image img,
.contact-image img {
    transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.hero-image img:hover,
.about-image img:hover,
.contact-image img:hover {
    transform: perspective(1000px) rotateY(0deg) scale(1.02);
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.15);
}

/* ------------------------------------------
   17. تحسينات الجوال - تأثيرات مصغرة
------------------------------------------ */
@media (max-width: 768px) {
    .hero .bg-icon {
        animation: none !important;
        opacity: 0.04 !important;
    }
    .section-title::after {
        width: 60px;
    }
    .section-title:hover::after {
        width: 80px;
    }
}

/* ------------------------------------------
   18. تخصيص شريط التمرير (Scrollbar) - لمسة نهائية
------------------------------------------ */
::-webkit-scrollbar {
    width: 10px;
}
::-webkit-scrollbar-track {
    background: #0a1628;
}
::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #c8a45c, #b08a3a);
    border-radius: 10px;
    border: 2px solid #0a1628;
}
::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #f0d080, #c8a45c);
}

/* ------------------------------------------
   19. تحديد النص (Selection) - لمسة أنيقة
------------------------------------------ */
::selection {
    background: #c8a45c;
    color: #0a1628;
}
::-moz-selection {
    background: #c8a45c;
    color: #0a1628;
}/* End custom CSS */