/* ===========================================================================
   Fab Lab - Fabrication Laboratory, CUI Lahore.
   Standalone mini-site: this stylesheet is self-contained and does not
   depend on the main campus theme.
   =========================================================================== */

  .fl{--ink:#16213e;--muted:#5f6b85;--paper:#f7f9ff;--purple:#55248a;--blue:#0876c9;
      --cyan:#14b8d4;--pink:#ed3f8f;--orange:#f28b38;
      --shadow:0 16px 45px rgba(35,36,85,.12);--e:cubic-bezier(.19,1,.22,1);
      font-family:'Inter','Segoe UI',Arial,sans-serif;color:var(--ink);background:var(--paper);
      line-height:1.6;font-size:16px}
  .fl *{box-sizing:border-box}
  .fl a{color:inherit;text-decoration:none}
  .fl img{display:block;max-width:100%;width:auto;height:auto}
  .fl h1,.fl h2,.fl h3{color:var(--ink);margin:0}
  .fl p{margin:0 0 14px}
  .fl ul{margin:0;padding-left:19px}
  .fl-wrap{width:min(1180px,92%);margin:0 auto}
  /* anchor targets clear the master's fixed-top header */
  .fl [id]{scroll-margin-top:92px}

  /* ---------- floating section rail (right) ---------- */
  .fl-rail{position:fixed;right:22px;top:50%;transform:translateY(-50%);z-index:15;
    display:flex;flex-direction:column;padding:18px 20px 20px;border-radius:28px;
    background:rgba(255,255,255,.66);
    -webkit-backdrop-filter:blur(20px) saturate(180%);backdrop-filter:blur(20px) saturate(180%);
    border:1px solid rgba(255,255,255,.75);
    box-shadow:0 26px 60px rgba(35,36,85,.16),0 2px 8px rgba(35,36,85,.05);
    transition:background .35s var(--e),box-shadow .35s var(--e)}
  .fl-rail:hover{background:rgba(255,255,255,.93);
    box-shadow:0 30px 70px rgba(35,36,85,.22),0 2px 8px rgba(35,36,85,.06)}

  .fl-rail .count{display:flex;align-items:baseline;justify-content:flex-end;gap:4px;
    padding-bottom:13px;margin-bottom:11px;border-bottom:1px solid rgba(22,33,62,.09);
    font-variant-numeric:tabular-nums;letter-spacing:.02em}
  .fl-rail .count b{font-size:18px;font-weight:900;
    background:linear-gradient(135deg,var(--purple),var(--pink));
    -webkit-background-clip:text;background-clip:text;color:transparent}
  .fl-rail .count s{text-decoration:none;font-size:13px;font-weight:700;color:#aab2c6}

  .fl-rail .items{position:relative;display:flex;flex-direction:column;gap:4px}
  .fl-rail .line{position:absolute;right:6.5px;top:17px;bottom:17px;width:2px;
    background:rgba(22,33,62,.10);border-radius:2px;overflow:hidden}
  .fl-rail .line b{display:block;width:100%;height:0;border-radius:2px;
    background:linear-gradient(180deg,var(--purple),var(--blue) 55%,var(--pink));
    transition:height .45s var(--e)}

  .fl-rail a{position:relative;z-index:1;display:flex;align-items:center;justify-content:flex-end;
    padding:9px 0;color:#8a93a8;font-size:14.5px;font-weight:700;line-height:1;letter-spacing:.01em}
  .fl-rail a .lbl{max-width:0;overflow:hidden;white-space:nowrap;opacity:0;transform:translateX(8px);
    transition:max-width .4s var(--e),opacity .3s var(--e),transform .4s var(--e),margin-right .4s var(--e)}
  .fl-rail a .dot{position:relative;flex:none;width:15px;height:15px;border-radius:50%;
    background:#fff;border:3px solid #cfd6e6;box-sizing:border-box;
    transition:border-color .3s var(--e),transform .35s var(--e),box-shadow .35s var(--e),background .3s var(--e)}
  .fl-rail a:hover .lbl,.fl-rail a:focus .lbl,.fl-rail a.on .lbl,.fl-rail:hover a .lbl{
    max-width:240px;opacity:1;transform:translateX(0);margin-right:14px}
  .fl-rail a:hover,.fl-rail a:focus{color:var(--ink)}
  .fl-rail a:hover .dot{border-color:var(--blue);transform:scale(1.15)}
  .fl-rail a.on{color:var(--purple);font-weight:800}
  .fl-rail a.on .dot{border-color:transparent;transform:scale(1.35);
    background:linear-gradient(135deg,var(--purple),var(--pink));
    box-shadow:0 0 0 6px rgba(85,36,138,.13)}

  @media(min-width:1700px){
    .fl-rail a .lbl{max-width:240px;opacity:1;transform:translateX(0);margin-right:14px}
  }
  @media(max-width:1280px){.fl-rail{display:none}}
  @media(prefers-reduced-motion:reduce){
    .fl-rail,.fl-rail *{transition:none !important}
  }
  .fl-grad{background:linear-gradient(90deg,var(--purple),var(--blue),var(--pink));
    -webkit-background-clip:text;background-clip:text;color:transparent}

  /* ---------- section anchor bar ---------- */
  /* standalone site: nothing sits above it, so it can be sticky again */
  .fl-subnav{position:sticky;top:0;z-index:25;background:rgba(255,255,255,.94);
    -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
    border-bottom:1px solid #e8eaf4}
  .fl-subnav .in{height:70px;display:flex;align-items:center;justify-content:space-between;gap:18px}
  .fl-brand{display:flex;align-items:center;gap:10px;font-weight:800}
  .fl-brand img{width:45px;height:45px;object-fit:contain}
  .fl-brand span{font-size:14px;line-height:1.15}
  .fl-links{display:flex;gap:18px;flex-wrap:wrap;font-size:14px;font-weight:700}
  .fl-links a:hover{color:var(--pink)}

  /* ---------- hero ---------- */
  .fl-hero{position:relative;overflow:hidden;height:auto;min-height:0;padding:72px 0 66px;background:
    radial-gradient(circle at 10% 10%,#e7d7ff 0 12%,transparent 13%),
    radial-gradient(circle at 90% 15%,#c7f4ff 0 12%,transparent 13%),
    linear-gradient(135deg,#fff 0%,#eef7ff 48%,#fff1fa 100%)}
  .fl-hero::after{content:"";position:absolute;inset:auto -10% -100px -10%;height:180px;
    background:var(--purple);transform:rotate(-2deg);opacity:.08}
  .fl-hero-grid{display:grid;grid-template-columns:1.05fr .95fr;align-items:center;gap:45px;
    position:relative;z-index:1}
  .fl-kicker{display:inline-flex;gap:8px;align-items:center;padding:8px 13px;border-radius:999px;
    background:#fff;border:1px solid #e6dcf5;color:var(--purple);font-weight:800;font-size:13px}
  .fl-hero h1{font-size:clamp(42px,6vw,76px);line-height:.98;margin:18px 0;letter-spacing:-2px}
  .fl-lead{font-size:19px;color:var(--muted);max-width:670px}
  .fl-btns{display:flex;gap:12px;flex-wrap:wrap;margin-top:25px}
  .fl-btn{display:inline-block;padding:12px 18px;border-radius:12px;font-weight:800}
  .fl-btn.primary{background:var(--purple);color:#fff;box-shadow:0 10px 22px rgba(85,36,138,.22)}
  .fl-btn.primary:hover{background:#431c6f;color:#fff}
  .fl-btn.light{background:#fff;border:1px solid #dfe3ef}
  .fl-btn.light:hover{border-color:var(--purple);color:var(--purple)}
  .fl-herocard{background:#fff;border-radius:28px;padding:22px;box-shadow:var(--shadow);transform:rotate(1deg)}
  .fl-machines{display:grid;grid-template-columns:1fr 1fr;gap:12px}
  .fl-machine{background:linear-gradient(135deg,#f5f7fb,#fff);border-radius:18px;padding:10px;
    text-align:center;border:1px solid #edf0f6}
  .fl-machine img{width:100%;height:210px;object-fit:contain;border-radius:12px}
  .fl-machine span{display:block;font-size:12px;font-weight:900;color:#39435d;margin-top:5px}
  .fl-mini{display:flex;justify-content:space-between;gap:10px;margin-top:13px;font-size:12px;color:var(--muted)}

  /* ---------- sections ---------- */
  .fl-sec{padding:72px 0;overflow:visible}
  .fl-head{display:flex;justify-content:space-between;align-items:flex-end;gap:25px;margin-bottom:28px}
  .fl-head h2{font-size:clamp(30px,4vw,46px);line-height:1.05}
  .fl-head p{max-width:610px;color:var(--muted);margin:0}

  .fl-intro{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
  .fl-info{background:#fff;border-radius:22px;padding:24px;box-shadow:var(--shadow);
    border-top:6px solid var(--blue)}
  .fl-info:nth-child(2){border-top-color:var(--pink)}
  .fl-info:nth-child(3){border-top-color:var(--orange)}
  .fl-icon{font-size:30px;line-height:1.2}
  .fl-info h3{margin:7px 0;font-size:19px}
  .fl-info p{margin:0;color:var(--muted)}

  /* ---------- equipment ---------- */
  .fl-equip{background:#fff}
  .fl-filter{display:flex;gap:10px;flex-wrap:wrap;margin:20px 0 28px}
  .fl-filter button{border:1px solid #dfe3ef;background:#fff;border-radius:999px;padding:9px 14px;
    font-family:inherit;font-size:14px;font-weight:800;color:var(--ink);cursor:pointer}
  .fl-filter button.active,.fl-filter button:hover{background:var(--ink);color:#fff}
  .fl-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
  .fl-item{background:#fff;border:1px solid #e7eaf2;border-radius:22px;overflow:hidden;
    box-shadow:0 8px 28px rgba(35,36,85,.07);transition:transform .2s,box-shadow .2s}
  .fl-item:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
  .fl-img{height:220px;background:linear-gradient(135deg,#f5f7fb,#fff);display:flex;
    align-items:center;justify-content:center;padding:18px}
  .fl-img img{max-width:100%;max-height:100%;object-fit:contain}
  .fl-body{padding:20px}
  .fl-tag{display:inline-block;font-size:11px;font-weight:900;text-transform:uppercase;
    letter-spacing:.08em;padding:5px 9px;border-radius:999px;background:#edf5ff;color:#0866a9}
  .fl-body h3{margin:10px 0 7px;font-size:21px}
  .fl-body p{margin:0;color:var(--muted);font-size:14px}
  .fl-body ul{margin:12px 0 0;color:#49536b;font-size:13px}
  .fl-body li{margin-bottom:4px}
  .fl-learn{display:inline-block;margin-top:14px;color:var(--purple);font-weight:800;font-size:13px}
  .fl-learn:hover{color:var(--pink)}

  /* ---------- project band ---------- */
  .fl-band{background:linear-gradient(135deg,var(--purple),#0876c9);color:#fff}
  .fl-band h2,.fl-band h3{color:#fff}
  .fl-band .fl-head p{color:#eaf3ff}
  .fl-projects{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
  .fl-proj{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2);
    border-radius:24px;padding:16px;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
  .fl-proj h3{margin:12px 0 5px;font-size:20px}
  .fl-proj p{margin:0;color:#eaf3ff;font-size:14px}
  .fl-svg svg,.fl-svg img{width:100%;height:220px;display:block;border-radius:16px;object-fit:cover}
  .fl-svg{overflow:hidden;border-radius:16px;background:rgba(255,255,255,.10)}
  .fl-svg img{transition:transform 1s var(--e)}
  .fl-proj:hover .fl-svg img{transform:scale(1.05)}

  /* ---------- steps ---------- */
  .fl-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
  .fl-step{background:#fff;padding:22px;border-radius:20px;box-shadow:var(--shadow)}
  .fl-step h3{font-size:18px;margin-bottom:6px}
  .fl-step p{margin:0;color:var(--muted);font-size:14.5px}
  .fl-num{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;
    background:var(--pink);color:#fff;font-weight:900;margin-bottom:12px}

  /* ---------- safety ---------- */
  .fl-safety{background:#fff6eb}
  .fl-rules{display:grid;grid-template-columns:1fr 1fr;gap:20px}
  .fl-rule{background:#fff;border-radius:18px;padding:18px;border-left:5px solid var(--orange);
    box-shadow:0 8px 24px rgba(70,45,20,.07);font-size:14.5px;color:var(--muted)}
  .fl-rule strong{display:block;margin-bottom:4px;color:var(--ink);font-size:15.5px}

  .fl-notice{margin-top:15px;padding:12px 14px;background:#fff;border-radius:12px;font-size:14px;
    color:#4c556b;border:1px solid #e5e8f1}

  /* ---------- contact ---------- */
  .fl-contact{background:#111936;color:#dfe7ff;border-radius:24px;padding:34px 36px}
  .fl-contact h2{color:#fff;font-size:26px;margin-bottom:16px}
  .fl-contact-grid{display:flex;justify-content:space-between;gap:30px;flex-wrap:wrap;font-size:15px}
  .fl-contact a{color:#ffd27a}
  .fl-contact .note{margin:22px 0 0;color:#9eabc9;font-size:13px}

  /* ---------- site footer bar ---------- */
  .fl-foot{background:#0b1226;color:#8e9dbd;padding:18px 0;font-size:13px}
  .fl-foot .in{display:flex;flex-wrap:wrap;gap:10px 24px;justify-content:space-between;align-items:center}
  .fl-foot a{color:#c9d6ee}
  .fl-foot a:hover{color:#fff}
  .fl-foot nav{display:flex;flex-wrap:wrap;gap:18px}

  @media(max-width:991px){
    .fl-subnav .in{height:60px}
    .fl [id]{scroll-margin-top:80px}
  }
  @media(max-width:900px){
    .fl-hero-grid,.fl-rules{grid-template-columns:1fr}
    .fl-grid{grid-template-columns:repeat(2,1fr)}
    .fl-projects{grid-template-columns:1fr 1fr}
    .fl-intro{grid-template-columns:1fr}
    .fl-steps{grid-template-columns:repeat(2,1fr)}
    .fl-links{display:none}
  }
  @media(max-width:760px){
    /* the original squeezed the heading and its paragraph side by side here */
    .fl-head{flex-direction:column;align-items:flex-start;gap:12px}
  }
  @media(max-width:600px){
    .fl-hero h1{font-size:46px}
    .fl-sec{padding:52px 0}
    .fl-grid,.fl-steps,.fl-projects{grid-template-columns:1fr}
    .fl-hero{padding-top:50px}
    .fl-machines{grid-template-columns:1fr}
    .fl-machine img{height:190px}
    .fl-contact{padding:26px 22px}
  }