/* responsive.css */

/* 📱 Responsive Design for Mobile & Tablet */
@media (max-width: 992px) {
  /* Header Adjustments */
  .header {
    padding: 10px 20px;
    flex-wrap: wrap;
  }

  .logo img {
    width: 150px;
  }

  .menu {
    flex-direction: column;
    gap: 10px;
    align-items: center;
    display: none; /* Hide menu initially for mobile */
  }

  .menu a {
    font-size: 16px;
  }

  /* Hamburger Menu */
  .hamburger {
    display: block;
    font-size: 24px;
    cursor: pointer;
    color: #fff;
  }

  .header.sticky .hamburger {
    color: #2F353B;
  }

  /* Toggle Menu */
  .menu.active {
    display: flex;
  }

  /* Video Section */
  .video-container {
    height: 60vh;
  }

  .slogan {
    font-size: 30px;
    bottom: 20px;
    left: 20px;
  }

  /* Bonyan Section */
  .bonyan-section {
    flex-direction: column;
    padding: 50px 5%;
  }

  .bonyan-content,
  .bonyan-video {
    width: 100%;
  }

  /* Projects Grid */
  .projects-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .project-box {
    height: 200px;
  }

  /* Sectors Carousel */
  .sectors-carousel {
    flex-wrap: wrap;
    gap: 15px;
  }

  .sector-block {
    flex: 1 1 calc(50% - 10px);
    height: 300px;
  }

  /* Statistics Section */
  .statistics-section {
    flex-direction: column;
    gap: 20px;
  }

  .stat {
    width: 100%;
  }

  /* Footer Adjustments */
  .footer-top,
  .footer-bottom {
    flex-direction: column;
    text-align: center;
    gap: 15px;
  }

  .footer-menu {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
  }

  .footer-designed {
    text-align: center;
  }
}

/* 🖥️ For Small Devices (Max-width 576px) */
@media (max-width: 576px) {
  .projects-grid {
    grid-template-columns: 1fr;
  }

  .sector-block {
    flex: 1 1 100%;
    height: 250px;
  }

  .slogan {
    font-size: 24px;
    padding: 0 10px;
  }

  .bonyan-section h1 {
    font-size: 28px;
  }

  .bonyan-content p {
    font-size: 14px;
  }
}



/* Fix Layout Issues */
body {
  font-family: 'Montserrat', sans-serif; /* Keeps the rest of the design the same */
}

/* Additional Responsive Adjustments */
@media (max-width: 992px) {
  .header .container {
    padding: 10px;
  }
  .menu {
    display: none; /* or show the burger menu only */
  }
}

@media (max-width: 768px) {
  .top-bar .container {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* Container wrapper for header & footer */
.container {
  max-width: 1330px !important;
  margin: 0 auto !important;
  padding: 0 20px;
  width: 100%;
  box-sizing: border-box;
}

@media (min-width: 993px) {
  .menu {
    margin-right: 1px;
  }
}
@media (min-width: 993px) {
  .footer-logo {
    margin-left: 40px;
  }
}
@media (min-width: 993px) {
  .footer-logo-text {
    margin-left: 40px;
  }
}
@media (min-width: 993px) {
  .footer-newsletter {
    margin-right: 40px;
  }
}
@media (min-width: 993px) {
  .footer-social {
    margin-right: 40px;
  }
}


@media (min-width: 1201px) {
  .slogan {
    left: auto !important;
    right: auto !important;
    margin-left: 110px !important;
    transform: none !important;
  }
}

@media (min-width: 993px) {
  .top-bar .extra {
    transform: none !important;
    margin-right: -18px !important; /* نفس قيمة padding في .container */
  }
}
@media (max-width: 992px) {
  .menu.active a {
    color: #fff !important;
    text-align: center;
  }

  .menu.active a:hover {
    color: #e0e0e0 !important;
  }
}
@media (max-width: 768px) {
  .sectors-carousel-wrapper {
    justify-content: center !important;
  }

  .sectors-carousel {
    justify-content: center !important;
  }

  .sector-block {
    margin: 0 auto !important;
  }
}
@media (max-width: 768px) {
  .section-subtitle {
    justify-content: center !important;
    text-align: center !important;
  }
}
@media (max-width: 768px) {
  .footer-logo-text {
    text-align: center !important;
    width: 100%;
  }
}



/* ----- ABOUT PAGE STACK & CENTER ON MOBILE ----- */
/* --------------------------------------------------------------------
   STACK & CENTER “ABOUT ALPHA” ON MOBILE
   -------------------------------------------------------------------- */
/* -------------------------------
    ABOUT SECTION: STACK & CENTER
   ------------------------------- */
@media only screen and (max-width: 768px) {
  /* 1) Turn off flex‐row, go back to block stacking */
  section.vision-section1 {
    display: block !important;
  }

  /* 2) Force each child to full width and center itself */
  section.vision-section1 > .vision-image1,
  section.vision-section1 > .vision-content1,
  section.vision-section1 > .animated-image {
    display: block !important;
    width: 100% !important;
    margin: 0 auto !important;
  }

  /* 3) Make sure the video fills and is centered */
  .vision-image1 {
    text-align: center !important;
  }
  .vision-image1 video {
    display: inline-block !important;
    width: 100% !important;
    height: auto !important;
  }

  /* 4) Center all the text and button */
  .vision-content1 {
    text-align: center !important;
  }

  /* 5) Center the animated image if present */
  .animated-image img {
    display: inline-block !important;
    max-width: 100% !important;
    margin-top: 20px !important;
  }
}

@media (max-width: 768px) {
  .section-subtitle-factory1 {
    justify-content: center !important;
    text-align: center !important;
    margin-top: 10px !important;
  }
}


/* 2-up gallery on phones */
@media (max-width: 768px) {
  .alpha-factory-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 15px; /* tweak spacing if you like */
  }
}

@media only screen and (max-width: 768px) {
  /* Reset the parallax container so the full image shows */
  .alpha-parallax-section {
    background-attachment: scroll !important;      /* turn off fixed/parallax hack */
    background-size: 410% auto !important;
    background-position: center center !important; /* keep it centered */
    background-repeat: no-repeat !important;
    height: auto !important;                       /* let it grow to its natural height */
    padding: 50px 20px !important;                  /* add some vertical breathing room */
  }
}




@media (max-width: 768px) {
  /* stack menu + content */
  .bntabs-section {
    display: flex !important;
    flex-direction: column !important;
  }

  /* turn the tabs bar into a 3-column grid */
  .bntabs-menu {
    order: 0;                       /* make sure it sits above the panels */
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    grid-auto-rows: min-content;
    gap: 0.5rem !important;
    width: 100% !important;
    padding: 0.5rem 0 !important;
    background: #333 !important;    /* match your dark background */
    justify-items: center;
  }

  /* make each button fill its grid cell */
  .bntabs-menu .bntabs-button {
    width: 100% !important;
    max-width: 120px;               /* optional cap on width */
    text-align: center !important;
    padding: 0.5rem !important;
    font-size: 0.9rem !important;
    line-height: 1.2 !important;
  }

  /* panels container should be full-width below the grid */
  .bntabs-content-container {
    order: 1;
    width: 100% !important;
  }

  /* only show the active panel */
  .bntabs-content {
    display: none !important;
  }
  .bntabs-content.active {
    display: block !important;
    padding: 1rem !important;
  }

  /* stack text and image inside the panel */
  .bntabs-content .bntabs-text,
  .bntabs-content .bntabs-image {
    width: 100% !important;
  }
  .bntabs-content .bntabs-image {
    margin-top: 1rem;
    max-width: 100%;
    height: auto;
    display: block;
    margin-left: auto;
    margin-right: auto;
    border-radius: 0.5rem;
  }
}
@media (max-width: 768px) {
  /* 1) force text back to left-aligned */
  .bntabs-section .bntabs-content .bntabs-text {
    text-align: left !important;
  }

  /* 2) let the image fill its container, no auto-margins */
  .bntabs-section .bntabs-content .bntabs-image {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    margin: 1rem 0 0 0 !important;
  }
}


@media (max-width: 992px) {
  #menu.menu.active {
    background-color: #e4e3e3 !important; /* رمادي فاتح */
  }

  #menu.menu.active a {
    color: #000 !important; /* تغيير لون النص ليتناسب مع الخلفية */
  }

  #menu.menu.active a:hover {
    color: #333 !important;
  }
}








