/* ==========================================================================
   موبايل للهوم بيج فقط – بدون أي تأثير على الديسكتوب
   ========================================================================== */

@media (max-width: 768px) {

  /* ====================== الهيرو الرئيسي ====================== */

  .hero {
    height: 100vh;
    min-height: 520px;
  }

  .hero__video {
    object-position: center;
  }

  .hero-controls {
    top: 10px;
    left: 10px;
    gap: 8px;
  }

  .hero-controls .icon-btn,
  .hero-controls .en-btn {
    width: 38px;
    height: 38px;
  }

  .top-right {
    top: 14px;
    right: 14px;
  }

  .top-right .kicker {
    font-size: 14px;
    line-height: 1.5;
  }

  .bottom-right {
    right: 16px;
    left: 16px;
    bottom: 24px;
    text-align: center;
  }

  .bottom-right .display {
    font-size: clamp(22px, 6vw, 28px);
    line-height: 1.3;
  }



  .bottom-right img[src*="button"] {
    height: 36px !important;
  }

  .bottom-right .more-chip {
    font-size: 13px;
    padding-inline: 12px;
    height: 36px;
  }

  /* ====================== البانل الجانبي (القائمة) ====================== */

  /* نخلي الجريد عمود واحد */
  .panel {
    grid-template-columns: 1fr;
  }

  /* الفيديو فوق والناف بار تحت */
  .panel__media {
    height: 220px;
  }

  .panel__video {
    height: 100%;
    object-fit: cover;
  }

  .panel__nav {
    padding: 16px 14px 24px;
    border-left: none;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    height: calc(100vh - 220px);
    overflow-y: auto;
  }

  .nav__brand {
    font-size: 16px;
    line-height: 1.5;
    margin-bottom: 16px;
  }

  .mega__list {
    gap: 8px;
  }

  .mega__head {
    padding: 10px 8px;
    font-size: 14px;
  }

  .mega__submenu {
    padding-inline-start: 8px;
    font-size: 13px;
  }

  /* شريط أدوات التكبير/التصغير */
  .util-bar {
    top: 10px;
    left: 10px;
    gap: 6px;
  }

  /* ====================== سكشن الفيديو + خريطة الباحة ====================== */

  .hero-media {
    background: #000;
  }

  .hm-stage {
    height: 100vh;
  }

  .hm-stage--video {
    height: 100vh;
  }

  .hm-video {
    height: 100%;
    object-fit: cover;
  }

  /* خريطة الباحة داخل heroMedia */
  .hero-media .map-section {
    padding: 72px 16px 24px 16px;
  }

  .hero-media .map-content {
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 24px;
  }

  .hero-media .map-side {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 12px;
  }

  .hero-media .map-stat {
    flex: 1 1 48%;
    min-width: 150px;
  }

  .hero-media .map-container {
    max-width: 100%;
    width: 100%;
    height: 65vh;
  }

  .hero-media #map-wrapper {
    width: 100%;
    height: 100%;
  }

  .hero-media #map-wrapper svg {
    width: 100%;
    height: 100%;
  }

  /* البوكس اللي فيه عنوان الفرصة والوصف */
  .map-info {
    position: static;
    max-width: 100%;
    margin-bottom: 16px;
    padding: 0 4px;
    text-align: right;
  }

  .map-info__title {
    font-size: 20px;
  }

  .map-info__desc {
    font-size: 13px;
    line-height: 1.7;
  }

  .hero-media .map-stat__value {
    font-size: 18px;
  }

  .hero-media .map-stat__label {
    font-size: 13px;
  }

  .hero-media .label {
    font-size: 13px;
    padding: 4px 8px;
  }

  /* مسافات نفس اللي عملتها للمحتوى النصي يمين/يسار */
  .right-text,
  .left-text {
    padding: 0 16px !important;
  }

  /* ====================== سكشن القطاعات (rotator) ====================== */
  /* عندك ميديا جاهزة للـ 820px، نخفف شوية للموبايل الأضيق */

  .sectors {
    padding-block: 40px;
  }

  .rotator {
    height: auto;
  }

  .rotator .row {
    gap: 12px;
  }

  .rotator .card.is-big {
    min-height: 260px;
  }
  .card{
    min-height: auto;
  }

  /* ====================== شركاء النجاح ====================== */

  .partners {
    padding: 40px 0;
  }

  .partners__head {
    grid-template-columns: 1fr;
    gap: 20px;
    padding-inline: 16px;
  }

  .partners__text {
    max-width: 100%;
  }

  .partners__title {
    font-size: 22px;
  }

  .partners__lead {
    font-size: 14px;
    line-height: 1.8;
  }

  .partners .mt-10 {
    width: 100% !important;
  }

  .partners .more-chip {
    width: 100% !important;
    justify-content: center;
  }

  .partners .more-chip img,
  .partners img[src*="button"] {
    height: 32px !important;
  }

  .vmarquee {
    margin-top: 24px;
    height: 260px;
  }

  .vgrid {
    gap: 18px;
  }

  .vgrid .logo img {
    max-width: 90px;
  }

  /* ====================== المركز الإعلامي (المعرض) ====================== */

  .media {
    padding-block: 40px;
  }

  .media__wrap {
    gap: 24px;
  }

  .media__top {
    grid-template-columns: 1fr;
    align-items: flex-start;
    gap: 12px;
  }

  .media__right {
    justify-content: flex-start;
  }

  .media__title {
    font-size: 24px;
  }

  .media__gallery-title {
    font-size: 18px;
  }

  .media__tabs {
    flex-wrap: wrap;
    gap: 8px;
  }

  .media__tabs .filter {
    flex: 1 1 calc(50% - 8px);
    justify-content: center;
    padding-inline: 8px;
    font-size: 13px;
  }

  #gallery {
    margin-top: 16px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  /* ====================== تقارير المرصد ====================== */

  .reports__panel {
    padding-inline: 16px;
  }

  .reports__grid-wrap {
    max-width: 100%;
    width: 100% !important;
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .reports__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    padding-bottom: 24px;
  }

  .report-card {
    width: 100% !important;
    height: auto !important;
  }

  .report-card img {
    object-fit: cover;
  }

  .report-card.is-featured {
    grid-column: span 3;
  }

  .reports__copy {
    order: -1;
    text-align: right;
  }

  .reports__headline {
    font-size: 20px;
  }

  .reports__lead {
    font-size: 14px;
    line-height: 1.9;
  }

  /* ====================== الفورم (القائمة البريدية) ====================== */

  .nl-hero {
    padding-block: 40px;
  }

  .nl-hero__inner {
    padding-inline: 16px;
  }

  .nl-title {
    font-size: 22px;
  }

  .nl-sub {
    font-size: 14px;
  }

  .nl-input {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  .nl-input input {
    width: 100%;
    font-size: 14px;
  }

  .nl-submit {
    height: 42px;
  }

  /* ====================== الفوتر ====================== */

  .footer__cols {
    grid-template-columns: 1fr;
    gap: 24px;
    padding-inline: 16px;
  }

  .f-title {
    font-size: 16px;
  }

  .f-list {
    font-size: 14px;
  }

  .footer__bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding-inline: 16px;
    text-align: right;
  }

  .footer__links {
    flex-wrap: wrap;
    gap: 8px;
  }

  .footer__brand-big {
    align-self: flex-start;
    font-size: 18px;
  }

}
/* تصليح موبايل لسكشن تقارير المرصد + سكشن خريطة الباحة فقط */
@media (max-width: 760px) {

  /* ===== تقارير المرصد ===== */
  .reports__panel {
    padding-inline: 0;
  }

  /* نلغي عرض الـ 1300px الثابت ونخليه يملى عرض الموبايل */
  .reports__grid-wrap {
    width: 100% !important;
    max-width: 100%;
    padding: 0 16px 24px;
    grid-template-columns: 1fr;
    column-gap: 0;
    row-gap: 18px;
  }

  /* شبكة الكروت تفضل 3 أعمدة صغيرة فوق بعض */
  .reports__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 10px;
    row-gap: 10px;
    padding-bottom: 30px;
  }

  /* نلغي إجبار الكروت على صف واحد زي الديسكتوب */
  .reports__grid > .report-card {
    grid-row: auto;
    height: auto;
    min-height: 0;
  }

  .reports__grid .report-card:nth-child(1),
  .reports__grid .report-card:nth-child(3) {
    --h: auto;
  }

  /* الكرت الكبير يمتد على عرض الثلاثة أعمدة في الموبايل */
  .reports__grid .report-card:nth-child(2) {
    --h: auto;
    grid-column: span 3;
  }

  /* الشريط الزخرفي ما يطلعش برا الشاشة */
  .reports__band {
    left: -16px;
    right: -16px;
  }

  /* النص يطلع فوق الكروت في الموبايل */
  .reports__copy {
    order: -1;
    text-align: right;
    padding: 0 16px;
    margin: 0 0 8px;
  }

  .reports__headline {
    font-size: 20px;
  }


  /* ===== سكشن الفيديو + خريطة الباحة (heroMedia) ===== */

  .hero-media {
    min-height: auto;
  }

  .hero-media .hm-stage {
    height: 128vh;
    min-height: 0;
  }

  /* نقلل البادينج عشان المحتوى كله يبان */
  .hero-media .map-section {
    padding-top: 40px;
  }

  /* نخلي العناصر تحت بعض في الموبايل */
  .hero-media .map-content {
    flex-direction: column;
  }

  .hero-media .map-container {
    width: 100%;
    max-width: 100%;
    margin-inline: auto;
  }

  .hero-media .map-side {
    width: 100%;
    justify-content: space-between;
  }
}
/* =========================================================
   موبايل فقط (بدون لعب في الديسكتوب)
   ======================================================= */
