body { font-family: "Inter", Arial, sans-serif; background:#f7f9fa; }
      .page-title { text-align:center; padding:30px 15px; color:#0b6661; font-weight:700; font-size:28px; }
      .sub-title { text-align:center; color:#6b8c8a; margin-bottom:18px; }

      /* layout */
      .branches-wrap { max-width:1200px; margin:0 auto; padding:0 15px 60px; }

      /* left column cards */
      .branch-cards { display:flex; flex-direction:column; gap:18px; }
      .branch-row { display:flex; gap:18px; flex-wrap:wrap; }
      .branch-card {
        background:#fff; border-radius:12px; box-shadow:0 6px 18px rgba(12,40,40,0.06);
        padding:20px; flex: 1 1 calc(50% - 9px); /* two cards per row */
        min-width:260px; position:relative; overflow:visible;
        border-left:4px solid transparent;
        transition: transform .12s ease, box-shadow .12s ease;
      }
      .branch-card:hover { transform:translateY(-4px); box-shadow:0 10px 26px rgba(12,40,40,0.08); cursor:pointer; }
      .branch-card .title { font-weight:700; color:#0b6661; margin-bottom:8px; font-size:18px; }
      .branch-card .meta { color:#6b8c8a; font-size:14px; line-height:1.6; }
      .branch-card .card-actions { margin-top:14px; display:flex; gap:10px; }
      .btn-map {
         background:linear-gradient(90deg,#4fc3a6,#0b6661) !important; color:#fff; border:0; }
      .btn-directions { 
        background:#fff; color:#0b6661 !important; border:1px solid #cfeae6; }

      .thumb {

        height:84px; border-radius:10px; overflow:hidden;
        box-shadow:0 8px 20px rgba(0,0,0,0.08); background:#e9f7f4;
        display:flex; align-items:center; justify-content:center;
      }
      .thumb img { width:100%; height:100%; object-fit:cover; }

      /* right column map */
      #map { width:100%; height:720px; border-radius:12px; box-shadow:0 6px 20px rgba(12,40,40,0.06); }

      /* controls */
      .controls { display:flex; gap:12px; align-items:center; margin-bottom:18px; flex-wrap:wrap; }
      select.form-select { min-width:200px; }

      /* responsive */
      @media (max-width: 991.98px) {
        .branch-card { flex: 1 1 100%; }
        #map { height:420px; margin-top:18px; }
      }
      body {
    font-family: 'Tajawal', sans-serif !important;
}
.fas, .far, .fab {
    font-family: "Font Awesome 6 Free" !important;
}