/* ===== About page mobile overflow hotfix ===== */
@media (max-width: 768px) {

  /* 0) أأمن حاجة: اقفل أي overflow أُساسي */
  html, body { overflow-x: hidden !important; }

  /* 1) أي صور/ڤيديو/إطارات ما تعدّيش العرض */
  img, video, iframe { max-width: 100% !important; height: auto !important; }

  /* 2) مشاكل الهيدر/top-bar على الموبايل */
  .top-bar { left: 0 !important; padding: 5px 20px !important; }
  .top-bar .extra { transform: none !important; margin-left: 0 !important; }
  .header .logo, .header .menu { margin-left: 0 !important; }

  /* 3) سيكشن التابس (اللي في السكرين) */
  .bntabs-section { width: 100% !important; margin: 24px auto !important; }
  .bntabs-menu { width: 100% !important; }
  .bntabs-content-container { width: 100% !important; padding: 16px !important; }
  .bntabs-content { gap: 16px !important; }
  .bntabs-image { width: 100% !important; height: auto !important; max-width: 100% !important; }

  /* 4) أي مارجنز يمين/شمال كانت معمولة للديسكتوب هنا هنشيلها */
  .vision-image1,
  .vision-content1,
  .vision-image,
  .vision-content {
    margin: 0 !important;
  }

  /* 5) أي عنصر معمول له عرض بالشاشة كاملة مع تريك الـ 100vw */
  .sectors-carousel-wrapper { width: 100% !important; margin-left: 0 !important; }

  /* 6) الجاليري/الجريد */
  .alpha-factory-grid { grid-template-columns: repeat(2, 1fr) !important; }

  /* 7) شيل أي scroll من الباراتالكس */
  .alpha-parallax-section {
    background-attachment: scroll !important;
    padding: 40px 20px !important;
  }
}







/* ===== Full-height hero on mobile (fix 100vh) ===== */
@media (max-width: 768px) {
  .slider-container {
    position: relative !important;
    width: 100% !important;

    /* fallback للمتصفحات القديمة */
    height: 100vh !important;
    min-height: 100vh !important;

    /* المتصفحات الحديثة (iOS/Android): املا الشاشة فعليًا */
    height: 100svh !important;     /* small viewport height */
    min-height: 100svh !important;
    /* أو 100dvh لو عايز تتجاهل شريط العنوان */
    /* height: 100dvh; min-height: 100dvh; */
  }

  /* خلي صورة الخلفية تملا الكونتينر */
  .slider-container > img {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    z-index: -1 !important;
    display: block !important;
  }

  /* الأوفرلاي يملا الهيرو كله برضه */
  .slider-container .overlay {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
  }

  /* السلوجان يفضل جوه الإطار */
  .slider-container .slogan {
    position: relative; /* أو absolute حسب تصميمك */
    padding: 0 20px;
  }
}







/* ===== About hero: bring slogan above overlay on mobile ===== */
@media (max-width: 768px) {
  .slider-container { position: relative !important; }

  /* خلي الأوفرلاي تحت النص */
  .slider-container .overlay {
    position: absolute !important;
    inset: 0 !important;
    z-index: 1 !important;
    background: rgba(0,0,0,0.35) !important; /* لو عايز تخفّ/تقوّي الخلفية */
  }

  /* رجّع الـslogan فوق الأوفرلاي */
  .slider-container .slogan {
    position: absolute !important;
    z-index: 2 !important;
    left: 50% !important;
    top: 50% !important;                      /* وسط الشاشة */
    transform: translate(-50%, -50%) !important;
    width: min(92vw, 680px) !important;
    padding: 0 20px !important;
    color: #fff !important;
    text-align: center !important;
    line-height: 1.2 !important;
    text-shadow: 0 4px 22px rgba(0,0,0,.55) !important;
    pointer-events: none; /* علشان ميبقاش في تداخل مع أزرار الهيدر */
  }

  .slider-container .slogan-subtext {
    display: block;
    margin-top: .6rem;
    opacity: .95;
  }
}








@media (max-width: 768px) {
  .alpha-parallax-section {
    position: relative !important;
    display: flex !important;
    justify-content: center !important; /* توسيط أفقي */
    align-items: center !important;     /* توسيط رأسي */
    text-align: center !important;
  }

  .alpha-parallax-content {
    margin: 0 auto !important;       /* يشيل أي margin يمين/شمال */
    float: none !important;          /* يلغي أي float */
    align-self: center !important;   /* يتوسطن جوه flex */
    max-width: 90% !important;
  }
}






/* ===== bntabs: safe padding + tidy layout on mobile ===== */
@media (max-width: 768px) {
  /* متغيرات للمسافة الآمنة (تراعي الـ notch على iOS) */
  :root {
    --safe-start: 16px;
    --safe-end: 16px;
  }
  @supports (padding: max(0px)) {
    :root {
      --safe-start: max(16px, env(safe-area-inset-left));
      --safe-end:   max(16px, env(safe-area-inset-right));
    }
  }

  /* الكارد كله */
  .bntabs-section {
    width: 100% !important;
    border-radius: 12px;
    padding-inline: var(--safe-start) var(--safe-end) !important; /* مساحة آمنة يمين/شمال */
    box-sizing: border-box !important;
  }

  /* شريط الأزرار */
  .bntabs-menu {
    width: 100% !important;
    padding-inline: var(--safe-start) var(--safe-end) !important;
    box-sizing: border-box !important;
  }

  /* منطقة المحتوى */
  .bntabs-content-container {
    width: 100% !important;
    padding-inline: var(--safe-start) var(--safe-end) !important;
    box-sizing: border-box !important;
    overflow: visible !important;
  }

  /* الصورة جوه التاب النشط */
  .bntabs-content .bntabs-image {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
    margin: 16px auto 0 !important;
    border-radius: 12px !important;
  }

  /* النصوص: justify للفقرات فقط */
  .bntabs-text p {
    text-align: justify !important;
    text-justify: inter-word;
    hyphens: auto;
  }
}



/* ===== Fix long tab labels on mobile ===== */
@media (max-width: 768px) {
  .bntabs-menu .bntabs-button {
    white-space: normal !important;         /* خليه يتكسر */
    word-break: break-word !important;      /* كسر الكلمات الطويلة */
    overflow-wrap: break-word !important;   /* دعم إضافي */
    text-align: center !important;          /* النص يتوسطن */
    font-size: 0.8rem !important;           /* قلل الخط سنة */
    line-height: 1.2 !important;
    padding: 0.6rem 0.4rem !important;      /* padding أصغر شوية */
    display: flex !important;
    flex-direction: column !important;      /* الأيقونة فوق والنص تحت */
    align-items: center !important;
    justify-content: center !important;
  }

  /* الأيقونة فوق والنص تحته */
  .bntabs-menu .bntabs-button i {
    margin-bottom: 4px !important;
    font-size: 1rem !important;
  }
}






@media (max-width: 768px) {
  .vision-container {
    display: flex !important;
    flex-direction: column !important; /* نخلي كل حاجة تحت بعض */
    align-items: center !important;    /* وسط أفقي */
    gap: 20px !important;              /* مسافة بين العناصر */
    text-align: center !important;
  }

  /* ترتيب العناصر */
  .vision-content {
    order: 1 !important; /* العنوان الأول */
    width: 100% !important;
    padding: 0 20px !important;
  }

  .vision-images {
    order: 2 !important; /* الصور بعد العنوان */
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
    width: 100% !important;
    max-width: 500px !important; /* يفضل يبقى في حدود الموبايل */
  }

  .vision-content p {
    order: 3 !important; /* النص في الآخر */
    text-align: justify !important;
    margin-top: 10px !important;
  }
}