@media (max-width: 768px) {

  /* ========== 1) سكشن الخريطة / منصة المعلومات الحضرية ========== */

  /* نخلي طول السكشن على قد المحتوى مش 100vh */
  .hero-media .map-section {
    height: auto !important;
    min-height: 0 !important;
    padding: 40px 16px 24px 16px !important;
    box-sizing: border-box;
  }



  /* ترتيب المحتوى جوه سكشن الخريطة عمودي في الموبايل */
  .hero-media .map-content {
    flex-direction: column;
    align-items: stretch;
    gap: 24px;
  }

  .hero-media .map-info {
    text-align: center;
    margin-bottom: 8px;
  }

  /* الأعمدة الجانبية (الإحصائيات) تبقى صفوف فوق وتحت الخريطة */
  .hero-media .map-side {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
  }

  .hero-media .map-stat {
    flex: 1 1 calc(50% - 8px);
  }

  /* الخريطة نفسها تاخد عرض الشاشة من غير ما تطلع برا */
  .hero-media .map-container {
    width: 100%;
    max-width: 100%;
  }

  .hero-media #map-wrapper svg {
    width: 100%;
    max-width: 100%;
    height: auto;
    display: block;
  }

  .hero-media .label {
    font-size: 14px;
  }


  /* ========== 2) سكشن تقارير المرصد ========== */

  /* البانل ما يكونش ثابت على 1300px في الموبايل */
  .reports__panel {
    width: 100% !important;
  }

  /* الـ container اللي عليه style="width:1300px" على الهتمل */
  .reports__grid-wrap {
    width: 100% !important;
    grid-template-columns: 1fr;     /* الشبكة تبقى عمود واحد */
    padding: 16px;
    gap: 16px;
  }

  /* شبكة البطاقات نفسها */
  .reports__grid {
    grid-template-columns: 1fr;     /* كرت تحت كرت */
    row-gap: 16px;
    padding-bottom: 32px;
  }

  /* الكروت تاخد عرض الشاشة وتبقى طولها مناسب */
  .report-card {
    width: 100% !important;         /* نكسر الـ width اللي في الـ inline style */
    height: auto;
    min-height: 200px;
  }

  .report-card.is-featured {
    min-height: 260px;
  }

  /* النص اللي على اليمين ينزل تحت الكروت ويتوسّط */
  .reports__copy {
    text-align: center;
    margin-top: 8px;
  }

  .reports__headline {
    font-size: 20px;
    margin-bottom: 8px;
  }

  .reports__lead {
    font-size: 14px;
    line-height: 1.7;
  }
}
/* =========================
   HERO + ABOUT + PANEL  موبايل
   ========================= */

