/* =====================================================================
   projects-page.css — Elsewedy Digital PROJECTS page
   1:1 carbon copy of Figma frame 1:2243 ("about us" / projects), 1280x3583.
   Fixed-px, frame-relative coordinates on a position:relative 1280-wide
   #stage of height 3583. The whole canvas scales via a width-fit script.
   ===================================================================== */

*{ margin:0; padding:0; box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
html,body{ background:#0a1420; }
body{ overflow-x:hidden; font-family:'Inter',sans-serif; -webkit-font-smoothing:antialiased; }

/* ---- The fixed design canvas ---- */
#stage{
  position:relative;
  width:1280px;
  height:2471px;                 /* frame height minus 804px saved by the compact card grid */
  transform-origin:top left;
  overflow:hidden;
  /* 1:2243 frame fill */
  background-image:linear-gradient(172.0933deg, rgb(217,228,235) 23.085%, rgb(78,99,128) 113.18%);
  background-size:100% 3583px;
  background-repeat:no-repeat;
  background-color:#203148;
}

/* =====================================================================
   BACKGROUND LAYERS
   ===================================================================== */

/* 1:2244 Rectangle 95 — dark cyan->navy->black radial vignette, rounded bottom */
.pj-rect95{
  position:absolute;
  left:0; top:-7px;
  width:1280px; height:3521px;   /* design had x=1/w=1278 -> 1px light sliver each side; extended to full width */
  border-radius:0 0 25px 25px;
  z-index:1;
  background-image:url("data:image/svg+xml;utf8,<svg viewBox='0 0 1278 3521' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'><rect x='0' y='0' height='100%' width='100%' fill='url(%23grad)' opacity='1'/><defs><radialGradient id='grad' gradientUnits='userSpaceOnUse' cx='0' cy='0' r='10' gradientTransform='matrix(-55.45 295.28 -59.9 -190.81 639 1620.5)'><stop stop-color='rgba(4,236,255,1)' offset='0'/><stop stop-color='rgba(17,230,254,1)' offset='0.00022258'/><stop stop-color='rgba(30,224,252,1)' offset='0.00044517'/><stop stop-color='rgba(57,213,250,1)' offset='0.00089033'/><stop stop-color='rgba(83,201,247,1)' offset='0.0013355'/><stop stop-color='rgba(110,189,244,1)' offset='0.0017807'/><stop stop-color='rgba(88,152,200,1)' offset='0.14809'/><stop stop-color='rgba(66,114,155,1)' offset='0.2944'/><stop stop-color='rgba(44,77,110,1)' offset='0.44071'/><stop stop-color='rgba(33,59,88,1)' offset='0.51387'/><stop stop-color='rgba(22,40,66,1)' offset='0.58703'/><stop stop-color='rgba(11,20,33,1)' offset='0.71351'/><stop stop-color='rgba(6,10,17,1)' offset='0.77675'/><stop stop-color='rgba(0,0,0,1)' offset='0.83999'/></radialGradient></defs></svg>");
  background-size:100% 100%;
  background-repeat:no-repeat;
}

/* 1:2306 — secondary cyan->black radial glow across the top band, rounded bottom */
.pj-rect-top{
  position:absolute;
  left:0; top:-58px;
  width:1280px; height:778px;   /* same 1px sliver fix */
  border-radius:0 0 25px 25px;
  z-index:2;
  background-image:url("data:image/svg+xml;utf8,<svg viewBox='0 0 1278 778' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'><rect x='0' y='0' height='100%' width='100%' fill='url(%23grad)' opacity='1'/><defs><radialGradient id='grad' gradientUnits='userSpaceOnUse' cx='0' cy='0' r='10' gradientTransform='matrix(-48.15 47.266 -38.707 -31.095 566 537.85)'><stop stop-color='rgba(4,236,255,1)' offset='0'/><stop stop-color='rgba(17,230,254,1)' offset='0.0062188'/><stop stop-color='rgba(30,224,252,1)' offset='0.012438'/><stop stop-color='rgba(57,213,250,1)' offset='0.024875'/><stop stop-color='rgba(83,201,247,1)' offset='0.037313'/><stop stop-color='rgba(110,189,244,1)' offset='0.049751'/><stop stop-color='rgba(88,152,200,1)' offset='0.22198'/><stop stop-color='rgba(66,114,155,1)' offset='0.3942'/><stop stop-color='rgba(44,77,110,1)' offset='0.56643'/><stop stop-color='rgba(33,59,88,1)' offset='0.65254'/><stop stop-color='rgba(22,40,66,1)' offset='0.73866'/><stop stop-color='rgba(11,20,33,1)' offset='0.86933'/><stop stop-color='rgba(6,10,17,1)' offset='0.93466'/><stop stop-color='rgba(0,0,0,1)' offset='1'/></radialGradient></defs></svg>");
  background-size:100% 100%;
  background-repeat:no-repeat;
}

/* 1:2307 "Stunning Wallpapers..." — cropped atmospheric texture over the top band */
.pj-wallpaper{
  position:absolute;
  left:0; top:-161px;
  width:1280px; height:898px;   /* same sliver fix (was x=2/w=1278) */
  overflow:hidden;
  opacity:0.76;
  z-index:2;
  pointer-events:none;
}
.pj-wallpaper img{
  position:absolute;
  left:0; top:-122.05%;
  width:100%; height:284.63%;
  max-width:none;
  display:block;
  object-fit:cover;
}

/* 1:2308 — dark blurred horizontal band separating hero from tabs */
.pj-blur-band{
  position:absolute;
  left:-110px; top:631px;
  width:1499px; height:186px;   /* left:-110 right:-109 => 1280+219 */
  background:#0d293a;
  filter:blur(52.75px);
  z-index:3;
  pointer-events:none;
}

/* =====================================================================
   HERO  (blades image, OUR PROJECTS, intro panel + CONTACT US)
   ===================================================================== */

/* 1:2482 ChatGPT Image Jul 4 — fanned blue server-blade render */
.pj-blades{
  position:absolute;
  left:50%; top:203px;
  width:706px; height:394px;
  transform:translateX(-50%);
  z-index:4;
  pointer-events:none;
}
.pj-blades img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:fill;   /* design code specifies size-full with NO object-cover -> no cropping */
  max-width:none;
  display:block;
}