/* ===== Timeline - mobile horizontal slider ===== */
@media (max-width: 768px) {
  .alpha-tonnage-horizontal { padding: 24px 0 !important; }

  .alpha-tonnage-container{
    overflow-x: auto !important;
    overflow-y: visible !important;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding: 0 16px 16px !important;
  }

  .alpha-tonnage-track{
    display: inline-flex !important;
    gap: 16px !important;
    min-width: max-content !important; /* يمنع التكسير */
    align-items: flex-start;
    position: relative;
  }

  /* الخط الأحمر يمشي مع التراك كله */
  .alpha-tonnage-line{
    position: absolute !important;
    left: 0; right: 0;
    top: 78px;               /* ظبطه حسب ارتفاع البوكس */
    height: 2px;
    background: #8e1a0f;     /* نفس الأحمر */
    z-index: 0;
  }

  .alpha-tonnage-node{
    scroll-snap-align: start;
    flex: 0 0 auto !important;
    width: 75vw !important;      /* كل محطة تعرض مريحة */
    max-width: 360px !important;
    position: relative;
    z-index: 1;
  }

  .alpha-tonnage-circle{ margin: 0 auto 12px !important; }
  .alpha-tonnage-box{
    width: 100% !important;
    margin: 0 auto !important;
  }

  /* شكل الاسكرول أهدى */
  .alpha-tonnage-container::-webkit-scrollbar{ height: 6px; }
  .alpha-tonnage-container::-webkit-scrollbar-thumb{
    background:#ccc; border-radius: 10px;
  }
}




/* ===== Timeline hint (mobile only) ===== */
@media (max-width: 768px) {
  .alpha-timeline-hint {
    text-align: center;
    font-size: 12px;
    color: #777;
    margin-top: 10px;
    font-style: italic;
  }
}


/* Show timeline hint (robust) */
section.alpha-tonnage-horizontal {
  overflow: visible !important;
}

section.alpha-tonnage-horizontal .alpha-timeline-hint {
  display: block !important;
  position: relative !important;
  z-index: 10 !important;
  width: 100% !important;
  padding: 8px 16px !important;
  margin: 12px auto 0 !important;
  text-align: center !important;
  font-size: 12px !important;
  color: #777 !important;
  font-style: italic !important;
  clear: both !important;
}

/* مؤقتًا: ما نخبيهاش على الديسكتوب لغاية ما نتأكد إنها بتظهر */
@media (min-width: 769px) {
  section.alpha-tonnage-horizontal .alpha-timeline-hint { display: block !important; }
}

/* سيب مسافة تحت الكونتينر */
.alpha-tonnage-container { margin-bottom: 8px !important; }



/* ===== Timeline hint arrow (mobile only) ===== */
@media (max-width: 768px) {
  .alpha-timeline-arrow {
    text-align: center;
    margin-top: 14px;
  }

  .alpha-timeline-arrow::after {
    content: "➔";                     /* سهم */
    display: inline-block;
    font-size: 22px;
    color: #999;                      /* رمادي */
    animation: arrow-bounce 1.2s infinite;
  }

  @keyframes arrow-bounce {
    0%   { transform: translateX(0);   opacity: 0.5; }
    50%  { transform: translateX(6px); opacity: 1;   }
    100% { transform: translateX(0);   opacity: 0.5; }
  }
}



/* Services layout fix for mobile */
@media (max-width: 768px) {
  .service-block {
    flex-direction: column !important;   /* نزّل العناصر تحت بعض */
    align-items: center !important;      /* وسّطهم */
    text-align: center !important;       /* خلي النص في النص */
    gap: 16px;                           /* مسافة بسيطة بين العناصر */
  }

  .service-image img {
    max-width: 100%;
    height: auto;
    margin: 0 auto;
  }

  .service-text {
    padding: 0 12px;   /* سيب مساحة يمين وشمال */
  }

  .service-title {
    margin-top: 10px;
    font-size: 20px;   /* مناسب للموبايل */
  }
}







/* Mobile only separator between services */
@media (max-width: 768px) {
  .service-block {
    border-bottom: 1px solid #ddd;   /* خط رمادي فاتح */
    padding-bottom: 20px;            /* مسافة تحت النص */
    margin-bottom: 20px;             /* مسافة قبل اللي بعده */
  }

  /* آخر بلوك من غير خط */
  .service-block:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
  }
}




/* =============== Projects: mobile & tablet =============== */
@media (max-width: 992px) {
  /* حواف آمنة يمين/شمال */
  .projects-section .projects-container {
    padding: 0 16px !important;
  }

  /* العناوين */
  .projects-section .section-subtitle { 
    text-align: left; 
    margin-top: 8px; 
  }
  .projects-section .section-title {
    font-size: clamp(28px, 6vw, 36px);
    line-height: 1.15;
    margin: 8px 0 12px;
  }

  /* الفلاتر: صف واحد فوق بعض */
  .projects-section .filters-container { 
    margin: 8px 0 14px; 
  }
  .projects-section .filters {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    align-items: stretch;
  }
  .projects-section .filter-label {
    display: block;
    font-weight: 700;
    margin-bottom: 4px;
  }
  .projects-section .filter-dropdown,
  .projects-section .clear-filters {
    width: 100% !important;
    min-height: 44px !important;
    font-size: 16px;
  }
  .projects-section .clear-filters {
    justify-content: center;
    display: inline-flex;
    align-items: center;
    gap: 8px;
  }

  /* الجريد */
  .projects-section .projects-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;   /* موبايل: كارت واحد */
    gap: 16px !important;
  }
  /* تابلت (لو حابب عمودين) */
  @media (min-width: 576px) and (max-width: 992px) {
    .projects-section .projects-grid {
      grid-template-columns: repeat(2, 1fr) !important;
    }
  }

  /* الكروت */
  .projects-section .project-box {
    position: relative;
    aspect-ratio: 4 / 3;               /* ارتفاع ثابت لطيف */
    min-height: 220px;
    border-radius: 8px;
    overflow: hidden;
    background-size: cover;
    background-position: center;
  }
  .projects-section .project-gradient {
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,.05) 20%, rgba(0,0,0,.6) 100%);
  }
  .projects-section .project-content {
    position: absolute; left: 0; right: 0; bottom: 0;
    padding: 14px;
  }
  .projects-section .project-name a {
    display: -webkit-box;
    -webkit-line-clamp: 2;              /* لو العنوان طويل */
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-word;
    font-size: 18px;
    line-height: 1.2;
  }
  .projects-section .project-location {
    font-size: 14px;
    opacity: .9;
    margin-top: 4px;
  }

  /* زرار Load More */
  .projects-section #load-more {
    width: 100% !important;
    margin: 18px 0 4px;
    min-height: 44px;
    font-size: 16px;
  }
}

/* تحسين بسيط للـ select على iOS/Android */
.projects-section .filter-dropdown {
  -webkit-appearance: none;
  appearance: none;
  background-color: #fff;
  padding: 10px 12px;
  border: 1px solid #ddd;
  border-radius: 6px;
}

/* لو الصفحة عربية (RTL) خلّي الاتجاه يمين */
html[dir="rtl"] .projects-section .filters,
html[dir="rtl"] .projects-section .projects-container { direction: rtl; }


.projects-section .project-box {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  background-size: cover;
  background-position: center;
}

/* خلي الـ shade يغطي الكارت كله */
.projects-section .project-gradient {
  position: absolute;
  inset: 0; /* top:0; right:0; bottom:0; left:0 */
  width: 100%;
  height: 100%;
  background: linear-gradient(
    180deg, 
    rgba(0, 0, 0, 0.05) 20%, 
    rgba(0, 0, 0, 0.7) 100%
  );
  pointer-events: none; /* عشان ما يمنعش الكليك على اللينك */
}