/* شاشات أقل من 768px */
@media (max-width: 768px) {

  /* --------- البانل الجانبي (المينيو) --------- */
  :root {
    --panel-left-w: 100vw;
    --panel-right-w: 100vw;
  }

  .panel {
    grid-template-columns: 1fr;
  }

  .panel__media {
    min-height: 230px;
  }

  .panel__nav {
    padding-inline: 16px;
  }

  /* --------- HERO (تعرف على الباحة) --------- */
  .hero {
    height: auto;
    min-height: 100vh;
    padding-top: 80px;
    padding-bottom: 24px;
  }

  .hero__container {
    width: 100%;
    padding-inline: 16px;
    padding-bottom: 16px;
    align-items: flex-start;
  }

  .hero__title {
    font-size: 26px;
    text-align: center;
    margin: 0 auto 20px;
  }

  .hero__stats {
    position: static;       /* نفكها من تحت الصورة */
    inset: auto;
    transform: none;
    margin: 0 auto;
    width: 100%;
    max-width: 480px;
    grid-auto-flow: row;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 8px;
  }

  .stat {
    border-left: none;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  }

  .stat:last-child {
    border-bottom: none;
  }

  .stat__label {
    font-size: 11px;
  }

  .stat__value {
    font-size: 13px;
  }

  .hero-controls {
    top: 12px;
    right: 12px;
  }

  .top-right {
    top: 60px;
    right: 16px;
  }

  /* --------- ABOUT (حيث تلتقي الطبيعة...) --------- */
  .about {
    padding-top: 32px;
    padding-bottom: 48px;
  }

  .about .container {
    padding-inline: 16px;
  }

  .about__grid {
    grid-template-columns: 1fr;  /* عمود واحد */
    gap: 24px;
    margin-top: 24px;
    margin-bottom: 24px;
  }

  .about__title {
    font-size: 22px;
    line-height: 1.5;
  }

  .about__lead,
  .about__body {
    font-size: 14px;
  }

  .about__media {
    max-width: 360px;
    margin: 0 auto;
  }

  .about__media > img:first-child {
    width: 100%;
    height: auto;
  }

  .about__media .pops {
    right: auto;
    left: 50%;
    top: auto;
    bottom: -24px;
    transform: translateX(-50%);
    width: 70%;
    max-width: 260px;
  }

  .about__body {
    margin-top: 32px;
  }

  .about__section-head {
    font-size: 18px;
    margin-top: 16px;
  }
}

