/* ---------- Base & Reset ---------- */
:root { --gold: #de852f; --bg: #fff; --dark: #222831; }
*{box-sizing:border-box}
body { margin:0; font-family:'Tajawal',sans-serif; background:#fff; color:rgba(0, 0, 0, 0.9); direction:rtl; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; overflow-x:hidden; }
a{color:inherit;text-decoration:none}

/* ---------- Header ---------- */
.main-header{width:100%;position:absolute;top:0;left:0;z-index:120;background:transparent;padding:8px 0}
.header-container{max-width:1240px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;padding:10px 20px}
.logo{font-weight:800;color:var(--gold);font-size:1.7rem}
.main-nav ul{display:flex;gap:18px;list-style:none;margin:0;padding:6px 12px;border-radius:12px;align-items:center}
.main-nav a,.menu-dropdown button{color:#fff;font-weight:500;font-size:1.2rem;padding:6px 12px;border-radius:10px;background:transparent;border:0;cursor:pointer}
.main-nav a:hover,.menu-dropdown button:hover{color:var(--gold);background:rgba(0,0,0,0.12)}
.burger{display:none;border:0;background:none;cursor:pointer;margin-right:8px}
.burger span{display:block;width:28px;height:3px;background:var(--gold);margin:5px 0;border-radius:2px;transition:all .3s}

/* ---------- Hero ---------- */
.hero-section{ background: linear-gradient(135deg, rgb(222,133,47) 68%, #fff 100%);
height:110vh;position:relative;display:flex;align-items:flex-start;justify-content:flex-start;padding-top:72px}
.hero-bg{position:absolute;inset:0;background:url('images/h4.webp') center/cover no-repeat;filter:blur(28px) brightness(.75);transition:all 1s;z-index:0}
.hero-bg.visible{filter:blur(0) brightness(1)}

.hero-title-main{font-size:2.4rem;font-weight:800;line-height:1.06;margin:0;background:linear-gradient(90deg,var(--gold) 10%,#fffba0 80%,#fff 100%);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:0 14px 54px rgba(0,0,0,0.12);opacity:0;transform:translateX(-40px);transition:all .6s}
.hero-title-main.visible{opacity:1;transform:none}
.hero-title-main span{display:block;opacity:0;transform:translateY(24px);transition:all .45s}

/* ---------- Creative steps ---------- */
.creative-steps-section{background: linear-gradient(110deg,#f4f5f7 80%,#fff 100%);
;padding:80px 0}
.creative-row{max-width:1200px;margin:0 auto;display:flex;gap:28px;align-items:flex-start;padding:0 20px}
.creative-main-card{flex:1.2;background:#fff;border-radius:18px;padding:28px;box-shadow:0 8px 36px rgba(0,0,0,.08)}
.creative-cards{flex:2;display:flex;gap:18px;flex-wrap:wrap}
.creative-card{background:#fff;border-radius:14px;overflow:hidden;
 /* تم إزالة min-width: 240px; */
 flex:1 1 240px;
 padding-bottom:12px;display:flex;flex-direction:column;align-items:center}
.creative-card img{width:100%;object-fit:cover}
.author img{width:56px;height:56px;border-radius:50%;border:2px solid var(--gold)}

/* ---------- Stats (Custom Style) ---------- */
.creative-stats {
 max-width:1020px; margin:38px auto 50px auto;
 display:flex; gap:40px; justify-content:center; padding-top:24px; border-top:2px solid #eee;
}
.stat {flex:1;
 /* تم إزالة min-width: 140px; */
 padding:26px 22px 20px 22px;background:#fff; border-radius:28px; box-shadow:0 4px 23px #de852f12;display:flex;flex-direction:column;align-items:center;justify-content:center;transition:box-shadow .29s;}
.creative-stats .num {
 font-size:2.6rem;color:rgb(222,133,47);font-weight:800;letter-spacing:2px; margin-bottom:7px;
 transition:all .22s;}
.stat .label {font-size:1.09rem;color:#222e32;font-weight:600;margin-bottom:0;}
@media(max-width:900px){.creative-stats{flex-direction:column;gap:19px;}}


/* ---------- Projects (Swiper) ---------- */
.projects-section{padding:72px 0;background:#fff}
.projects-slider-heading{max-width:1200px;margin:0 auto 18px;padding:0 20px;text-align:right}
.projects-slider-heading h2{font-size:1.9rem;margin:0}
.projects-desc{color:#5b6370;margin-top:6px}
.projectSwiper{max-width:1200px;margin:18px auto;padding:18px;--swiper-navigation-size:0}
.swiper-slide{display:flex;justify-content:center;align-items:center}
.project-card{width:320px;border-radius:16px;background:#fff;overflow:hidden;box-shadow:0 8px 30px rgba(0,0,0,.08);transition:transform .35s,box-shadow .35s;transform-style:preserve-3d;position:relative}
.project-card img{width:100%;height:200px;display:block;object-fit:cover}
.project-info{padding:14px;text-align:center}
.project-card .shine{position:absolute;top:0;left:-80%;height:100%;width:60%;background:linear-gradient(120deg,transparent 0%,rgba(255,255,255,0.18) 40%,rgba(255,255,210,0.12) 60%,transparent 100%);transform:skewX(-20deg);transition:left .6s}
.project-card:hover{transform:translateY(-8px) scale(1.02);box-shadow:0 20px 60px rgba(0,0,0,.14)}
.project-card:hover .shine{left:120%}


/* ---------- FAQ Section ---------- */
.faq-section {background:#f8f8f8; padding:92px 0 44px 0;}
.faq-container {display: flex; gap:46px; max-width:1320px; margin:auto; align-items:center;}
.faq-image {flex:1; text-align:center;}
.faq-image img {width:100%; height: 700px;;max-width:460px; border-radius:30px; object-fit:cover; box-shadow:0 4px 34px #0003;}
.faq-image-caption {margin:22px 0 0 0; font-size:1.2rem; color:#222b; font-weight:600;font-family: 'Tajawal';}
.faq-content {flex:2; display:flex; flex-direction:column; gap:15px;}
.faq-title {font-size:2.3rem; color:#111e30; font-weight:700;}
.faq-sub {font-size:1.13rem; color:#474a55; margin-bottom:7px;}
.faq-list {display:flex; flex-direction:column; gap:12px; margin-top:18px;}
.faq-item {background:#fff; border-radius:14px; box-shadow:0 2px 13px #2221; padding:0; transition:box-shadow .19s;}
.faq-item.open {box-shadow:0 8px 38px #de852f1f;}
.faq-question {width:100%; background:none; border:none; font-size:1.5rem; color:#273153; text-align:right; font-weight:500; padding:24px 16px; border-radius:14px; cursor:pointer; display:flex; align-items:center; justify-content:space-between;font-family: 'Tajawal';font-weight:600 ;}
.faq-answer {width:100%; color:#484c6c; font-size:1.07rem; padding:0 18px 18px 18px; max-height:0; overflow:hidden; transition:max-height .55s,c .29s; opacity:0;}
.faq-item.open .faq-answer{max-height:180px; opacity:1; padding-top:8px;}
.arrow {font-size:2.1rem; color:#de852f; margin-left:12px; transition:transform .3s;}
.faq-item.open .arrow{transform:rotate(45deg);}
.motion-fade{opacity:0;transform:translateY(60px);transition:all 1.1s cubic-bezier(.27,.65,.27,.97);}
.motion-fade.show{opacity:1;transform:translateY(0);}

/* ---------- Offers Section ---------- */
.offers-section {max-width:1150px;margin:72px auto 36px auto;padding:0 8px;}
.offers-title {font-size:2rem; color:rgb(222,133,47); font-weight:700; letter-spacing:1.6px; margin-bottom:32px;}
.offers-slider {display:flex;gap:32px;align-items:center;transition:transform 1.05s cubic-bezier(.22,.63,.26,1.05);}
.offer-card {background:#fff; border-radius:22px; box-shadow:0 4px 22px #de852f13;overflow:hidden;
 /* تم إزالة width:383px; min-width:220px; */
 width:383px; height:268px;cursor:pointer;position:relative;display:flex;flex-direction:column;align-items:center;
 opacity:0;transform:scale(.87) translateY(40px);transition:all 1.02s cubic-bezier(.11,.77,.23,1);}
.offer-card.show {opacity:1;transform:scale(1) translateY(0);}
.offer-card:hover {box-shadow:0 8px 33px rgb(222,133,47,.16);transform:scale(1.03);}
.offer-img {width:100%;height:175px;overflow:hidden;}
.offer-img img {width:100%;height:100%;object-fit:cover;}
.offer-info {width:100%;padding:18px 18px 0 18px;display:flex;justify-content:space-between;align-items:center;}
.offer-title {font-size:1.17rem;color:#222e32;font-weight:700;}
.offer-badge {background:rgb(222,133,47); color:#fff; font-weight:700; border-radius:18px; padding:6px 22px; font-size:1rem;}
.offers-dots{display:flex;gap:8px;justify-content:center;margin-top:18px;}
.slider-dot{background:#eee;border-radius:50%;width:13px;height:13px;cursor:pointer;transition:background .14s;}
.slider-dot.active{background:rgb(222,133,47);}

/* ---------- Certificates Section ---------- */
.certs-section {background:#fff; padding:72px 0 40px 0;}
.certs-container {max-width:980px; margin:auto; display:flex; gap:38px; align-items:center; justify-content:space-between;}
.certs-text {width:40%; min-width:240px; background:#f8f8f8; border-radius:18px; box-shadow:0 4px 16px #0001; padding:36px 22px; display:flex; flex-direction:column; align-items:flex-start; justify-content:center;}
.certs-text h2 {font-size:1.3rem; font-weight:700; color:#222e32; margin-bottom:19px;}
.certs-text p {font-size:1.09rem; color:#454c5a; margin:0;}
.certs-photos {width:60%; display:flex; flex-direction:column; gap:19px; align-items:center;}
.cert-img { height:145px; object-fit:contain; border-radius:15px; box-shadow:0 8px 20px #de852f1a; background:#fafaf8; opacity:0; }
.cert-top {margin-bottom:4px;}
.certs-row {display:flex; gap:22px; justify-content:center; align-items:center;}
.motion-drop {opacity:0;transform:translateY(-40px);transition:all 1.13s cubic-bezier(.23,.71,.29,.98);}
.motion-drop.show {opacity:1;transform:translateY(0);}
.motion-slide {opacity:0;transform:translateX(-44px);transition:all 1.13s cubic-bezier(.21,.63,.24,.99);}
.motion-slide.show {opacity:1;transform:translateX(0);}
.motion-rise {opacity:0;transform:translateY(40px);transition:all 1.13s cubic-bezier(.21,.63,.24,.99);}
.motion-rise.show {opacity:1;transform:translateY(0);}


/* == تم تعطيل تنسيقات الفوتر القديمة == */
/*
.footer-full-bg {position: relative; width: 100vw; min-height: 800px; background: #15171c; color:#fff; overflow: hidden; margin-top:85px;}
.footer-bg-img {position: absolute; top:0; left:0; width:100vw; height:100%; z-index:1; overflow:hidden;}
.footer-bg-img img {width: 100vw; height: 100%; object-fit: cover; transition: transform 1.1s cubic-bezier(.23,.74,.22,.99); will-change: transform; filter: brightness(.68) blur(1px);}
.footer-overlay {position:absolute; top:0; right:0; bottom:0; left:0; background:rgba(0,0,0,0.48); z-index:2;}
.footer-content {position:relative; z-index:3; max-width:690px; margin:auto; padding:72px 16px 56px 16px; display:flex; flex-direction:column; align-items:center;}
.footer-logo { object-fit:contain; margin-bottom:16px;}
.footer-title {font-size:2rem; font-weight:bold; color:#de852f; text-align:center; margin-bottom:12px;}
.footer-claim {margin-top:100px ;font-size:1.09rem; color:#fff; text-align:center; margin-bottom:30px;}
.footer-links {display:flex; gap:16px; margin-bottom:18px; flex-wrap:wrap; justify-content:center;}
.footer-links a, .footer-btn {color:#111e32; background:#de852f; font-weight:600; padding:9px 22px; border-radius:22px; text-decoration:none; font-size:1.08rem; transition: background .22s, color .18s; margin:3px;}
.footer-links a:hover, .footer-btn:hover{background:#222;color:#de852f;}
.footer-copy {margin-top:120px; font-size:1rem; color:#fff; opacity:.78;}
*/
/* == نهاية التعطيل == */


/* ---------- General Responsive & Utilities (القواعد العامة) ---------- */
@media(max-width:1024px){ .project-card{width:92%} .projectSwiper{padding:12px} }
@media(max-width:900px){
 .faq-container{flex-direction:column;gap:22px;}
 .faq-image img {max-width:98vw;}
 .certs-container {flex-direction:column; gap:30px;}
 .certs-photos {width:100%;}
 .certs-text{width:93vw;}
 .certs-row{gap:12px;}
 /* Offers Responsive */
 .offer-card{width:97vw;min-width:80vw;height:155px;}
 .offers-slider{gap:10px;}
}
@media(max-width:600px){
 .hero-title-main{font-size:1.4rem}
 .creative-row{flex-direction:column;align-items:center}
 .creative-main-card{width:96%}
 /* .footer-title{font-size:1.23rem;} */ /* (تم التعطيل) */
 /* .footer-content{padding:38px 8px 28px 8px;} */ /* (تم التعطيل) */
 /* .footer-logo{height:35px;} */ /* (تم التعطيل) */
}
@media(max-width:500px){
 .cert-img{width:90px;height:90px;}
}
.reveal {opacity:0;transform:translateY(36px);transition:all 0.8s ease}
.reveal.show{opacity:1;transform:none}

/* * ----------------------------------------------------
* التعديلات والإضافات المُصححة للموبايل (700px فما دون)
* تم إضافة هذه القواعد في نهاية الملف لتجاوز القواعد القديمة
* ----------------------------------------------------
*/

@media (max-width: 700px) {
    .content-wrapper {padding:0 6px;} /* إضافة هامش خفيف حول المحتوى */
    .creative-row {
        flex-direction: column; 
        align-items: center;
    }
    .creative-main-card {
        width: 95%; /* 95% لترك هامش جانبي */
        margin-bottom: 24px;
        max-width: 410px; 
    }
    .creative-cards {
        flex-direction: column;
        gap: 16px;
        width: 100%;
    }
    .creative-card {
        width: 95%; /* 95% لترك هامش جانبي */
        max-width: 410px;
        margin: 0 auto;
        min-width: unset; /* إلغاء القيود القديمة */
    }
    /* Stats */
    .creative-stats {
        flex-direction: column;
        gap: 18px;
    }
    .stat {
        width: 95%; /* 95% لترك هامش جانبي */
        max-width: 410px;
        margin:0 auto;
        min-width: unset; /* إلغاء القيود القديمة */
    }
    /* News Section */
    .latest-news-list {
        flex-direction: column;
        gap: 16px;
    }
    .news-card {
        width: 95%; /* 95% لترك هامش جانبي */
        max-width: 410px;
        margin: 0 auto;
    }
    /* Offers Section */
     .offers-slider {
        flex-direction: column !important; /* لضمان ظهور العناصر تحت بعضها */
        overflow-x: hidden !important; /* منع التمرير الأفقي */
        gap: 14px;
        padding: 0 15px !important; /* إعادة الهامش العمودي */
    }

    /* 2. جعل كل بطاقة تملأ عرض الشاشة بالكامل */
    .offer-card {
        width: 95% !important; /* ملء الشاشة مع ترك هامش */
        max-width: 400px !important;
        min-width: unset !important; /* إزالة قيود min-width */
        margin: 0 auto !important; /* توسيط البطاقة */
        flex-shrink: 1 !important; /* السماح بتقليص حجم البطاقة */
        scroll-snap-align: none; /* إلغاء خاصية التقاط التمرير */
    }
    
    /* 3. إلغاء النقاط التفاعلية التي لا معنى لها في العرض العمودي */
    .offers-dots {
        display: none !important;
    }
    /* إخفاء شريط التمرير (Scrollbar) في بعض المتصفحات لتحسين المظهر */
    .offers-slider::-webkit-scrollbar {
        display: none;
    }
    /* FAQ Section */
    .faq-container {
        flex-direction: column;
        gap: 18px;
        align-items: center;
    }
    .faq-image img {
        max-width: 95vw;
        height: auto; 
    }
    .faq-content {
        width: 100%;
        padding: 0 15px;
    }
    .faq-question { font-size: 1.2rem; }
}

@media (max-width: 500px) {
    .creative-main-card, .creative-card, .stat, .news-card, .offer-card {
        /* هنا نستخدم !important للتأكد من تطبيق 95% حتى لو كان هناك قواعد أخرى تحاول تجاوزها */
     
    }
    /* .footer-content { padding:25px 5px 18px 5px;} */ /* (تم التعطيل) */
    /* .footer-logo{height:32px;} */ /* (تم التعطيل) */
}


/* Hero Section (Specific Overrides) - تم نقله إلى النهاية لتطبيق التعديلات بشكل صحيح */
.hero-section {
 position: relative;
 width: 100vw;
 min-height: 800px;
 display: flex;
 align-items: center;
}
.hero-content {
 position: relative;
 z-index: 2;
 max-width: 850px;


 padding: 0 5vw;
 text-align: right; /* تم تعديل المحاذاة لليمين لـ RTL */
 display: flex;
 flex-direction: column;
 align-items: flex-end !important; /* تم تعديل المحاذاة لليمين لـ RTL */
}
.hero-title-main {
 font-size: 2.7rem;
 font-weight: 800;
 color: #fff;
 line-height: 1.1;
 letter-spacing: .8px;
 text-shadow:
  0 3px 14px #000c,
  0 1px 7px #1119,
  0 0px 1px #000;
 direction: rtl; 
}
.hero-title-main span {
 display: block;
 margin-bottom: 7px;
}
.hero-title-main span:nth-child(2) {
 font-size: 3.5rem;
 color: #de852f;
 letter-spacing: 3px;
 margin-right: 0;
 margin-left: 0;
 margin-bottom: 8px;
 background: none;
 text-align: center;
 align-self: center;
 display: flex;
 justify-content: center;
 width: 100%;
 animation: txtFadeIn 2.6s cubic-bezier(.25,.65,.18,.97);
}
.hero-title-main span:last-child {
 margin-bottom: 0;
 font-size: 2.7rem;
 color: #fff;
 font-weight: 800;
 margin-right: 9px;
 background: linear-gradient(90deg, #e46c0a40 18%, transparent 100%);
}

@keyframes txtFadeIn {
 from {opacity:0;transform:translateY(70px) scale(.7);}
 to {opacity:1;transform:none;}
}


@media (max-width:700px){
  .hero-section img, .hero-bg img {
    width: 100vw !important;
    height: 40vw !important;   /* غير الرقم إلى المناسب لك تمامًا */
    max-height: 400px !important; /* قيّد أقصى ارتفاع */
    object-fit: cover !important;
    border-radius: 0 !important;
    display: block;
    margin: 0;
    padding: 0;
    background: url('images/hero_mobile.png') center/cover no-repeat;
  }
  .hero-section, .hero-bg{
    overflow: hidden !important;
    width: 100vw !important;
     background: url('images/hero_mobile.png') center/cover no-repeat;
    height: auto !important;
  }
  
    .hero-title-main {
    font-size: 1.25rem !important;       /* حجم العنوان الرئيسي */
    line-height: 1.2 !important;         /* ضبط ارتفاع الأسطر */
    letter-spacing: 0.5px !important;
    text-shadow: 0 2px 5px #0006 !important;
    padding: 6px 0 !important;           /* تقليل الهامش العلوي والسفلي */
  }
  .hero-title-main span {
    font-size: 1.43rem !important;       /* حجم الأسطر */
    margin-bottom: 3px !important;
    padding: 0 !important;
  }
  .hero-title-main span:nth-child(2) {
    font-size: 1.9rem !important;        /* كلمة نبني أكبر أكثر وضوحا */
    margin-bottom: 5px !important;
  }
  .hero-content {
    padding: 0 8px !important;           /* تقليل الحواف */
            /* تقريب الكتابة للأعلى */
    align-items: flex-end !important;
  }

}
@media (max-width: 700px) {
  /* == تم تعطيل هذا الجزء الخاص بالفوتر القديم == */
  /*
  .footer-full-bg {
    position: relative !important;
    width: 100vw !important;
    min-height: 210px !important;  
    height: auto !important;
    overflow: hidden !important;
    display: flex !important;
    align-items: flex-end !important;
  }
  .footer-bg-img {
    position: absolute !important;
    top: 0; left: 0; right: 0; bottom: 0;
    width: 100vw !important;
    height: 100% !important;        
    z-index: 1;
    overflow: hidden !important;
  }
  .footer-bg-img img {
    width: 100vw !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block;
    margin: 0 auto;
    border-radius: 0 !important;
  }
  .footer-content, .footer-overlay {
    position: relative !important;
    z-index: 3;
  }
  .footer-overlay {
    z-index: 2;
  }
  */
}

/* ... ضمن ملف style4.css ... */

/* ... ضمن ملف style4.css ... */

/* قم بإزالة/تعطيل هذه التنسيقات القديمة من style4.css */
/*
.dropdown-list {
  display: none;
  position: absolute;
  top: 100%;
  right: 0;
  background: rgba(0,0,0,.92);
  border-radius: 10px;
  padding: 15px 20px;
  min-width: 250px;
  z-index: 100;
}
.submenu { position: relative; margin-bottom: 10px; }
.submenu > a {
  color: var(--gold, #de852f);
  font-weight: 700;
  border-bottom: 1px solid rgba(222,133,47,0.4);
  padding-bottom: 5px;
  display: block;
}
.submenu-items { display: none; list-style: none; padding: 8px 0 0 0; margin: 0; }
.submenu:hover .submenu-items { display: block; }
.submenu-items li { margin-bottom: 6px; }
.submenu-items li a { color: #fff; display: block; padding: 6px 10px; border-radius: 5px; transition: 0.2s; }
.submenu-items li a:hover { background: var(--gold, #de852f); color: #111; }
.menu-dropdown:hover .dropdown-list { display: block; }
*/

/* في حالة الشاشات الصغيرة... */


.site-footer {
    background: #000;
    color: #fff;
    padding: 60px 0 20px 0;
    margin-top: 85px; /* (مأخوذ من تنسيق الفوتر القديم) */
}
.footer-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    text-align: right;
}
.footer-col {
    flex: 1;
    min-width: 200px; /* عرض أدنى مرن */
    margin-bottom: 30px;
    padding: 0 15px; /* إضافة هوامش داخلية */
}
.footer-logo {
    margin-bottom: 15px;
}
.footer-logo img {
    height: 120px; /* حجم الشعار */
    max-width: 100%;
  
}
.footer-col p {
    font-size: 1.05rem;
    max-width: 350px;
    opacity: .8;
    line-height: 1.6;
}
.footer-col p.footer-phone {
    font-size: 1.1rem;
    font-weight: 700;
    margin: 5px 0 10px 0;
    opacity: 1; /* لون أوضح لرقم الهاتف */
direction:ltr;
    
}
.social-links {
    margin-top: 20px;
    display: flex;
    gap: 18px; /* مسافة بين الأيقونات */
}
.social-links a {
    color: #fff;
    font-size: 26px; /* حجم الأيقونات */
    transition: color 0.3s, transform 0.3s;
}
.social-links a:hover {
    color: var(--gold); /* استخدام المتغير الذهبي عند الـ hover */
    transform: scale(1.1); /* تكبير بسيط */
}
.footer-col h4 {
    font-size: 1.2rem;
    margin-bottom: 20px; /* مسافة أسفل العناوين */
    font-weight: 700;
    color: var(--gold); /* استخدام المتغير الذهبي */
}
.footer-col ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.footer-col ul li {
     margin-bottom: 12px; /* مسافات بين روابط القائمة */
}
.footer-col ul a {
    color: #fff;
    opacity: .8;
    transition: opacity 0.3s, padding-right 0.3s;
}
.footer-col ul a:hover {
    opacity: 1;
    padding-right: 5px; /* إزاحة بسيطة عند الـ hover */
    text-decoration: none;
}
.footer-bottom {
    text-align: center;
    padding-top: 20px;
    border-top: 1px solid #333; /* خط فاصل علوي */
    margin: 20px auto 0;
    max-width: 1200px;
}
.footer-bottom p {
    font-size: .9rem;
    opacity: .7;
    max-width: 100%;
}

/* تنسيق الشاشات الصغيرة للفوتر */
@media (max-width: 768px) {
    .footer-container {
        flex-direction: column;
        align-items: flex-start;
    }
    .footer-col {
        width: 100%;
        min-width: unset;
        text-align: right;
    }
    .social-links {
        justify-content: flex-start;
    }
}
/* ----------------------------------------------------
* تنسيقات القائمة المنسدلة متعددة الأعمدة (New Dropdown Style)
* ----------------------------------------------------
*/

/* القائمة الرئيسية المنسدلة */
.new-dropdown-style .dropdown-list {
    display: none;
    position: absolute;

    right: 70%; /* لتوسيط القائمة المنسدلة تحت الزر */
    transform: translateX(50%); /* لتوسيط القائمة المنسدلة تحت الزر */
    background: rgba(0, 0, 0, 0.9); /* خلفية سوداء */
    border-radius: 0; /* إزالة حواف القائمة */
    padding: 30px 40px;
    min-width: 250px; /* عرض كبير لاستيعاب الأعمدة */
    box-shadow: 0 10px 45px rgba(0, 0, 0, 0.4);
    z-index: 100;
    border-radius:10px;
    /* تنسيق الأعمدة الأفقية */
    justify-content: space-between;
    gap: 40px;
}

/* إظهار القائمة عند التمرير بالماوس */
.new-dropdown-style:hover .dropdown-list {
    display: flex; /* نستخدم flex لترتيب الأعمدة */
}

/* تنسيق العمود */
.dropdown-col {
    flex: 1 1 200px; /* مرونة في العرض */
}

/* تنسيق عنوان العمود (مثلاً: صمم بنفسك، أنظمة اركا،...) */
.dropdown-col h4 {
    color: #fff; /* لون أبيض للعناوين */
    font-size: 1.2rem;
    font-weight: 800;
    margin: 0 0 18px 0;
    padding-bottom: 8px;
    border-bottom: 1px solid #333; /* خط فاصل خفيف */
    letter-spacing: 1px;
}

/* تنسيق قائمة الروابط */
.dropdown-col ul {
    display: block; /* <--- 2. أضف هذا السطر */
    list-style: none;
    padding: 0;
    margin: 0;
    
}

.dropdown-col ul li {
    margin-bottom: 8px;
}

/* تنسيق الروابط */
.dropdown-col ul li a {
    color: #fff;
    font-weight: 500;
    font-size: 0.95rem;
    padding: 7px 0;
    border-radius: 0;
    display: block;
    transition: color 0.2s, padding-right 0.2s;
    background: none; /* إلغاء أي خلفية قديمة */
}

.dropdown-col ul li a:hover {
    color: var(--gold); /* لون ذهبي عند المرور */
    background: none;
    padding-right: 5px; /* إزاحة خفيفة لليمين */
}

/* تنسيق شارة "SOON" */
.soon-badge {
    background: var(--gold);
    color: #000;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 4px;
    margin-right: 8px;
    display: inline-block;
}

/* ----------------------------------------------------
* تعديلات القائمة المنسدلة في شاشات الموبايل (أقل من 900 بكسل)
* ----------------------------------------------------
*/

/* ----------------------------------------------------
* تنسيقات القائمة المتدرجة للموبايل (Drill-down Menu)
* ----------------------------------------------------
*/

/* إخفاء أزرار العودة وعناوين الهيدر في وضع اللابتوب */
.submenu-header.mobile-only {
    display: none;
}
/* تحويل الأزرار الجديدة إلى شكل روابط عادية في اللابتوب */
.submenu-trigger {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    font: inherit;
    color: inherit;
    cursor: default; /* لا نريده قابلاً للنقر في اللابتوب */
    text-align: right;
    width: 100%;
}


@media (max-width: 900px) {

    /* 1. إعداد القائمة الرئيسية لإخفائها عند الدخول لمستوى فرعي */
    .main-nav > ul {
        transition: transform 0.35s;
    }
    .main-nav.submenu-level-2-active > ul {
        transform: translateX(-100%); /* إخفاء القائمة الرئيسية (المستوى 1) */
    }
/* 2. إعداد قائمة "خدماتنا" (المستوى 2) */
    .new-dropdown-style .dropdown-list {
        position: fixed; 
        top: 0; 
        right: 0;
        width: 200px; 
        height: calc(100vh - 62px);
        padding: 14px;
        display: flex !important; 
        flex-direction: column;
        gap: 0;
        min-width: unset;
        box-shadow: none;
        max-height:100%;
        transform: translateX(100%);
        transition: transform 0.35s;
        z-index: 1010; /* تعديل: المستوى 2 (أعلى من 1) */
    }
    .main-nav.active body {
    overflow: hidden;
}

    /* إظهار قائمة "خدماتنا" (المستوى 2) عند النقر */
    /* تعديل: إظهار المستوى 2 فقط إذا لم يكن المستوى 3 نشطًا */
    .main-nav.submenu-level-2-active:not(.submenu-level-3-active) .new-dropdown-style .dropdown-list {
        transform: translateX(0);
    }
    
    /* إضافة: إخفاء المستوى 2 عند فتح المستوى 3 */
    .main-nav.submenu-level-2-active.submenu-level-3-active .new-dropdown-style .dropdown-list {
        transform: translateX(-100%); /* إخفاؤه إلى اليسار */
    }
    /* إلغاء تأثير الـ hover في الموبايل */
    .new-dropdown-style:hover .dropdown-list {
        transform: translateX(100%);
    }

    /* 3. إظهار وتنسيق أزرار العودة في الموبايل */
    .submenu-header.mobile-only {
        display: flex;
        align-items: center;
        border-bottom: 1px solid #444;
        padding-bottom: 10px;
        margin-bottom: 10px;
    }
    .submenu-header button.submenu-back {
        background: none;
        border: none;
        color: var(--gold);
        font-size: 1.1rem;
        cursor: pointer;
        padding: 5px;
        font-weight: 700;
    }
    .submenu-header span {
        color: #fff;
        font-weight: 700;
        font-size: 1.1rem;
        margin-right: 15px;
    }

    /* 4. تنسيق أزرار الأقسام (التصميم، التصنيع...) */
    .dropdown-col {
        padding: 0;
        margin-bottom: 0;
    }
    .dropdown-col h4 {
        margin: 0;
        border-bottom: 1px solid #333;
        background: none;
        padding: 0;
        border-radius: 0;
    }
    .submenu-trigger {
        color: #fff;
        font-weight: 600;
        font-size: 1rem;
        padding: 12px 0;
        cursor: pointer;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    /* إضافة سهم > بجانب الزر */
    .submenu-trigger::after {
        content: '<';
        font-size: 1.2rem;
        color: var(--gold);
        transform: scaleX(-1); /* ليعكس اتجاه السهم */
    }

    /* 5. إعداد القوائم الفرعية (المستوى 3) */
   .submenu-panel {
        list-style: none;
        padding: 0;
        margin: 0;
        position: fixed; 
        top: 62px;
        right: 0;
        width: 200px;
        height: calc(100vh - 62px);
        background: rgba(0,0,0,.95);
        padding: 14px;
        
        transform: translateX(100%);
        transition: transform 0.35s;
        z-index: 1020; /* تعديل: المستوى 3 (أعلى z-index) */
        display: block !important; 
    }
    
    /* إظهار المستوى 3 عند النقر */
    .dropdown-col.submenu-panel-active .submenu-panel {
        transform: translateX(0);
    }
    .dropdown-col ul li a {
        color: #ddd;
        padding: 10px 5px;
        display: block;
        border-bottom: 1px solid #333;
    }
    .dropdown-col ul li a:hover {
        background: var(--gold);
        color: #111;
        padding-right: 10px;
    }
}
/* القائمة المنسدلة الخاصة بـ "عن بيت نمر" */
.about-dropdown {
  position: relative;
}

.about-dropdown .about-menu {
  display: none;
  position: absolute;
  top: 100%; /* تحت الزر مباشرة */
  right: 0; /* محاذاة لليمين */
  background-color: rgba(0, 0, 0, 0.9);
  border-radius: 10px;
  min-width: 180px;
  text-align: right;
  list-style: none;
  padding: 8px 0;
  margin: 0;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  z-index: 999;
}

/* عرض القائمة عند تمرير الماوس */
.about-dropdown:hover .about-menu {
  display: block;
}

/* تنسيق العناصر داخل القائمة */
.about-dropdown .about-menu li {
  padding: 6px 15px;
}

.about-dropdown .about-menu li a {
  color: #fff;
  text-decoration: none;
  display: block;
  transition: 0.3s;
}

.about-dropdown .about-menu li a:hover {
  color: #ff7a00; /* نفس لون التحديد */
}

.accordion-col h4 {
    margin-bottom: 15px; /* مسافة تحت العنوان الرئيسي لخدماتنا */
}

.accordion-item {
    border-bottom: 1px solid #333; /* خط فاصل بين الأقسام */
}

.accordion-trigger {
    background: none;
    border: none;
    color: #fff; /* لون النص افتراضياً (افترضنا أن الفوتر داكن) */
    font-weight: 600;
    font-size: 1rem;
    padding: 12px 0;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    text-align: right; /* محاذاة النص لليمين (لغة عربية) */
    transition: color 0.3s ease;
}

.accordion-trigger:hover {
    color: var(--gold); /* يتغير لون الرابط عند المرور فوقه */
}

.accordion-icon {
    transition: transform 0.3s ease;
}

/* تدوير الأيقونة عند فتح القائمة */
.accordion-trigger[aria-expanded="true"] .accordion-icon {
    transform: rotate(180deg);
}

.accordion-content {
    list-style: none;
    padding: 0;
    margin: 0;
    max-height: 0; /* الإخفاء المبدئي */
    overflow: hidden;
    transition: max-height 0.4s ease-out, padding 0.4s ease-out;
}

/* الحالة النشطة التي يضيفها الجافاسكريبت */
.accordion-content.active {
    max-height: 500px; /* قيمة كبيرة بما يكفي لإظهار المحتوى بالكامل */
    padding-bottom: 15px; /* مسافة سفلية عند الفتح */
}

.accordion-content li a {
    display: block;
    padding: 5px 0;
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.7); /* لون أفتح للروابط الفرعية */
    transition: color 0.3s ease;
}

.accordion-content li a:hover {
    color: var(--gold);
}

/* ==============================================
 * تنسيقات قائمة الموبايل الرئيسية (المستوى 1)
 * ==============================================
*/
@media (max-width: 900px) {

    /* 1. إظهار زر البرجر */
    .burger {
        display: block;
      z-index: 1030; /* تعديل: اجعله أعلى z-index */*/
    }

    /* 2. تنسيق لوحة القائمة الرئيسية (المستوى 1) */
    /* 2. تنسيق لوحة القائمة الرئيسية (المستوى 1) */
   @media (max-width: 900px) {
    .main-nav > ul {
        position: fixed;
        /* 1. ضبط الارتفاع ليكون تحت الهيدر مباشرة */
        top: 60px; 

        /* 2. الأهم: نقل القائمة إلى اليسار (تحت زر البرجر) */
        left: 0; 
        right: auto; /* لضمان إلغاء أي تأثير للـ right */

        width: 200px; 

        /* 3. إلغاء التمدد لأسفل الصفحة وجعل الارتفاع ديناميكياً */
        max-height: calc(100vh - 60px); 
        overflow-y: auto; 

        background: rgba(0, 0, 0, 0.9); 
        transition: transform 0.3s ease;
        box-shadow: 0 4px 18px rgba(0, 0, 0, 0.3);
        display: none; /* إخفائها افتراضياً */
    }

    /* هذا الكلاس يُظهر القائمة عند الضغط على زر البرجر */
    .main-nav.active > ul {
        display: block; 
    }

    /* ... باقي قواعد الميديا كويري ... */
}
    /* 3. إظهار القائمة الرئيسية عند النقر على البرجر */
    /* (تعديل مهم) إظهار المستوى 1 فقط إذا لم يكن المستوى 2 نشطًا */
    .main-nav.active:not(.submenu-level-2-active) > ul {
        transform: translateX(0);
    }

    /* 3. إظهار القائمة الرئيسية عند النقر على البرجر */
    /* (الكود JS الحالي يضيف كلاس .active) */
    .main-nav.active > ul {
        transform: translateX(0);
    }

    /* 4. تنسيق الروابط والأزرار داخل القائمة */
    .main-nav a,
    .main-nav .dropbtn,
    .about-dropdown .dropbtn {
        font-size: 1.1rem;
        font-weight: 600;
        padding: 10px 0;
        
        display: block;
        color: #fff;
    }
    
    /* 5. تعديل زر البرجر عند الفتح (ليصبح X) */
    .burger.active span:nth-child(1) {
        transform: rotate(45deg) translate(5px, 6px);
    }
    .burger.active span:nth-child(2) {
        opacity: 0;
    }
    .burger.active span:nth-child(3) {
        transform: rotate(-45deg) translate(5px, -6px);
    }

    /* 6. (مهم) تعديل الـ z-index للقوائم الفرعية */
    /* يجب أن تكون أعلى من القائمة الرئيسية (1000) */
    .new-dropdown-style .dropdown-list {
        z-index: 1010; /* L2 فوق L1 */
    }
    .submenu-panel {
        z-index: 1020; /* L3 فوق L2 */
    }

    /* 7. تعديل القائمة المنسدلة البسيطة (عن بيت نمر) لتناسب الموبايل */
    .about-dropdown {
        position: static; /* إلغاء التموضع */
    }
    .about-dropdown .about-menu {
        position: static;
        display: none; /* إخفاؤها افتراضيًا */
        background: none;
        box-shadow: none;
        min-width: unset;
        padding: 0 15px 0 0; /* مسافة بادئة للروابط الفرعية */
    }
    /* تعطيل الـ hover في الموبايل */
    .about-dropdown:hover .about-menu {
        display: none; 
    }
    /* إظهار/إخفاء القائمة البسيطة بالنقر (عبر JS) */
    .about-dropdown.mobile-open .about-menu {
        display: block;
    }
    .about-dropdown .about-menu li a {
        color: #ccc;
        font-size: 1rem;
    }

/* ==================================
   أكواد النموذج الأول (Modern & Clean)
==================================
*/

/* --- 1. تصميم الإحصائيات (نموذج 1) --- */
.stats-model-1 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    max-width: 1200px;
    margin: 38px auto 50px auto;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.07);
    overflow: hidden;
    padding: 0;
    border: 1px solid #eee;
}

.stats-model-1 .stat {
    background: transparent;
    box-shadow: none;
    border-radius: 0;
    padding: 30px 15px;
    border-left: 1px solid #eee;
    min-width: unset;
    transition: background 0.3s;
}

.stats-model-1 .stat:last-child {
    border-left: none;
}

.stats-model-1 .stat:hover {
    background: #fafafa;
}

.stats-model-1 .num {
    font-size: 2.3rem;
    color: var(--gold);
    margin-bottom: 8px;
}

.stats-model-1 .label {
    font-size: 1rem;
    color: #555;
    font-weight: 500;
}

@media (max-width: 900px) {
    .stats-model-1 {
        grid-template-columns: 1fr 1fr;
        gap: 1px;
        background: #eee;
    }
    .stats-model-1 .stat {
        background: #fff;
        border: none;
    }
}
@media (max-width: 500px) {
    .stats-model-1 {
        grid-template-columns: 1fr;
    }
}

/* --- 2. تصميم الخدمات المميزة (نموذج 1) --- */
.featured-services-section {
    padding: 80px 0;
    background: #fdfdfd;
}
.featured-services-section .container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 20px;
}
.featured-service-item {
    display: flex;
    gap: 40px;
    align-items: center;
    margin-bottom: 60px;
}
.featured-service-item.alt-layout {
    flex-direction: row-reverse;
}
.featured-image {
    flex: 1;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 8px 30px rgba(0,0,0,0.1);
    transition: transform 0.4s ease;
}
.featured-image img {
    width: 100%;
    height: 350px;
    object-fit: cover;
    display: block;
}
.featured-service-item:hover .featured-image {
    transform: scale(1.03);
}
.featured-text {
    flex: 1.2;
}
.featured-text h2 {
    font-size: 2.1rem;
    color: var(--dark);
    margin-bottom: 15px;
}
.featured-text p {
    font-size: 1.1rem;
    color: #666;
    line-height: 1.7;
    margin-bottom: 25px;
}
.btn-main {
    background: var(--gold);
    color: #fff;
    padding: 12px 28px;
    border-radius: 8px;
    font-size: 1.1rem;
    font-weight: 600;
    transition: background 0.3s;
}
.btn-main:hover {
    background: var(--dark);
}
@media (max-width: 900px) {
    .featured-service-item,
    .featured-service-item.alt-layout {
        flex-direction: column;
    }
    .featured-image img {
        height: 300px;
    }
}


/* --- 3. تصميم خدماتنا (نموذج 1) --- */
.services-section-model-1 {
    background: #fff;
    padding-bottom: 80px;
}
.services-grid-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    display: grid;
    gap: 25px;
}
.service-card {
    display: block;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 5px 25px rgba(0,0,0,0.08);
    overflow: hidden;
    transition: transform 0.3s, box-shadow 0.3s;
}
.service-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 35px rgba(0,0,0,0.12);
}
.service-card-img img {
    width: 100%;
    height: 220px;
    object-fit: cover;
}
.service-card-content {
    padding: 20px;
}
.service-card-content h3 {
    font-size: 1.4rem;
    color: var(--dark);
    margin: 0 0 8px 0;
}
.service-card-content p {
    font-size: 1rem;
    color: #777;
    margin: 0 0 15px 0;
}
.service-link {
    color: var(--gold);
    font-weight: 600;
}