/* ================================
   Media Center (News & Insights)
   Mobile ≤ 768px
   ================================ */
@media (max-width: 768px) {

  /* أقصى عرض موحّد للحاويات */
  .unique-news-section { --mcw: 680px; padding-block: 32px; }

  /* حاوية الصفحة + الجريد لهم نفس التوسيط والمسافات */
  .unique-news-container,
  .unique-news-grid {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: var(--mcw) !important;
    margin-inline: auto !important;
    padding-inline: 16px !important;     /* مساحة آمنة يمين/شمال */
    float: none !important;
    clear: both !important;
  }

  /* العناوين */
  .unique-news-subtitle {
    display: block;
    font-size: 14px;
    letter-spacing: .08em;
    margin-bottom: 4px;
    color: #8a907e;
  }
  .unique-news-title {
    font-size: clamp(26px, 6vw, 36px);
    line-height: 1.15;
    margin: 0 0 16px;
  }

  /* فلاتر السنة/النوع (بوكس واحد ناعم) */
  .year-filter-container {
    box-sizing: border-box;
    width: 100% !important;
    max-width: var(--mcw) !important;
    margin: 4px auto 18px !important;
    padding: 12px !important;
    display: grid !important;
    grid-template-columns: 1fr;
    gap: 10px;
    align-items: center;
    background: #f4f4f4;
    border-radius: 10px;
  }
  .year-filter-container label { font-size: 14px; color: #333; }
  .year-filter-container select {
    width: 100% !important;
    appearance: none;
    padding: 10px 12px;
    border: 1px solid #ddd;
    border-radius: 8px;
    background: #fff;
    font-size: 15px;
  }
  .year-filter-container .reset-button {
    width: 100%;
    padding: 10px 12px;
    border-radius: 8px;
    border: 1px solid #ddd;
    background: #fff;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
  }

  /* شبكة الأخبار = عمود واحد متسنتر ومتمدّد */
  .unique-news-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 18px !important;

    /* إزالة أي بواقي ستايلات بتزقها يمين */
    justify-content: normal !important;
    align-content: start !important;
    justify-items: stretch !important;
    padding-inline: 16px !important;     /* نفس حواف الحاوية */
  }

  /* الكارد */
  .unique-news-item {
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 8px 22px rgba(0,0,0,.06);
    width: 100% !important;
    margin: 0 !important;
    display: block !important;

    /* فلتر أي خواص ترِثها من ثيم عام */
    float: none !important;
    right: auto !important;
    left: auto !important;
    box-sizing: border-box !important;
  }

  /* الصورة */
  .unique-news-item img {
    display: block;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 16/9;
    object-fit: cover;
  }

  /* النصوص داخل الكارد — نفس الحافة الجانبية للكل */
  .unique-news-date,
  .unique-news-item h3,
  .unique-news-description,
  .unique-read-more {
    margin-inline: 14px !important;
  }

  .unique-news-date { display: block; font-size: 14px; color: #7a7a7a; margin-top: 12px !important; }
  .unique-news-item h3 { font-size: 20px; line-height: 1.25; margin-block: 6px 8px !important; color: #7a2116; text-align: start !important; }
  .unique-news-description { font-size: 15px; line-height: 1.6; margin-bottom: 12px !important; color: #444; text-align: justify; }
  .unique-read-more { display: inline-block; margin-bottom: 14px !important; font-weight: 600; }

  /* دعم RTL */
  html[dir="rtl"] .unique-news-container { text-align: right; }
  html[dir="rtl"] .year-filter-container { direction: rtl; }
  html[dir="rtl"] .unique-news-item h3,
  html[dir="rtl"] .unique-news-date { text-align: right !important; }
}






/* ===== Contact page (mobile-first tidy) ===== */

/* حاوية آمنة يمين/شمال وتوسيط عام */
@media (max-width: 768px) {
  .bonyan-section { padding: 40px 0 24px; }
  .bonyan-section .bonyan-content {
    width: 100%;
    max-width: 820px;
    margin: 0 auto;
    padding: 0 18px;               /* مساحة آمنة */
  }

  .bonyan-section .bonyan-subtitle {
    text-align: center;
    margin: 0 0 6px;
    letter-spacing: .08em;
  }
  .bonyan-section .bonyan-content h1 {
    text-align: center;
    font-size: clamp(28px, 7vw, 40px);
    line-height: 1.15;
    margin: 0 0 10px;
  }

  .bonyan-section .job-details p {
    font-size: 18px;
    line-height: 1.85;
    text-align: justify;
    margin: 0 auto 18px;
  }

  /* الشبكة: عمود واحد كروت نظيفة */
  .alpha-contact-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 18px !important;
    align-items: start;
    justify-items: center;
  }

  .alpha-contact-box {
    width: 100%;
    background: #fff;
    border-radius: 12px;
    padding: 18px 18px 16px;
    box-shadow: 0 10px 24px rgba(0,0,0,.06);
    text-align: center;
  }
  .alpha-contact-icon {
    font-size: 28px;
    color: #7a2116;
    margin-bottom: 10px;
  }
  .alpha-contact-box h4 {
    margin: 6px 0 10px;
    font-size: 20px;
  }
  .alpha-contact-box > div { font-size: 18px; line-height: 1.8; }

  /* اخفي العمود الفاصل على الموبايل */
  .alpha-divider { display: none !important; }

  /* لينكات واضحة */
  .alpha-contact-box a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
  }
  .alpha-contact-box a:hover { text-decoration-thickness: 2px; }
}

/* دِسكتوب/تابلت: عمودين وبينهم فاصل رأسي */
@media (min-width: 769px) {
  .alpha-contact-grid {
    display: grid;
    grid-template-columns: 1fr 1px 1fr;
    column-gap: 28px;
    align-items: stretch;
  }
  .alpha-divider {
    display: block;
    width: 1px;
    background: #e3e3e3;
  }
  .alpha-contact-box { padding: 20px 28px; text-align: left; }
  html[dir="rtl"] .alpha-contact-box { text-align: right; }
}



/* ✅ Mobile & Tablet */
@media (max-width: 992px) {
  .job-details-form-wrapper {
    display: flex;
    flex-direction: column;   /* بدل جنب بعض */
    gap: 20px;                /* مسافة بين الخريطة والفورم */
    height: auto;             /* مفيش ارتفاع ثابت */
    align-items: stretch;
  }

  .job-details-left,
  .job-form-right {
    width: 100%;
  }

  /* ارتفاع مريح للخرائط على الموبايل */
  .job-details-left a { height: auto; display: block; }
  .job-details-left iframe {
    width: 100%;
    height: 320px;            /* غيّرها لـ 280–380 حسب مزاجك */
    border-radius: 10px;
  }

  /* تباعد داخلي للفورم */
  .job-form-right {
    padding: 18px;
  }

  /* العناوين والمسافات */
  .form-title { font-size: 18px; margin-bottom: 12px; }
  .job-form-right input,
  .job-form-right textarea { font-size: 15px; }
}


/* 📱 تحسين محاذاة الخريطة والفورم على الموبايل */
@media (max-width: 992px) {

  /* نخلي كل عنصر ياخد 100% ونتعامل بعرض أقصى موحّد */
  .job-details-left,
  .job-form-right {
    width: 100%;
    max-width: 680px;      /* تقدر تخليها 560–720 حسب ذوقك */
    margin-left: auto;
    margin-right: auto;    /* توسيط أفقي */
  }

  /* نضمن إن الـiframe فعلاً يتمدد بكامل العرض */
  .job-details-left a {
    display: block;
    width: 100%;
  }
  .job-details-left iframe {
    display: block;
    width: 100% !important;
    height: 360px;         /* لو كبير: جرّب 300–340 */
    max-width: 100%;
    border-radius: 12px;
  }

  /* مسافات أنضف */
  .job-details-form-wrapper { gap: 24px; }
  .job-form-right { padding: 20px; }

  /* توسيط العناوين فوق */
  .unique-news-subtitle,
  .unique-news-title { text-align: center; }
}
@media (max-width: 992px) {
  iframe { max-width: none !important; }
}
/* 📱 ضبط المسافات ومنع أي تداخل مع الفوتر */
@media (max-width: 992px) {
  .unique-news-section {
    padding-bottom: 64px;   /* مسافة مريحة قبل الفوتر */
    margin-bottom: 0;       /* لو فيه مارجن متراكم */
  }

  .job-details-form-wrapper {
    height: auto !important; /* يمنع أي ارتفاع ثابت يزقّ تحت */
    padding-bottom: 16px;
  }

  /* تأكيد التوسيط والعرض الكامل */
  .job-details-left,
  .job-form-right {
    width: 100%;
    max-width: 680px;
    margin: 0 auto;         /* توسيط */
    position: relative;     /* يخلق سياق جديد ويمنع أي تداخل غريب */
  }

  .job-details-left a { display:block; width:100%; }
  .job-details-left iframe {
    display: block;
    width: 100% !important;
    height: 340px;
    border-radius: 12px;
  }
}


@media (max-width: 992px) {
  .job-details-form-wrapper {
    flex-direction: column;
    align-items: center;
    gap: 32px; /* مسافة أكبر بين الخريطة والفورم */
    height: auto !important;
  }

  .job-details-left,
  .job-form-right {
    width: 95%;       /* العرض أكبر */
    max-width: 750px; /* يملأ الشاشة بشكل محترم */
    margin: 0 auto;
  }

  .job-details-left iframe {
    width: 100% !important;
    height: 360px;    /* ارتفاع مناسب */
    border-radius: 12px;
  }

  .job-form-right {
    padding: 24px;   /* مساحة داخلية مريحة */
  }
}


@media (max-width: 992px) {
  .job-details-form-wrapper {
    flex-direction: column !important;
    align-items: center !important;
    gap: 32px !important;      /* المسافة بين الخريطة والفورم */
    height: auto !important;
  }

  .job-details-left,
  .job-form-right {
    width: 95% !important;     /* خليهم أعرض */
    max-width: 750px !important;
    margin: 0 auto !important; /* توسيط */
    display: block !important;
  }

  .job-details-left iframe {
    width: 100% !important;
    height: 360px !important;
    border-radius: 12px !important;
    display: block !important;
  }

  .job-form-right {
    padding: 24px !important;
  }
}


@media (max-width: 992px) {
  .job-details-form-wrapper {
    flex-direction: column !important;
    align-items: center !important;
    gap: 28px !important;       /* مسافة ثابتة بين الكروت */
    height: auto !important;
  }

  .job-details-left,
  .job-form-right {
    width: 92% !important;      /* نفس العرض للاتنين */
    max-width: 720px !important; /* موحّد */
    margin: 0 auto !important;
  }

  .job-details-left iframe {
    width: 100% !important;
    height: 360px !important;   /* نفس الكارت */
    border-radius: 12px !important;
    display: block !important;
  }

  .job-form-right {
    padding: 24px !important;
    box-sizing: border-box !important;
  }
}

@media (max-width: 992px) {
  .job-details-left,
  .job-form-right {
    width: 96% !important;      /* زودنا العرض من 92% → 96% */
    max-width: 800px !important; /* كمان رفعنا الحد الأقصى */
    margin: 0 auto !important;
  }

  .job-details-left iframe {
    width: 100% !important;
    height: 360px !important;
    border-radius: 12px !important;
    display: block !important;
  }
}



/* 📱 Mobile layout fine-tune */
@media (max-width: 768px){

  /* شبكة 2 أعمدة متساويين */
  .alpha-grid{
    display:grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 10px;
    row-gap: 10px;
  }

  /* خليك مأمن إن العناصر ما توسّعش العمود */
  .alpha-grid .alpha-field{ min-width:0; }

  /* سطر 1: Full Name = عرض كامل */
  .alpha-grid .alpha-field:nth-child(1){
    grid-column: 1 / -1;  /* full width */
    grid-row: 1;
  }

  /* سطر 2: Company = عرض كامل */
  .alpha-grid .alpha-field:nth-child(2){
    grid-column: 1 / -1;  /* full width */
    grid-row: 2;
  }

  /* سطر 3: Position | Industry */
  .alpha-grid .alpha-field:nth-child(3){ grid-column:1; grid-row:3; }
  .alpha-grid .alpha-field:nth-child(4){ grid-column:2; grid-row:3; }

  /* سطر 4: Phone | Email (نص/نص متساويين) */
  .alpha-grid .alpha-field:nth-child(5){ grid-column:1; grid-row:4; }
  .alpha-grid .alpha-field:nth-child(6){ grid-column:2; grid-row:4; }

  /* سطر 5: Preferred Date | Preferred Time */
  .alpha-grid .alpha-field:nth-child(7){ grid-column:1; grid-row:5; }
  .alpha-grid .alpha-field:nth-child(8){ grid-column:2; grid-row:5; }

  /* سطر 6: Meeting Type | Department */
  .alpha-grid .alpha-field:nth-child(9) { grid-column:1; grid-row:6; }
  .alpha-grid .alpha-field:nth-child(10){ grid-column:2; grid-row:6; }

  /* سطر 7: Meeting Description = عرض كامل Textarea */
  .alpha-field--full{
    grid-column: 1 / -1;  /* full width */
    grid-row: 7;
  }
  .alpha-field--full textarea{
    min-height: 88px;          /* ارتفاع عملي وصغير */
    resize: vertical;
  }

  /* ضبط الأحجام والمسافات عشان كله يركّب في شاشة واحدة */
  #meetingModalTitle{ font-size:22px; line-height:1.15; margin:0 0 6px; }
  .alpha-modal__subtitle{
    font-size:13px; line-height:1.35; margin:0 0 10px;
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; /* اختصار للنص */
  }
  .alpha-field label{ font-size:12px; margin-bottom:4px; }
  .alpha-field input,
  .alpha-field select,
  .alpha-field textarea{
    width:100%;
    box-sizing:border-box;
    padding:10px 12px;
    font-size:14px;
    border-radius:8px;
  }

  /* زرار مشدود وتحت */
  .alpha-btn{ padding:10px 14px; font-size:13px; border-radius:8px; margin-top:10px; }

  /* صندوق المودال مضغوط لو الشاشة قصيرة */
  .alpha-modal__dialog{
    max-width:96vw;
    max-height:calc(100dvh - 24px);
    overflow:auto;
    -webkit-overflow-scrolling:touch;
    border-radius:12px;
  }
}



/* ===== Mobile: make fields EXACT 50/50 and lift button a bit ===== */
@media (max-width: 768px){

  /* استخدم Flex بدل Grid */
  .alpha-grid{
    display: flex !important;
    flex-wrap: wrap;
    gap: 10px;                 /* نفس مسافة الأعمدة */
    align-items: flex-start;
  }

  /* كل حقل ياخد نص المساحة بالظبط */
  .alpha-grid .alpha-field{
    flex: 0 0 calc(50% - 5px); /* 50/50 + تعويض نصف الـgap */
    max-width: calc(50% - 5px);
    min-width: 0;
    box-sizing: border-box;
  }

  /* Full Name + Company صف كامل */
  .alpha-grid .alpha-field:nth-child(1),
  .alpha-grid .alpha-field:nth-child(2),
  .alpha-field--full{
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }

  /* عناصر الإدخال تملى عرض عمودها بالمللي */
  .alpha-field input,
  .alpha-field select,
  .alpha-field textarea{
    width: 100% !important;
    box-sizing: border-box;
    padding: 10px 12px;
    font-size: 14px;
    border-radius: 8px;
  }
  .alpha-field select{ -webkit-appearance:none; appearance:none; }

  /* اختصر النص تحت العنوان/اخفيه لو حابب */
  .alpha-modal__subtitle{ display:none; }

  /* خلي الزر في الشاشة وارفعه شوية */
  .alpha-btn.alpha-btn--primary{
    width: 100%;
    margin-top: 10px;
    margin-bottom: 4px; /* مسافة بسيطة فوق الحافة السفلية */
    padding: 10px 14px;
    font-size: 13px;
    border-radius: 8px;
  }

  /* مسافات أقل للحاوية عشان كل حاجة تِركب */
  .alpha-modal__dialog{
    max-width: 96vw;
    padding: 14px;
    border-radius: 12px;
    max-height: calc(100dvh - 24px);
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: calc(env(safe-area-inset-bottom) + 10px);
  }

  /* ارتفاع مريح للرسالة لكن مش كبير */
  .alpha-field--full textarea{ min-height: 100px; }
}



@media (max-width: 768px){

  .alpha-grid{
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
  }

  /* الافتراضي: صف كامل */
  .alpha-grid .alpha-field{
    flex: 0 0 100%;
    max-width: 100%;
  }

  /* الأزواج اللي محتاجين نص/نص */
  .alpha-grid .alpha-field.position,
  .alpha-grid .alpha-field.industry,
  .alpha-grid .alpha-field.phone,
  .alpha-grid .alpha-field.email,
  .alpha-grid .alpha-field.date,
  .alpha-grid .alpha-field.time,
  .alpha-grid .alpha-field.meeting-type,
  .alpha-grid .alpha-field.department {
    flex: 0 0 calc(50% - 5px);
    max-width: calc(50% - 5px);
  }

  /* description = صف كامل */
  .alpha-field--full{
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }
}



@media (max-width: 768px){
  a.meeting-button-1{
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 1px solid #aaa !important;   /* رمادي */
    color: #2F353B !important;
    background: transparent !important;
    padding: 8px 16px !important;        /* يخلي الارتفاع مناسب */
    border-radius: 8px;                  /* كيرف بسيط */
    font-size: 14px;
    line-height: 1.4;
  }

  a.meeting-button-1:hover{
    border-color: #841506 !important;
    color: #841506 !important;
  }
}

@media (max-width: 768px){
  a.meeting-button-1{
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 1px solid #aaa !important;
    color: #2F353B !important;
    background: transparent !important;
    padding: 8px 16px !important;
    border-radius: 8px;
    font-size: 14px;
    line-height: 1.4;
    margin-top: 12px !important;   /* ← المسافة اللي هتنزله لتحت */
  }
}



/* ===== Mobile logos: ثابتة ومتوازنة ===== */
@media (max-width: 768px){
  .partners-section .logos-slider{
    gap: 8px !important;             /* مسافة موحدة */
  }

  .partners-section .logo-box{
    flex: 0 0 75px !important;       /* ≈ 5 لوجوهات على عرض 375px */
    width: 75px !important;
    height: 60px !important;         /* صندوق موحّد */
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
  }

  .partners-section .logo-box img{
    max-width: 100% !important;
    max-height: 50px !important;     /* يحافظ على التناسب */
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
    display: block;
  }
}

/* شاشات صغيرة جدًا */
@media (max-width: 420px){
  .partners-section .logos-slider{ gap: 5px !important; }
  .partners-section .logo-box{
    flex: 0 0 65px !important;
    width: 65px !important;
  }
  .partners-section .logo-box img{ max-height: 46px !important; }
}




/* === Home hero slider full height on mobile === */
@media (max-width: 768px){
  .home .slider-container{
    position: relative;
    width: 100%;
    height: 100vh !important;
    min-height: 100vh !important;
    overflow: hidden;
  }
  @supports (height: 100svh){
    .home .slider-container{ height: 100svh !important; min-height: 100svh !important; }
  }
  @supports (height: 100dvh){
    .home .slider-container{ height: 100dvh !important; min-height: 100dvh !important; }
  }

  .home .slider{
    position: absolute;
    inset: 0;
    height: 100% !important;
  }

  .home .slider img{
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block;
  }

  /* تأكد إن أي ارتفاعات قديمة ما تعاكسش */
  .home .slider-container img,
  .home .slider-container .slick-slide,
  .home .slider-container .swiper-slide{
    height: 100% !important;
  }

  .home .overlay{ position:absolute; inset:0; z-index:2; }
  .home .slogan{
    position:absolute; z-index:3;
    left:50%; top:50%; transform:translate(-50%,-50%);
    text-align:center; padding:0 16px;
  }
}





/* ===== Mobile: center hero slogan ===== */
@media (max-width: 768px){
  .hero .slider-container{
    min-height: 100svh;       /* يملأ الشاشة فعليًا على iOS/أندرويد */
    position: relative;
  }

  .hero .overlay{ z-index: 1; }  /* التعتيم تحت النص */
  
  .hero .slogan{
    position: absolute;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;

    width: min(92vw, 680px);
    padding: 0 12px;
    text-align: center;

    z-index: 2;               /* فوق الـ overlay */
    bottom: auto !important;  /* إلغاء القيم القديمة */
    right:  auto !important;
  }

  .hero .slogan .slogan-subtext{
    display: block;
    margin-top: 12px;
    line-height: 1.4;
    font-size: clamp(14px, 2.6vw, 18px);
  }
}




/* ===== Mobile + RTL: center & size Arabic hero slogan ===== */
@media (max-width: 768px){
  html[dir="rtl"] .hero .slider-container{
    min-height: 100svh;
    position: relative;
  }

  html[dir="rtl"] .hero .slogan{
    position: absolute;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;

    /* عرض مناسب مع تمركز */
    max-width: 92vw !important;
    width: auto !important;
    padding: 0 12px !important;
    text-align: center !important;
    z-index: 2;

    /* خط عربي وحجم أصغر */
    font-family: "Cairo", system-ui, sans-serif !important;
    font-size: clamp(28px, 9.5vw, 40px) !important;
    line-height: 1.05 !important;
    letter-spacing: 0 !important;

    /* الغي أي تموضع قديم */
    right: auto !important;
    bottom: auto !important;
  }

  html[dir="rtl"] .hero .slogan .slogan-subtext{
    display: block;
    margin-top: 12px;
    font-size: clamp(14px, 3.7vw, 18px) !important;
    line-height: 1.4 !important;
  }
}


@media (max-width: 768px){
  html[dir="rtl"] .hero .slogan{
    /* كان 92vw و padding: 0 12px */
    max-width: 96vw !important;
    padding: 0 6px !important;
  }
}




/* Desktop (RTL only) – vision section spacing */
@media (min-width: 992px){
  html[dir="rtl"] .vision-section .vision-container{
    gap: 56px;
  }

  html[dir="rtl"] .vision-section .vision-content{
    padding-inline-start: 24px;
  }
}







/* ===== Project inner — Mobile (≤768px) FINAL ===== */
@media (max-width: 768px) {

  /* Hero container */
  .slider-container{
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: center !important;

    /* املا الشاشة + مسافة آمنة تحت عشان الأيقونات ما تتقصّش */
    min-height: 100svh !important;
    padding: 16px 16px 24px !important;
    box-sizing: border-box !important;
  }
  /* دعم النوتش / السيف إريا لتحت */
  @supports(padding: max(0px)){
    .slider-container{ padding-bottom: max(24px, env(safe-area-inset-bottom) + 28px) !important; }
  }

  /* Overlay يغطي الصورة بالكامل */
  .slider-container .gradient-overlay{
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: rgba(0,0,0,0.45) !important;
    z-index: 1 !important;
    pointer-events: none !important;
  }

  /* Title + Slogan (زي ما اتفقنا) */
  /* نزّل العنوان والسلوغان أكتر */
.slider-container .project-title-wrapper{
  position:relative !important;
  z-index:2 !important;
  text-align:center !important;
  max-width:92% !important;
  margin: clamp(200px, 30vh, 260px) auto 10px !important; /* نزّل أكتر */
}
.slider-container .project-title-wrapper h1{
  font-size: clamp(30px, 8vw, 38px) !important;
  line-height: 1.22 !important;
  margin: 0 0 8px !important;
  text-shadow: 0 2px 10px rgba(0,0,0,.45);
}
.slider-container .project-title-wrapper .slogan-subtext{
  font-size: 15px !important;
  line-height: 1.45 !important;
  margin: 0 auto 6px !important;   /* قللنا المسافة مع الداتا */
  max-width: 90% !important;
  text-shadow: 0 2px 8px rgba(0,0,0,.45);
}


  /* Project info — 2×2 ومن تحت */
  .project-info{
    position: relative !important;
    z-index: 2 !important;
    width: 100% !important;
    max-width: 760px !important;

    /* خليه يلزق في أسفل الهيرو لكن يسيب مسافة آمنة */
    margin-top: auto !important;
    margin-bottom: 0 !important;
    padding: 0 8px 28px !important;

    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 16px 18px !important;
    text-align: center !important;
  }

  .project-info-item{
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 4px 6px !important;
  }
  .project-info-item i{
    font-size: 20px !important;
    margin-bottom: 6px !important;
    color: #fff !important;
  }
  .project-info-item strong{
    display: block !important;
    font-size: 14px !important;
    margin-bottom: 2px !important;
  }
  .project-info-item span,
  .project-info-item p{
    font-size: 15px !important;
    line-height: 1.35 !important;
    margin: 0 !important;
  }
}



/* === Project inner — mobile final override === */
@media (max-width: 768px) {

  /* خلي الأوفرلاي مغطي كله */
  .slider-container .gradient-overlay{
    position:absolute !important; inset:0 !important; width:100%!important; height:100%!important;
    background: rgba(0,0,0,.45) !important; z-index:1 !important; pointer-events:none !important;
  }

  /* نزّل العنوان والسلوغان شوية */
  .slider-container .project-title-wrapper{
    position:relative !important;
    z-index:2 !important;
    text-align:center !important;
    max-width:92% !important;
    /* كَبّر الهامش عشان ينزل تحت اللوجو */
   margin: clamp(280px, 38vh, 360px) auto 14px !important;


  }
  .slider-container .project-title-wrapper h1{
    font-size: clamp(30px, 8vw, 38px) !important;
    line-height: 1.22 !important;
    margin: 0 0 10px !important;
    text-shadow: 0 2px 10px rgba(0,0,0,.45);
  }
  .slider-container .project-title-wrapper .slogan-subtext{
    font-size: 15px !important;
    line-height: 1.45 !important;
    margin: 0 auto 16px !important;
    max-width: 90% !important;
    text-shadow: 0 2px 8px rgba(0,0,0,.45);
  }

  /* نزّل بلوك الأيقونات سنة لتحت وسيبه جوّه الشاشة */
  .slider-container .project-info{
    position:relative !important; z-index:2 !important;
    display:grid !important; grid-template-columns: repeat(2,1fr) !important;
    gap:16px 18px !important; text-align:center !important;
    width:100% !important; max-width:760px !important;
    margin-top:auto !important;               /* يرسى تحت الهيرو */
    margin-bottom:0 !important;
    padding: 0 8px 36px !important;           /* نزّل سيكا لتحت */
  }
  @supports(padding: max(0px)){
    .slider-container .project-info{
      padding-bottom: max(36px, env(safe-area-inset-bottom) + 28px) !important;
    }
  }
}
.project-title-wrapper .slogan-subtext {
  margin: 0 auto 6px !important; /* بدل 16px */
}
.slider-container .project-info {
  margin-top: 8px !important; /* يخلي الداتا أقرب شوية */
}






/* ==== Related Projects – mobile & tablet ==== */

/* موبايل ≤768px: كارت واحد في الصف */
@media (max-width: 768px) {
  .related-projects-section { padding: 48px 0 64px; }
  .related-projects-section .container { padding-inline: 16px; }

  .related-grid{
    display: grid !important;
    grid-template-columns: 1fr !important;   /* عمود واحد */
    gap: 16px !important;
    justify-items: stretch !important;
  }

  .related-box{
    width: 100% !important;
    max-width: 520px;
    margin: 0 auto;                          /* يوسّط الكارت */
    border-radius: 12px;
  }

  .related-image{ flex: 0 0 200px !important; }   /* ارتفاع الصورة مناسب للموبايل */
  .related-name{ font-size: 18px; line-height: 1.3; margin: 12px 14px 0; min-height: auto; }
  .related-location{ margin: 8px 14px 16px; }
}

/* تابلت 576–992px: عمودين */
@media (min-width: 576px) and (max-width: 992px) {
  .related-projects-section .container { padding-inline: 20px; }
  .related-grid{
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;  /* عمودين */
    gap: 20px !important;
  }
  .related-box{ width: 100% !important; }
}

/* ديسكتوب: سيب الإعدادات الحالية كما هي (flex + width:440px) */






/* Mobile fix – make each image fully cover its card */
@media (max-width: 768px){
  .image-gallery-section .image-grid{
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
  }

  .image-gallery-section .image-grid > a{
    position: relative !important;
    display: block !important;
    overflow: hidden !important;
    aspect-ratio: 4 / 3 !important;      /* نسبة الكارد */
    border-radius: 12px !important;
    background: #eee !important;
  }

  .image-gallery-section .image-grid > a > img{
    position: absolute !important;
    inset: 0 !important;                  /* top/right/bottom/left: 0 */
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
    display: block !important;
  }
}



/* ===== Project hero info (mobile only) ===== */
@media (max-width: 768px){

  /* ارفع بلوك الداتا شوية من غير ما نغيّر مكان العنوان */
  .project-info{
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;   /* 2 في الصف */
    grid-auto-rows: 1fr !important;              /* ارتفاع الصف = أعلى بطاقة فيه */
    align-items: start !important;               /* كل العناصر تبقى طالعة من فوق */
    justify-items: center !important;
    gap: 14px 18px !important;
    padding: 0 14px 16px !important;
    margin-top: auto !important;                 /* خليها تحت الهيرو… */
    transform: translateY(-28px);                /* …وبعدين نطلعها 28px لفوق */
    z-index: 2 !important;
  }

  /* أول اتنين دايمًا جنب بعض في الصف الأول */
  .project-info .project-info-item:nth-child(1){ grid-column:1; grid-row:1; }
  .project-info .project-info-item:nth-child(2){ grid-column:2; grid-row:1; }

  /* البطاقات تبقى نفس الارتفاع جوه الصف */
  .project-info .project-info-item{
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    height: 100% !important;                    /* يملوا صفهم */
    padding: 4px 6px !important;
  }

  /* أيقونات ونصوص متناسقة */
  .project-info .project-info-item i{ 
    font-size: 20px !important; 
    margin-bottom: 4px !important; 
  }
  .project-info strong{
    font-size: 14px !important;
    margin-bottom: 2px !important;
    letter-spacing: .02em;
  }
  .project-info .project-info-item span,
  .project-info .project-info-item p{
    font-size: 15px !important;
    line-height: 1.35 !important;
    margin: 0 !important;
  }
}


/* === Project hero – Mobile hard-override === */
@media (max-width: 768px){

  /* ارفع الداتا بس سنة وخلي فيه مساحة آمنة تحت */
  body[class*="single-project"] .slider-container .project-info{
    transform: translateY(-24px) !important;                    /* لو عايزها أعلى: -28/-32 */
    padding-bottom: max(42px, env(safe-area-inset-bottom) + 26px) !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    grid-auto-rows: 1fr !important;                              /* صفوف متساوية الارتفاع */
    align-items: start !important;
    justify-items: center !important;
    gap: 14px 18px !important;
  }

  /* ثبّت أول اتنين جنب بعض مهما كان طول النص */
  body[class*="single-project"] .project-info .project-info-item:nth-child(1){ grid-column:1; grid-row:1; }
  body[class*="single-project"] .project-info .project-info-item:nth-child(2){ grid-column:2; grid-row:1; }

  /* جوّه كل بطاقة: شبكة 3 صفوف = أيقونة / عنوان / القيمة */
  body[class*="single-project"] .project-info .project-info-item{
    display: grid !important;
    grid-template-rows: min-content min-content 1fr !important;  /* الأيقونة والسترونج ثابتين */
    row-gap: 4px !important;
    align-content: start !important;
    justify-items: center !important;
    height: 100% !important;
    padding: 2px 6px !important;
    text-align: center !important;
  }

  /* توحيد مقاسات الأيقونة والعنوان لضمان نفس الـ level */
  body[class*="single-project"] .project-info .project-info-item i{
    font-size: 20px !important;
    margin: 0 !important;
    align-self: end !important;
  }
  body[class*="single-project"] .project-info .project-info-item strong{
    font-size: 14px !important;
    line-height: 1.1 !important;
    margin: 0 !important;
    align-self: start !important;
  }

  /* نص القيمة */
  body[class*="single-project"] .project-info .project-info-item span,
  body[class*="single-project"] .project-info .project-info-item p{
    font-size: 15px !important;
    line-height: 1.35 !important;
    margin: 0 !important;
  }
}




/* === Project hero – mobile tighten & lift === */
@media (max-width: 768px){

  /* ارفع البلوك كله لفوق وسيب مساحة آمنة تحت */
  .slider-container .project-info{
    transform: translateY(-56px) !important;      /* كان -24/-28، زودناه */
    padding-bottom: max(54px, env(safe-area-inset-bottom) + 26px) !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 14px 18px !important;
    align-items: start !important;
    justify-items: center !important;
  }

  /* ثبّت أول اتنين في الصف الأول */
  .project-info .project-info-item:nth-child(1){ grid-column:1; grid-row:1; }
  .project-info .project-info-item:nth-child(2){ grid-column:2; grid-row:1; }

  /* جوّه كل بطاقة: الأيقونة ثم العنوان ثم القيمة مباشرة */
  .project-info .project-info-item{
    display: grid !important;
    grid-template-rows: min-content min-content auto !important; /* القيمة تحت العنوان فورًا */
    row-gap: 2px !important;                                     /* قلّل المسافة */
    align-content: start !important;
    justify-items: center !important;
    height: auto !important;                                      /* بلاش تمديد يجبر مسافات */
    padding: 2px 6px !important;
    text-align: center !important;
  }

  /* مقاسات موحّدة للأيقونة والعنوان */
  .project-info .project-info-item i{
    font-size: 20px !important;
    margin: 0 0 2px !important;   /* الأيقونة قريبة من العنوان */
  }
  .project-info .project-info-item strong{
    font-size: 14px !important;
    line-height: 1.1 !important;
    margin: 0 !important;
  }

  /* القيمة: من غير أيMargins إضافية */
  .project-info .project-info-item span,
  .project-info .project-info-item p{
    font-size: 15px !important;
    line-height: 1.32 !important;
    margin: 0 !important;
  }

  /* فلتر أي هوامش موروثة قد تزود فراغات */
  .project-info .project-info-item *{
    margin-block-start: 0 !important;
    margin-block-end:   0 !important;
  }
}





/* ===== Project hero info — MOBILE rows (icon | label | value) ===== */
@media (max-width: 768px){

  /* خلي البلوك كله يطلع لفوق شوية ويكون صفوف تحت بعض */
  .slider-container .project-info{
    display: grid !important;
    grid-template-columns: 1fr !important;     /* صف واحد لكل عنصر */
    gap: 12px !important;
    width: 100% !important;
    max-width: 760px !important;
    margin-top: auto !important;
    transform: translateY(-66px) !important;   /* زوّد/قلّل حسب الشاشة: -60 → -72 */
    padding: 0 16px max(56px, env(safe-area-inset-bottom) + 26px) !important;
    z-index: 2 !important;
    text-align: left !important;
  }

  /* كل عنصر = فليكس: أيقونة | لابل | قيمة */
  .project-info .project-info-item{
    display: flex !important;
    align-items: flex-start !important;   /* يخلّي التلاتة على نفس السطر من أعلى */
    gap: 10px !important;
    line-height: 1.35 !important;
    word-break: break-word !important;
    padding: 2px 0 !important;
  }

  .project-info .project-info-item i{
    flex: 0 0 22px !important;            /* عرض ثابت للأيقونة */
    font-size: 20px !important;
    line-height: 1 !important;
    margin: 2px 0 0 0 !important;         /* محاذاة صغيرة لفوق */
  }

  .project-info .project-info-item strong{
    flex: 0 0 auto !important;
    white-space: nowrap !important;       /* يفضل كلمة واحدة جنب الأيقونة */
    font-size: 14px !important;
    line-height: 1.2 !important;
    margin: 0 6px 0 0 !important;         /* مسافة يمين اللّيبل */
  }

  /* لو في <br> في القيم الطويلة بيكبّر السطر بدون داعي */
  .project-info .project-info-item br{ display:none !important; }
}

/* RTL: اعكس الاتجاه بس */
@media (max-width: 768px){
  html[dir="rtl"] .project-info{ text-align: right !important; }
  html[dir="rtl"] .project-info .project-info-item{ flex-direction: row-reverse !important; }
  html[dir="rtl"] .project-info .project-info-item strong{ margin: 0 0 0 6px !important; }
}





/* ↑ ارفع بلوك معلومات المشروع أكتر + قلّل المسافات (موبايل فقط) */
@media (max-width: 768px){

  .slider-container .project-info{
    /* ارفع البلوك لفوق زيادة */
    transform: translateY(clamp(-240px, -15vh, -160px)) !important;

    /* قلّل الجاب بين العناصر */
    gap: 10px 16px !important;

    /* سيب بس مسافة آمنة صغيرة تحت */
    padding-bottom: max(24px, env(safe-area-inset-bottom) + 16px) !important;
  }

  /* قلّل المسافة تحت العناوين */
  .project-info .project-info-item i{ margin-bottom: 2px !important; }
  .project-info .project-info-item strong{ margin-bottom: 0 !important; }
  .project-info .project-info-item span,
  .project-info .project-info-item p{
    line-height: 1.28 !important;
    margin: 0 !important;
  }
}


/* ===== Project hero info: lift more (mobile only) ===== */
@media (max-width: 768px){
  .slider-container .project-info{
    /* ارفع أكتر لفوق */
    transform: translateY(clamp(-340px, -24vh, -200px)) !important;

    /* مسافة أقل تحت (مع safe area) */
    padding-bottom: max(16px, env(safe-area-inset-bottom) + 10px) !important;

    /* فجوة أصغر بين الكروت */
    gap: 10px 14px !important;
  }

  /* قلّل المسافات داخل كل بطاقة */
  .project-info .project-info-item i{ font-size: 19px !important; margin-bottom: 2px !important; }
  .project-info .project-info-item strong{ font-size: 14px !important; margin-bottom: 0 !important; }
  .project-info .project-info-item span,
  .project-info .project-info-item p{ font-size: 15px !important; line-height: 1.28 !important; margin: 0 !important; }
}

/* شاشات أقصر جدًا: ارفع زيادة وسيّح التيبوغرافي سنة */
@media (max-width: 768px) and (max-height: 740px){
  .slider-container .project-info{
    transform: translateY(clamp(-380px, -28vh, -220px)) !important;
  }
  .project-info .project-info-item strong{ font-size: 13px !important; }
  .project-info .project-info-item span,
  .project-info .project-info-item p{ font-size: 14px !important; line-height: 1.25 !important; }
}