/* موبايل صغير جداً */
@media (max-width: 480px) {
  .hero__stats {
    grid-template-columns: 1fr;  /* كرت تحت كرت */
  }

  .hero__title {
    font-size: 22px;
  }
}
/* ===========================================
   Mobile extras for inner pages
   ضيف الكود ده في آخر ملف assets/responsive.css
   =========================================== */

/* 1) صفحة المكتب الإستراتيجي – سلايدر المهام (office.html) */
@media (max-width: 768px) {
  .office_tasks {
    padding: 32px 0 40px;
  }

  .office_tasks .head {
    text-align: center;
    padding-inline: 16px;
    margin-bottom: 18px;
  }

  .office_tasks .head h3 {
    font-size: 20px;
    line-height: 1.6;
  }

  .office_tasks .slider_container {
    background-position: center;
    background-size: cover;
  }

  .office_tasks .slider_container .container {
    padding-inline: 16px;
  }

  .office_tasks .controls {
    margin-bottom: 12px;
  }

  .office_tasks .swiper_controls {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
  }

  .office_tasks .swiper_controls .nav_btn {
    width: 40px;
    height: 40px;
    padding: 0;
    border-radius: 999px;
    display: grid;
    place-items: center;
  }

  .office_tasks .swiper_controls img {
    max-width: 22px;
  }

  .office_tasks .pagination {
    flex: 1;
    display: flex;
    justify-content: center;
  }

  .office_tasks .slide {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: flex-start;
    gap: 12px;
    padding: 18px 14px 22px;
    background: rgba(0, 0, 0, 0.45);
    border-radius: 16px;
  }

  .office_tasks .slide .icon img {
    max-width: 52px;
    height: auto;
  }

  .office_tasks .slide .content h3 {
    font-size: 18px;
    margin: 0 0 8px;
  }

  .office_tasks .slide .content ul {
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 14px;
    line-height: 1.7;
  }

  .office_tasks .slide .content li + li {
    margin-top: 4px;
  }

  /* إخفاء الباترن الزخرفي في الموبايل لتوفير مساحة */
  .office_tasks .slide .pattern {
    display: none;
  }
}

