/* =========================================================
   تحسينات UI/UX لقسم التصميم الداخلي والمعماري (الوضع الحالي)
   إضافات بصرية وتفاعلية فوق ستايل القالب الأصلي، بدون كسر
   أي كلاسات موجودة.
   ========================================================= */

/* خط عربي احترافي (القالب الأصلي بيحمّل خطوط لاتينية بس زي Poppins،
   فالنص العربي كان بيرجع لخط النظام الافتراضي). */
@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;500;600;700;800&display=swap');

body, p, li, span, a, h1, h2, h3, h4, h5, h6,
.head-title, .dlab-tilte, .dlab-tilte-inner, .btn, .site-button,
.header-nav .nav > li > a, .header-nav .nav .sub-menu li a {
    font-family: 'Cairo', 'Poppins', sans-serif;
}

/* انتقالات أنعم على الروابط والأزرار في كل الموقع */
a, .btn, .header-nav .nav > li > a, .icon-bx-wraper, .dlab-media img {
    transition: all .3s ease;
}

/* وضوح أكتر لعناصر القائمة الرئيسية */
.header-nav .nav > li > a {
    font-weight: 600;
    font-size: 15.5px;
}

/* ===== الشعار: أيقونة + اسم الشركة كنص حقيقي (أوضح من صورة مصغّرة) =====
   ملاحظة: القالب الأصلي فيه قواعد أعلى تحديدًا (زي .logo-header > a
   و .header-nav .logo-header a) بتحوّل العنصر لـ display:table-cell أو
   block وتخلي الاسم ينزل تحت اللوجو بدل ما يفضل جمبه، زي ما هو متبع
   بالظبط في قسم IT (.it-logo). بنستخدم !important هنا عشان نضمن إن
   الشعار يفضل صف واحد (أيقونة + اسم) في كل الحالات وكل مقاسات الشاشة. */
.logo-header a.armaa-brand,
.header-nav .logo-header a.armaa-brand {
    display: flex !important;
    align-items: center;
    gap: 12px;
    width: auto !important;
    text-align: right;
}
.armaa-brand img {
    height: 60px;
    width: auto;
}
.armaa-brand-text {
    display: block;
    color: #fff;
    font-weight: 700;
    font-size: 21px;
    line-height: 1.15;
    text-align: right;
}
    .armaa-brand-text small {
        display: block;
        font-size: 11px;
        font-weight: 400;
        color: #2f8fc6;
    }

/* تباين أوضح للوجو والاسم فوق صور الهيدر الشفاف المزدحمة، بدل ما يضيعوا
   في خلفية الصورة */
.header-archia.header-transparent .sticky-header {
    background: linear-gradient(to bottom, rgba(6, 10, 20, .78) 0%, rgba(6, 10, 20, .4) 65%, rgba(6, 10, 20, 0) 100%);
}
.header-archia.header-transparent .sticky-header.is-fixed {
    background: transparent;
}
.armaa-brand img {
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .55));
}
.armaa-brand-text {
    text-shadow: 0 1px 5px rgba(0, 0, 0, .6);
}
.armaa-brand-text small {
    text-shadow: 0 1px 4px rgba(0, 0, 0, .55);
}
/* لما الهيدر يبقى ثابت وقت السكرول بتتحول خلفيته لأبيض (main-bar)،
   فالاسم الأبيض لازم يتحول لغامق عشان يفضل واضح بدل ما يختفي */
.is-fixed .armaa-brand-text {
    color: #1a1a1a;
    text-shadow: none;
}
.is-fixed .armaa-brand-text small {
    text-shadow: none;
}

.armaa-brand-lg img { height: 74px; }
.armaa-brand-lg .armaa-brand-text { font-size: 25px; }
.armaa-brand-lg .armaa-brand-text small { font-size: 13px; }
@media (max-width: 575px) {
    .armaa-brand img { height: 50px; }
    .armaa-brand-text { font-size: 17px; }
}

/* حالة تركيز واضحة لدواعي الوصولية (Accessibility) */
a:focus-visible, .btn:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
    outline: 2px solid #1589c5;
    outline-offset: 2px;
}

/* =========================================================
   شريط علوي رفيع (Utility Bar): تواصل سريع + تبديل بين
   قسمي الموقع، منفصل تمامًا عن صف الشعار والقائمة الرئيسية
   عشان القائمة تفضل مرتبة ومتكسرش سطرين.
   ========================================================= */
.armaa-utility-bar {
    position: relative;
    z-index: 20;
    background: #0b1220;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.armaa-utility-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 42px;
}
.armaa-utility-left,
.armaa-utility-right {
    display: flex;
    align-items: center;
    gap: 18px;
}
.armaa-utility-phone {
    color: rgba(255, 255, 255, .85);
    font-size: 13px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    direction: ltr;
}
.armaa-utility-phone:hover { color: #4fc3ec; }
.armaa-utility-social { display: flex; align-items: center; gap: 8px; }
.armaa-utility-social a {
    width: 26px; height: 26px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    color: rgba(255, 255, 255, .65);
    font-size: 12px;
    border: 1px solid rgba(255, 255, 255, .15);
}
.armaa-utility-social a:hover { color: #fff; border-color: #4fc3ec; }

.armaa-utility-switch {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #fff;
    background: linear-gradient(90deg, #1589c5, #4f46e5);
    padding: 5px 16px;
    border-radius: 20px;
    font-size: 12.5px;
    font-weight: 600;
    white-space: nowrap;
}
.armaa-utility-switch:hover { color: #fff; filter: brightness(1.1); }
.armaa-utility-search {
    width: 28px; height: 28px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    color: rgba(255, 255, 255, .75);
    border: 1px solid rgba(255, 255, 255, .15);
    font-size: 12px;
}
.armaa-utility-search:hover { color: #fff; border-color: #4fc3ec; }

@media (max-width: 767px) {
    .armaa-utility-phone span, .armaa-utility-social { display: none; }
    .armaa-utility-switch span { display: none; }
    .armaa-utility-switch { padding: 6px; }
    .armaa-utility-inner { height: 40px; }
}

/* زرار التواصل العائم (واتساب) */
.floating-contact-btn {
    position: fixed;
    bottom: 26px;
    right: 26px;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background: #25D366;
    color: #fff !important;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    box-shadow: 0 10px 26px rgba(0, 0, 0, .3);
    z-index: 1000;
    transition: all .3s ease;
    animation: floatingPulse 2.4s ease-in-out infinite;
}
.floating-contact-btn:hover {
    transform: scale(1.08);
    color: #fff !important;
}
@keyframes floatingPulse {
    0%, 100% { box-shadow: 0 10px 26px rgba(37, 211, 102, .35); }
    50% { box-shadow: 0 10px 36px rgba(37, 211, 102, .65); }
}
@media (max-width: 575px) {
    .floating-contact-btn { width: 50px; height: 50px; font-size: 24px; bottom: 18px; right: 18px; }
}

/* تحسين قابلية القراءة وتباعد فقرات المحتوى */
.icon-content p, .project-description, .dlab-tilte-inner p {
    line-height: 1.9;
}

/* تحسين ظهور الأزرار الأساسية عند التحويم */
.btn:hover, .site-button:hover {
    transform: translateY(-2px);
}