/* 1:2416 OUR / PROJECTS */
.pj-title{
  position:absolute;
  left:85px; top:526px;
  width:380px; height:169px;
  margin:0;
  font-family:'Space Grotesk',sans-serif;
  font-weight:700;
  font-size:70px;
  line-height:1;
  text-transform:uppercase;
  color:#ffffff;
  z-index:6;
}

/* 1:2498 translucent intro panel */
.pj-intro-panel{
  position:absolute;
  left:807px; top:495px;        /* right:81 => 1280-81-392 */
  width:392px; height:160px;
  border-radius:11px;
  background:rgba(255,255,255,0.10);
  z-index:5;
}

/* 1:2499 intro paragraph */
.pj-intro-text{
  position:absolute;
  left:841px; top:510px;        /* top 14.24% of 3583 */
  width:331px;
  margin:0;
  font-family:'Inter',sans-serif;
  font-weight:300;
  font-size:16px;
  line-height:1.105;
  color:#ffffff;
  z-index:6;
}

/* =====================================================================
   CONTACT US buttons (maroon box + white square + maroon kite arrow)
   ===================================================================== */
.pj-contact{
  position:absolute;
  width:174px; height:46px;
  background:#80121d;
  display:block;
  text-decoration:none;
  z-index:6;
}
.pj-contact .pj-btn-sq{
  position:absolute;
  left:132px; top:7px;          /* 973-841 / 685-553 => 132 ; +7 */
  width:34px; height:31px;
  background:#ffffff;
  display:flex; align-items:center; justify-content:center;
}
.pj-contact .pj-btn-label{
  position:absolute;
  left:18px; top:50%;
  transform:translateY(-50%);
  font-family:'Ailerons','Space Grotesk',sans-serif;
  font-weight:400;
  font-size:16px;
  line-height:normal;
  text-transform:uppercase;
  color:#ffffff;
  white-space:nowrap;
}
.pj-contact .pj-kite{ transform:rotate(-45deg); }
.pj-contact .pj-kite path{ fill:#80121d; }

/* right-hero contact (1:2500) */
.pj-contact--hero{ left:841px; top:582px; }
/* bottom contact (1:2477) */
.pj-contact--bottom{ left:553px; top:1497px; }
.pj-contact--bottom .pj-btn-label{ left:14px; }   /* 567-553 */

/* =====================================================================
   FILTER TABS  (functional)
   ===================================================================== */
.pj-tabs{ position:absolute; left:0; top:0; z-index:6; }

/* 1:2487 translucent bar */
.pj-tabbar{
  position:absolute;
  left:254px; top:735px;        /* 16.67%+40.67 */
  width:772px; height:46px;
  background:rgba(255,255,255,0.41);
  border:1px solid #ffffff;
}

/* 1:2493 maroon active highlight (moves with active tab) */
.pj-tab-highlight{
  position:absolute;
  top:736px; height:44px;
  background:#80121d;
  left:255px; width:169px;      /* default = ALL PROJECTS segment */
  transition:left .18s ease, width .18s ease;
}

/* vertical dividers 1:2494 / 1:2491 / 1:2492 (Line23, 45px) */
.pj-tab-divider{
  position:absolute;
  top:736px;
  width:1px; height:45px;
  background:rgba(255,255,255,0.6);
}
.pj-tab-divider--1{ left:424px; }   /* 25%+104 */
.pj-tab-divider--2{ left:582px; }   /* 41.67%+48.67 */
.pj-tab-divider--3{ left:829px; }   /* 66.67%-24.33 */

/* clickable tab hit areas (between dividers) */
.pj-tab{
  position:absolute;
  top:735px; height:46px;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
  z-index:2;
}
.pj-tab span{
  font-family:'Space Grotesk',sans-serif;
  font-weight:400;
  font-size:16px;
  line-height:normal;
  text-transform:uppercase;
  color:#ffffff;
  white-space:nowrap;
}
.pj-tab--all{ left:254px; width:170px; }
.pj-tab--data{ left:424px; width:158px; }
.pj-tab--oil{ left:582px; width:247px; }
.pj-tab--general{ left:829px; width:197px; }

/* =====================================================================
   PROJECT CARDS
   ===================================================================== */
.pj-card{
  position:absolute;
  width:550px; height:542px;
  z-index:5;
  /* user request: compact grid — 4 cards per viewport. Inner layout untouched. */
  transform:scale(0.52);
  transform-origin:top left;
}
.pj-card-bg{
  position:absolute; inset:0;
  border-radius:16px;
  background:linear-gradient(to bottom, rgba(53,101,142,0.2), rgba(24,29,48,0.2));
}
.pj-card-img{
  position:absolute;
  left:23px; top:23px;
  width:505px; height:305px;
  border-radius:14px;
  overflow:hidden;
}
.pj-card-img img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  border-radius:14px;
  max-width:none;
  display:block;
}
.pj-card-title{
  position:absolute;
  left:24px; top:350px;
  width:467px;
  margin:0;
  font-family:'Space Grotesk',sans-serif;
  font-weight:500;
  font-size:28px;
  line-height:1;
  text-transform:uppercase;
  color:#ffffff;
}