/* 2) صفحة فريق العمل – سلايدر اللجنة الإشرافية (Teams.html) */
@media (max-width: 768px) {
  .teams-supervision {
    padding: 24px 0 34px;
    background-size: cover;
    background-position: center;
  }

  .teams-panel__inner {
    padding: 16px 16px 8px;
  }

  /* أزرار السلايدر فوق العنوان بالمركز */
  .teams-supervision .swiper_controls {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
  }

  .teams-supervision .swiper_controls .nav_btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    padding: 0;
    display: grid;
    place-items: center;
  }

  .teams-title {
    text-align: center;
    font-size: 22px;
    margin-top: 8px;
  }

  .teams-carousel {
    padding: 24px 4px 0;
  }

  .teams-cards {
    gap: 12px;
  }

  .teams-card {
    padding: 22px 18px;
  }
}

/* 3) صفحة مكتبة المرصد – تبويبات st-section (library.html) */
@media (max-width: 768px) {
  .st-section {
    padding: 20px 16px;
  }

  .st-tabs {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    text-align: center;
  }

  .st-btn {
    width: 100%;
    margin: 0;
    padding-block: 12px;
  }

  .st-panels {
    margin-top: 16px;
  }
}

/* 4) مكتبة المرصد – فلاتر المعرض (الصور والفيديوهات) */
@media (max-width: 768px) {
  .media__top {
    grid-template-columns: 1fr !important;
  }

  .media__right {
    justify-self: stretch;
  }

  .media__tabs {
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
  }

  .media__tabs .filter {
    flex: 1 1 calc(50% - 8px);
    min-width: 140px;
  }
}

/* 5) صفحة ملفات التحميل – شريط التصفية والبحث (file-download.html) */
@media (max-width: 768px) {
  .page-head {
    margin-bottom: 16px;
  }

  .page-head .toolbar {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: stretch;
  }

  .page-head .sort-btn {
    width: 100%;
    justify-content: center;
  }

  .page-head .search {
    width: 100%;
  }

  .page-head .search input {
    width: 100%;
  }
}

/* 6) صفحة الأخبار – صف الفلاتر (التبويبات + زر التاريخ) (news.html) */
@media (max-width: 768px) {
  .news-s__head {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .news-s__title {
    font-size: 26px;
  }

  /* كسر الفلوتس المكتوبة inline في HTML */
  .news-s #filters,
  .news-s .date-filter-btn {
    float: none !important;
  }

  .news-s #filters {
    margin: 0 0 10px 0 !important;
  }

  .news-s .date-filter-btn {
    width: 100%;
    justify-content: center;
    margin: 0 0 8px 0;
  }
}
.map-section {
  position: relative;
  height: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  /* صورة افتراضية قبل ما المستخدم يختار محافظة */
  /* background-image: linear-gradient(rgba(0, 0, 0, 0.72), rgba(0, 0, 0, 0.35)),url('assets/images/1.jpg'); */
background-image: linear-gradient(rgba(0, 0, 0, 0.72), rgb(0 0 0 / 35%)), url('assets/images/1.jpg');
  /* كانت 60px يمين وشمال – زوّدناها عشان الكلام يبعد عن الحواف */
  padding: 100px 100px 0px 100px;
  box-sizing: border-box;
}

