/* responsive.css */

/* never show burger icon on desktop */
.hamburger {
  display: none;
}

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

  .logo img {
    width: 150px;
  }

  /* show the hamburger icon */
  .hamburger {
    display: block;
    font-size: 24px;
    cursor: pointer;
    color: #fff;
  }
  .header.sticky .hamburger {
    color: #2F353B;
  }

  /* hide your normal menu & extra links until toggled */
  .menu,
  .extra {
    display: none;
  }

  /* when the menu button is clicked, JS adds “active” to .menu */
  .menu.active {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center;
  }
  /* .extra follows .menu in the DOM, so use the adjacent selector */
  .menu.active + .extra {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center;
    margin-top: 10px;
  }

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

  /* 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 {
    
    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;
  }
}
@media (max-width: 992px) {
  .news-insights {
    display: flex;
    flex-direction: column !important;
    gap: 20px; /* Optional: spacing between blocks */
  }

  .news-insights .news-item {
    width: 100% !important;
  }
}




@media (max-width: 576px) {
  html[lang="ar"] .slogan-wrapper {
    position: absolute;
    bottom: 30px;
    right: 15px;
    left: 15px;
    text-align: right;
    direction: rtl;
    z-index: 10;
  }

  html[lang="ar"] .slogan-wrapper .slogan-line {
    font-size: 25px;
    line-height: 1.6;
    display: block;
    margin-bottom: 5px;
    white-space: normal; /* رجعناها للوضع الطبيعي */
  }

  html[lang="ar"] .slogan-wrapper .slogan-line:nth-of-type(2) {
    margin-right: 40px; /* زق السطر كله */
  }

  html[lang="ar"] .slogan-wrapper .highlight {
    font-size: 26px;
    display: inline-block;
  }
  html[lang="ar"] .bonyan-content p {
  text-align: justify;
  }
}
@media (max-width: 576px) {
  html[lang="ar"] .bonyan-content {
    text-align: justify;
  }

  html[lang="ar"] .bonyan-content .section-button {
    margin-bottom: 20px; /* المسافة بين الزر والفيديو */
  }
}
@media (max-width: 768px) {
  html[lang="ar"] .menu-header-arabic-container {
    text-align: center;
    direction: ltr !important;
  }

  html[lang="ar"] .menu-header-arabic-container ul#primary-menu {
    flex-direction: column;
    align-items: center;
  }

  html[lang="ar"] .menu-header-arabic-container ul#primary-menu li {
    text-align: center;
  }
}
@media (max-width: 768px) {
  .middle-image {
    position: absolute;
    bottom: 20px;
    right: 20px;
    width: 80px; /* أو الحجم اللي يناسب شكلها */
    height: auto;
    opacity: 0.5;
    z-index: 5;
  }

  .middle-image img {
    width: 100%;
    height: auto;
  }
}