/* SEE MORE button (white box + maroon square + white kite arrow) */
.pj-seemore{
  position:absolute;
  left:23px; top:450px;
  width:170px; height:46px;
  background:#ffffff;
  display:block;
  text-decoration:none;
}
.pj-seemore .pj-btn-sq{
  position:absolute;
  left:128px; top:7px;
  width:34px; height:31px;
  background:#80121d;
  display:flex; align-items:center; justify-content:center;
}
.pj-seemore .pj-btn-label{
  position:absolute;
  left:15px; top:50%;
  transform:translateY(-50%);
  font-family:'Ailerons','Space Grotesk',sans-serif;
  font-weight:400;
  font-size:16px;
  line-height:normal;
  text-transform:uppercase;
  color:#80121d;
  white-space:nowrap;
}
.pj-seemore .pj-kite{ transform:rotate(-45deg); }
.pj-seemore .pj-kite path{ fill:#ffffff; }

/* per-card title tweaks */
.pj-card--4 .pj-card-title{ left:25px; top:345px; width:509px; }
.pj-card--4 .pj-card-img{ left:25px; top:18px; }
.pj-card--4 .pj-seemore{ left:25px; top:445px; }
.pj-card--5 .pj-card-title{ left:25px; top:346px; width:504px; }
.pj-card--5 .pj-card-img{ left:22px; top:23px; }
.pj-card--5 .pj-seemore{ left:24px; top:446px; }
.pj-card--2 .pj-card-title{ left:23px; width:484px; }
.pj-card--6 .pj-card-title{ left:23px; width:527px; }

/* =====================================================================
   FOOTER  (cloned from home partials/footer.html — shifted up so the
   footer instance top (home 5895) lands at this design's 2773).
   Delta = 2773 - 5895 = -3122.
   ===================================================================== */
.proj-footer-shift{
  position:absolute;
  left:0; top:-4234px;
  z-index:7;
  /* The cloned footer container is 6722px tall and would otherwise overlay the
     whole canvas and swallow clicks on the tabs/buttons. Footer is purely
     visual here (all links are # placeholders), so disable pointer capture. */
  pointer-events:none;
}

.sec-footer{ position:relative; width:1280px; height:6722px; }

.sec-footer .ftr-bg{ position:absolute; left:0; top:5895px; width:1280px; height:827px; background:#203148; z-index:0; }

.sec-footer .ftr-servers{ position:absolute; left:128px; top:5921px; width:576px; height:362px; z-index:1; }
.sec-footer .ftr-rack{ position:absolute; top:0; width:362px; height:362px; filter:drop-shadow(6px 12px 16px rgba(0,0,0,0.45)); }
.sec-footer .ftr-rack--left{ left:0; z-index:2; }
.sec-footer .ftr-rack--right{ left:214px; z-index:1; }
.sec-footer .ftr-rack img{ display:block; width:100%; height:100%; object-fit:contain; }

.sec-footer .ftr-headline{ position:absolute; left:692px; top:6005px; width:499px; margin:0; font-family:'Space Grotesk',sans-serif; font-size:60px; line-height:1.14; letter-spacing:2.4px; text-transform:uppercase; z-index:1; }
.sec-footer .ftr-headline-a{ font-weight:500; color:#ffffff; }
.sec-footer .ftr-headline-b{ font-weight:700; background-image:linear-gradient(to right,#ffffff,#80121d); background-clip:text; -webkit-background-clip:text; color:transparent; }

.sec-footer .ftr-paragraph{ position:absolute; left:697px; top:6150px; width:356px; margin:0; font-family:'Inter',sans-serif; font-size:16px; line-height:1.3; color:#ffffff; font-weight:300; z-index:1; }
.sec-footer .ftr-paragraph .w-semi{ font-weight:600; }
.sec-footer .ftr-paragraph .w-bold{ font-weight:700; }
.sec-footer .ftr-paragraph .w-reg{ font-weight:300; }

.sec-footer .ftr-cta{ position:absolute; left:697px; top:6207px; width:170px; height:46px; background:#ffffff; border:1px solid #002444; display:block; text-decoration:none; z-index:1; }
.sec-footer .ftr-cta-label{ position:absolute; left:15px; top:13px; width:138px; margin:0; font-family:'Ailerons',sans-serif; font-weight:400; font-size:16px; line-height:normal; text-transform:uppercase; color:#80121d; }
.sec-footer .ftr-cta-icon-bg{ position:absolute; left:128px; top:7px; width:34px; height:31px; background:#80121d; display:block; }
.sec-footer .ftr-cta-icon{ position:absolute; left:50%; top:50%; width:16px; height:16px; transform:translate(-50%,-50%) rotate(-45deg); }

.sec-footer .ftr-pin{ position:absolute; left:602px; top:6530px; width:44.735px; height:44.735px; transform:rotate(-90.97deg); z-index:1; }
.sec-footer .ftr-pin img{ display:block; width:100%; height:100%; }

.sec-footer .ftr-logo{ position:absolute; left:95px; top:6348px; width:150px; height:64px; object-fit:contain; z-index:1; }
.sec-footer .ftr-tagline{ position:absolute; left:95px; top:6431px; width:210px; margin:0; font-family:'Inter',sans-serif; font-weight:500; font-size:14px; line-height:1.45; letter-spacing:-0.07px; color:rgba(255,255,255,0.76); z-index:1; }
.sec-footer .ftr-social{ position:absolute; left:95px; top:6493px; display:flex; align-items:center; gap:24px; z-index:1; }
.sec-footer .ftr-social-link{ display:block; width:24px; height:24px; }
.sec-footer .ftr-social-link img{ display:block; width:100%; height:100%; }

.sec-footer .ftr-col{ position:absolute; width:130px; z-index:1; }
.sec-footer .ftr-col--learn{ left:446px; top:6348px; }
.sec-footer .ftr-col--support{ left:698px; top:6348px; }
.sec-footer .ftr-col-header{ margin:0 0 39px 0; font-family:'Inter',sans-serif; font-weight:600; font-size:16px; letter-spacing:-0.08px; color:#ffffff; white-space:nowrap; }
.sec-footer .ftr-col-item{ margin:0 0 8px 0; text-decoration:none; display:block; font-family:'Inter',sans-serif; font-weight:500; font-size:16px; line-height:1.45; letter-spacing:-0.08px; color:rgba(255,255,255,0.55); }

.sec-footer .ftr-contact-header{ position:absolute; left:949px; top:6348px; margin:0; z-index:1; }
.sec-footer .ftr-contact{ position:absolute; left:949px; z-index:1; }
.sec-footer .ftr-contact--email{ top:6384px; width:167px; }
.sec-footer .ftr-contact--address{ top:6420px; width:159px; }
.sec-footer .ftr-contact-label{ margin:0; font-family:'Aileron',sans-serif; font-weight:600; font-size:14px; line-height:normal; color:rgba(255,255,255,0.79); }
.sec-footer .ftr-contact--email .ftr-contact-value{ margin:4px 0 0 0; font-family:'Aileron',sans-serif; font-weight:300; font-size:11px; line-height:normal; color:rgba(255,255,255,0.9); }
.sec-footer .ftr-contact--address .ftr-contact-value{ margin:4px 0 0 0; font-family:'Aileron',sans-serif; font-weight:300; font-size:10px; line-height:normal; color:rgba(255,255,255,0.9); }

.sec-footer .ftr-divider{ position:absolute; left:54px; top:6613px; width:1157px; height:1px; background:#ffffff; z-index:1; }
.sec-footer .ftr-copyright{ position:absolute; left:450px; top:6640px; width:379px; margin:0; font-family:'Inter',sans-serif; font-weight:300; font-size:11px; line-height:1.14; letter-spacing:0.44px; text-transform:uppercase; color:#ffffff; text-align:center; z-index:1; }

/* =====================================================================
   HEADER  (cloned from home partials/hero.html header, prefix pj-)
   ===================================================================== */
.pj-header{ position:absolute; left:21px; top:25px; width:1238px; height:88px; background:rgba(255,255,255,0.1); border-radius:19px; box-shadow:0px 4px 4px 0px rgba(0,0,0,0.25); z-index:8; }
.pj-header-logo{ position:absolute; left:58px; top:24px; width:109px; height:47px; }
.pj-header-nav{ position:absolute; left:0; top:0; width:100%; height:100%; }
.pj-nav-link{ position:absolute; top:30px; height:23px; display:flex; align-items:center; justify-content:center; gap:6px; font-family:'Inter',sans-serif; font-weight:500; font-size:16px; line-height:1.45; letter-spacing:-0.08px; color:#ffffff; text-decoration:none; white-space:nowrap; }
.pj-nav-home{ left:402px; width:45px; }
.pj-nav-solutions{ left:487px; width:82px; }
.pj-nav-services{ left:593px; width:66px; }
.pj-nav-projects{ left:688px; width:62px; }
.pj-nav-news{ left:793px; width:43px; }
.pj-nav-caret{ transform:rotate(180deg); flex:none; }
.pj-header-contact{ position:absolute; left:1009px; top:17px; width:169px; height:49px; background:#ffffff; text-decoration:none; overflow:hidden; }
.pj-header-contact-label{ position:absolute; left:18px; top:50%; transform:translateY(-50%); font-family:'Inter',sans-serif; font-weight:500; font-size:16px; line-height:1.45; letter-spacing:-0.08px; color:#213a5d; white-space:nowrap; }
.pj-header-contact-icon{ position:absolute; left:125px; top:9px; width:37px; height:35px; background:#213a5d; display:flex; align-items:center; justify-content:center; }
.pj-header-contact-icon svg{ transform:rotate(-45deg); }

/* footer shell is pointer-events:none; real links must still be clickable */
.proj-footer-shift a{ pointer-events:auto; }