.hero-media .map-content {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;

  /* كانت 200px – قلّلناها عشان الخريطة تقرّب من النص وتتسنتر أحسن */
  gap: 120px;
}
/* الليبل اللي في نص المحافظة */
.hero-media .label {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: transparent;
  color: #ffffff;
  font-size: 16px;
  font-weight: 600;

  /* التعديلات المهمة */
  white-space: normal !important;  /* اسمح بلفّ الكلام */
  width: 60px;                     /* عرض ثابت صغير عشان الكلمتين ينزلوا تحت بعض */
  text-align: center;              /* سنتر الكلام */

  pointer-events: none;
  text-shadow: 0 0 4px rgba(0, 0, 0, 0.9);
}
.hero-media .label {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: transparent;
  color: #ffffff;
  font-size: 16px;
  font-weight: 600;

  display: block;          /* مهم عشان العرض يشتغل */
  text-align: center;      /* سنتر الكلام */
  pointer-events: none;
  text-shadow: 0 0 4px rgba(0, 0, 0, 0.9);
}
/* =========================================================
   ضبط الخريطة والنص يمين/شمال للشاشات المتوسطة (زوم 125%)
   ========================================================= */
@media (max-width: 1200px) {

  /* نقلل شوية الـ padding للسكشن كله */
  .hero-media .map-section {
    padding: 80px 40px 0 40px;
  }

  /* نقلل المسافة بين الأعمدة عشان ما يزنقوش بعض */
  .hero-media .map-content {
    gap: 60px;
  }

  /* نصغّر الخريطة شوية عشان تفضّل متسنترة */
  .hero-media .map-container {
    max-width: 480px;
    height: 70vh;
  }

  .hero-media #map-wrapper svg {
    width: 480px;
    height: 480px;
  }

  /* نقلل أقل عرض للكروت يمين/شمال */
  .hero-media .map-side {
    min-width: 170px;
  }

  /* الكلام اليمين والشمال يبعد عن الأطراف */
  .right-text,
  .left-text {
    padding: 0 40px !important;
  }
}
/* حل مشكلة زوم 125% */
@media (max-width: 1350px) {

  /* تقليل المسافة الجانبية */
  .map-section {
    padding-left: 40px !important;
    padding-right: 40px !important;
  }

  /* الكروت اللي يمين والشمال تبعد عن الأطراف */
  .map-info {
    margin-right: 20px !important;
    margin-left: 20px !important;
  }

  /* تصغير الخريطة شوية عشان تتسنتر */
  .map-container {
    transform: scale(0.88);
    transform-origin: center;
  }

  /* المسافة بين الخريطة والكروت */
  .map-content {
    gap: 60px !important;   /* بدل 200 */
  }
}

/* مرحلة أصغر (لو الزوم وصل 150% أو شاشة 1200px) */
@media (max-width: 1200px) {

  .map-section {
    padding-left: 30px !important;
    padding-right: 30px !important;
  }

  .map-container {
    transform: scale(0.82);
  }

  .map-content {
    gap: 40px !important;
  }

  .map-info {
    margin-right: 10px !important;
    margin-left: 10px !important;
  }
}
/* ============================
   ضبط المشاركين على أي زوم
   ============================ */
@media (max-width: 1600px) {
  .vmarquee,
  .partners {
    padding-left: 40px !important;
    padding-right: 40px !important;
  }
}

