/* Reset */
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      font-family: Arial, sans-serif;
      background: #f4f4f4;
      line-height: 1.5;
      direction: rtl;
    }

    /* Mobile-First Layout (Default) */
    header {
      display: flex;
      flex-direction: row; /* Normal row direction */
      align-items: center;
      justify-content: space-between; /* Pushes items to opposite ends, correctly with RTL */
      background: #007BFF;
      padding: 10px 20px;
      position: relative;
    }

    /* New wrapper for the logo and navigation */
    .nav-and-logo {
      display: flex;
      flex-direction: row-reverse; /* Puts menu on the far right and logo next to it */
      align-items: center;
    }

    /* Logo */
    .logo img {
      height: 80px;
      display: block;
      margin-left: 15px; /* Adds space between the logo and the menu */
    }

 /* Hamburger */
.hamburger {
  display: flex;          /* was: none — show it on mobile */
  flex-direction: column;
  gap: 6px;
  background: #000;       /* black box */
  border: 0;
  border-radius: 4px;
  padding: 6px;
  cursor: pointer;
}
.hamburger span {
  display: block;
  width: 26px;
  height: 3px;
  background: #fff;       /* white lines */
  border-radius: 2px;
}

/* Hide hamburger on desktop */
@media (min-width: 769px) {
  .hamburger { display: none; }
}


    /* Nav */
    nav {
      display: none; /* Hidden by default on mobile */
      width: 100%;
      margin: 0;
      position: absolute;
      top: 100px; /* Adjust based on your header height */
      right: 0;
      background: #0066d1;
    }

    nav.active {
      display: block;
    }

    nav ul.level {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: 0;
    }

    nav ul.level > li {
      position: relative;
    }

    nav ul.level > li > span > a {
      display: block;
      padding: 12px;
      text-decoration: none;
      color: #fff;
      transition: background 0.3s;
      border-top: 1px solid rgba(255, 255, 255, 0.2);
    }

    nav ul.level > li > span > a:hover {
      background: #0056b3;
    }

    /* Submenu (Mobile) */
    .sub-nav.inner {
      position: static;
      background: #0066d1;
      box-shadow: none;
      display: none;
    }

    nav ul.level > li:hover > .sub-nav.inner {
      display: block;
    }

    .sub-nav.inner ul.level {
      display: block;
    }

    .sub-nav.inner ul.level li a {
      display: block;
      padding: 10px 14px;
      color: #fff;
      text-decoration: none;
    }

    .sub-nav.inner ul.level li a:hover {
      background: rgba(255, 255, 255, 0.1);
    }

    /* Arrow indicator */
    a .arrow::after {
      content: " ▾";
      font-size: 0.7em;
    }

    li:hover > span > a .arrow::after {
      content: " ▴";
    }

    /* Page content */
    main {
      padding: 20px;
    }
  /* GRID CSS */
    .grid-container {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        gap: 20px;
        margin-top: 20px;
    }
    
    .grid-item {
        background: #fff;
        border: 1px solid #ccc;
        border-radius: 8px;
        padding: 20px;
        text-align: center;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    }
    
    .grid-item img {
        width: 220px;
        height: auto;
        border-radius: 6px;
        margin-bottom: 15px;
    }
    
    .grid-item h3 {
        color: #007BFF;
        font-size: 1.5em;
        margin-bottom: 10px;
    }
    /* Desktop Styles (Override Mobile) */
    @media (min-width: 769px) {
      header {
        justify-content: space-between;
      }

      .nav-and-logo {
        display: flex;
        flex-direction: row-reverse;
      }
      
      .hamburger {
        display: none;
      }

      nav {
        display: block !important;
        width: auto;
        position: static;
        background: none;
      }
      
      nav ul.level {
        flex-direction: row;
        gap: 10px;
      }

      nav ul.level > li > span > a {
        padding: 14px 20px;
        border-top: none;
      }
      
      /* Submenu styles for desktop */
      .sub-nav.inner {
        position: absolute;
        top: 100%;
        right: 0;
        background: #fff;
        box-shadow: 0 2px 6px rgba(0,0,0,0.15);
      }
      
      /* Nested submenu fix for desktop */
      .sub-nav.inner .sub-nav.inner {
        right: 100%;
        top: 0;
      }

      .sub-nav.inner ul.level li a {
        color: #333;
      }
      
      .sub-nav.inner ul.level li a:hover {
        background: #eee;
      }
    }
.whatsapp-float {
  position: fixed;
  width: 60px;
  height: 60px;
  bottom: 20px;
  right: 20px;   /* ✅ now on the right side */
  left: auto;    /* clear left */
  background-color: #25D366;
  border-radius: 50%;
  text-align: center;
  box-shadow: 0 4px 6px rgba(0,0,0,0.2);
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s ease;
}

.whatsapp-float:hover {
  transform: scale(1.1);
}

.whatsapp-float img {
  width: 35px;
  height: 35px;
}
/* =========================
   Grid list (nagarim_merkaz.php)
========================= */
.gridtwo {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
  margin-top: 16px;
}
@media (max-width: 1200px) { .gridtwo { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 992px)  { .gridtwo { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 768px)  { .gridtwo { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 420px)  { .gridtwo { grid-template-columns: 1fr; } }

.grid-itemtwo {
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 8px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.grid-itemtwo:hover {
  transform: translateY(-2px);
  box-shadow: 0 3px 6px rgba(0,0,0,0.15);
}
.grid-itemtwo a {
  display: block;
  padding: 16px;
  text-align: center;
  font-weight: 700;      /* bold names */
  font-size: 16px;
  color: #0056b3;        /* link color */
  line-height: 1.3;
  word-break: break-word;
}
.grid-itemtwo a:hover,
.grid-itemtwo a:focus-visible { text-decoration: underline; }

/* Highlight items with gallery */
.has-gallery {
  background: #fff8dc;   /* light yellow */
  border-color: #e0c97f;
}
.badge {
  display: inline-block;
  font-size: 12px;
  line-height: 1;
  padding: 4px 6px;
  margin-top: 6px;
  border-radius: 999px;
  background: #ffe9a6;
  color: #7a5a00;
}

/* =========================
   Details page (nagarim.php)
========================= */
.details {
  width: min(900px, 100% - 32px);
  margin: 20px auto;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 6px;
  padding: 20px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
.details h1 { margin: 0 0 10px; }
.details p { margin: 8px 0; font-size: 15px; }

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px,1fr));
  gap: 15px;
  margin: 20px 0;
}
.gallery img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border: 1px solid #ccc;
  border-radius: 6px;
}

.back-link {
  display: inline-block;
  margin-top: 20px;
  color: #0056b3;
  font-weight: 700;
}
.back-link:hover { text-decoration: underline; }
.imp-grid {
  display: grid !important;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
  margin-top: 16px;
}
@media (max-width: 1200px) { .imp-grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 992px)  { .imp-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 768px)  { .imp-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 420px)  { .imp-grid { grid-template-columns: 1fr; } }

.imp-card {
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 8px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
  padding: 16px;
  text-align: center;
}
.imp-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 3px 6px rgba(0,0,0,0.15);
}
.imp-card .imp-name {
  font-weight: 700;
  font-size: 16px;
  margin-bottom: 6px;
  word-break: break-word;
}
.imp-card .imp-line {
  font-size: 14px;
  line-height: 1.3;
}