@media (max-width: 1400px) {
  .vmarquee,
  .partners {
    padding-left: 30px !important;
    padding-right: 30px !important;
  }
}

@media (max-width: 1200px) {
  .vmarquee,
  .partners {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
}
/* ============================
   ضبط المشاركين على أي زوم
   ============================ */
@media (max-width: 1600px) {
  .vmarquee,
  .partners {
    padding-left: 40px !important;
    padding-right: 40px !important;
  }
}

@media (max-width: 1400px) {
  .vmarquee,
  .partners {
    padding-left: 30px !important;
    padding-right: 30px !important;
  }
}

@media (max-width: 1200px) {
  .vmarquee,
  .partners {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
}
/* ============================
   منع أزرار الفلاتر من الكسر
   ============================ */
.media_tabs {
  display: grid !important;
  grid-auto-flow: column;
  grid-auto-columns: max-content;
  gap: 16px;
  white-space: nowrap;
}

.media_tabs .filter {
  min-width: 140px !important;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 12px 20px !important;
}
/* ============================
   ضبط تقارير المرصد
   ============================ */
@media (max-width: 1600px) {
  .reports_panel,
  .reports_grid-wrap,
  .media_wrap {
    padding-left: 40px !important;
    padding-right: 40px !important;
  }
}

@media (max-width: 1300px) {
  .reports_panel,
  .reports_grid-wrap,
  .media_wrap {
    padding-left: 30px !important;
    padding-right: 30px !important;
  }

  .reports_grid-wrap {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 24px !important;
  }
}

@media (max-width: 1100px) {
  .reports_panel,
  .reports_grid-wrap,
  .media_wrap {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
}
/* ============================
   ضبط تقارير المرصد
   ============================ */
@media (max-width: 1600px) {
  .reports_panel,
  .reports_grid-wrap,
  .media_wrap {
    padding-left: 40px !important;
    padding-right: 40px !important;
  }
}

@media (max-width: 1300px) {
  .reports_panel,
  .reports_grid-wrap,
  .media_wrap {
    padding-left: 30px !important;
    padding-right: 30px !important;
  }

  .reports_grid-wrap {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 24px !important;
  }
}

@media (max-width: 1100px) {
  .reports_panel,
  .reports_grid-wrap,
  .media_wrap {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
}
/* ============================
   تابلت 768 - 1024px
   ============================ */
@media (max-width: 1024px) {

  .vmarquee,
  .media_tabs,
  .reports_grid-wrap {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  .media_tabs {
    overflow-x: auto;
    display: flex !important;
    gap: 12px;
  }

  .media_tabs .filter {
    min-width: 130px !important;
    flex-shrink: 0;
  }

  .reports_grid-wrap {
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  }

}

/* ============================
   موبايل 480 - 767px
   ============================ */
@media (max-width: 767px) {
  .media_tabs .filter {
    min-width: 120px !important;
  }
}

/* ============================
   موبايل صغير تحت 480px
   ============================ */
@media (max-width: 480px) {
  .media_tabs .filter {
    min-width: 100px !important;
    padding: 10px !important;
  }
}
/* =============================
   إصلاح أزرار الفلاتر 100%
   ============================= */
.media_tabs {
  display: flex !important;
  gap: 12px !important;
  flex-wrap: nowrap !important;
  overflow-x: auto; /* وقت الزوم أو الشاشات الصغيرة */
  scrollbar-width: none;
}

.media_tabs::-webkit-scrollbar {
  display: none;
}

.media_tabs .filter {
  flex: 0 0 auto !important;    /* يمنع التمدد */
  min-width: 150px !important;  /* يمنع الكسر */
  white-space: nowrap !important;
  text-align: center !important;
}
/* =============================
   إصلاح تقارير المرصد
   ============================= */
.reports_grid-wrap {
  max-width: 100% !important;
  width: 100% !important;
  padding-left: 30px !important;
  padding-right: 30px !important;
  box-sizing: border-box;
}

.reports_grid {
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
  gap: 24px !important;
}