/* =====================================================================
   news-page.css — Elsewedy Digital  NEWS
   1:1 carbon copy of Figma frame 1:1813 ("about us"), 1280 x 3498,
   inside section 1:1948 ("/news").

   Fixed-px, frame-relative coordinates on a position:relative 1280-wide
   #stage of height 3498. The whole canvas scales via a width-fit script.

   DOM order == Figma paint order.

   Omitted because they render nothing inside 0..1280 x 0..3498:
     1:1817           (y -1081..-681, entirely above the canvas)
     1:1818 + subtree (the old "About Elsewedy Digital" block, y < -1242,
                       incl. 1:1819..1:1826)
     1:1877           ("Line 12", zero-width vertical rule at x = 1553)
     1:1878           (previous section's hero title, top -772.5)
     1:1880           ("Ellipse 17", y 2878..5231 — the band that falls
                       inside the frame lies entirely beneath the opaque
                       footer, which paints later in DOM order)
     1:1881           ("OUR SERVICES", left = 100% + 13746px)
     1:1884           ("Visuales • Instagram 1" — empty frame, no fill)
   Partially off-canvas nodes (1:1814 at left -7 / w 1311, 1:1815 at
   left -1, 1:1816 at left -49 / right -62, 1:1882 at left -4 / right -4,
   the footer at left -4 / right -22) are built at TRUE coordinates and
   clipped by #stage overflow:hidden.
   ===================================================================== */

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

/* ---- The fixed design canvas (1:1813 frame fill) ---- */
#stage{
  position:relative;
  width:1280px;
  height:3498px;
  transform-origin:top left;
  overflow:hidden;
  background-image:linear-gradient(179.83680274674117deg, rgb(217,228,235) 20.393%, rgb(78,99,128) 99.948%);
  background-repeat:no-repeat;
  background-color:#4e6380;
  box-shadow:0px 4px 4px 0px rgba(0,0,0,0.25);
}

/* =====================================================================
   1:1814 — dark hero band
   ===================================================================== */
.nw-band{ position:absolute; left:-7px; top:-3px; width:1311px; height:759px; background:#19263a; }

/* =====================================================================
   1:1815 — "bg" render.  Wrapper: left calc(50% + 0.5px) with
   -translate-x-1/2 over a 1283 square -> left -1, top -278.
   Inner rotate(90deg); img is size-full + object-cover + opacity 58%
   (Bg.png is RGB with no alpha channel, so the opacity is NOT baked in).
   ===================================================================== */
.nw-herobg{ position:absolute; left:-1px; top:-278px; width:1283px; height:1283px;
            display:flex; align-items:center; justify-content:center; pointer-events:none; }
.nw-herobg > .r{ flex:none; transform:rotate(90deg); }
.nw-herobg .b{ position:relative; width:1283px; height:1283px; }
.nw-herobg .b img{ position:absolute; inset:0; width:100%; height:100%;
                   object-fit:cover; opacity:0.58; display:block; max-width:none; }

/* =====================================================================
   1:1816 — blurred radial plate (left -49, right -62 -> w 1391)
   ===================================================================== */
.nw-rad1816{
  position:absolute; left:-49px; top:-40px; width:1391px; height:273px;
  filter:blur(37.35px); pointer-events:none;
  background-image:url("data:image/svg+xml;utf8,<svg viewBox='0 0 1391 273' 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(0.049993 38.807 -197.73 0.25473 695.5 -24.073)'><stop stop-color='rgba(17,28,43,1)' offset='0.19804'/><stop stop-color='rgba(7,9,12,0.38)' offset='1'/></radialGradient></defs></svg>");
  background-size:100% 100%; background-repeat:no-repeat;
}

/* =====================================================================
   HEADER 1:28  (left 1/2 - 619 = 21, top 25, 1238 x 88)
   ===================================================================== */
.nw-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); }
.nw-header-logo{ position:absolute; left:58px; top:24px; width:109px; height:47px; }
.nw-header-logo img{ display:block; width:100%; height:100%; }
.nw-header-nav{ position:absolute; left:0; top:0; width:100%; height:100%; }
.nw-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; }
.nw-nav-home{ left:402px; width:45px; }
.nw-nav-solutions{ left:487px; width:82px; }
.nw-nav-services{ left:593px; width:66px; }
.nw-nav-projects{ left:688px; width:62px; }
.nw-nav-news{ left:793px; width:43px; }
.nw-nav-caret{ transform:rotate(180deg); flex:none; }
.nw-header-contact{ position:absolute; left:1009px; top:17px; width:169px; height:49px; background:#ffffff; text-decoration:none; overflow:hidden; }
.nw-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; }
.nw-header-contact-icon{ position:absolute; left:125px; top:7px; width:37px; height:35px; background:#213a5d; display:flex; align-items:center; justify-content:center; }
.nw-header-contact-icon svg{ transform:rotate(-45deg); }

/* =====================================================================
   1:1882 — large rounded gradient panel
   left -4, right -4 -> w 1288;  h 2273 centred on 50% - 23.5 -> top 589
   ===================================================================== */
.nw-panel{
  position:absolute; left:-4px; top:589px; width:1288px; height:2273px; border-radius:43px;
  background-image:linear-gradient(207.78220974034528deg, rgb(33,58,93) 5.5593%, rgb(110,189,244) 37.903%, rgb(154,183,215) 63.594%, rgb(78,95,122) 99.554%);
}

/* =====================================================================
   1:1883 — LATEST / INSIGHTS  (h 88 centred on top 723 -> top 679)
   ===================================================================== */
.nw-secttl{
  position:absolute; left:79px; top:679px; width:266px; height:88px;
  display:flex; flex-direction:column; justify-content:center;
  font-family:'Space Grotesk',sans-serif; font-weight:500; font-size:48px;
  line-height:0.98; text-transform:uppercase; color:#ffffff;
}
.nw-secttl p{ margin:0; }

/* =====================================================================
   Buttons — square corners, kite arrow (path verbatim from Figma)
   ===================================================================== */
.nw-btn{ position:absolute; display:block; text-decoration:none; }
.nw-btn .btn-sq{ position:absolute; display:flex; align-items:center; justify-content:center; width:34px; height:31px; top:7px; }
.nw-btn .btn-label{
  position:absolute; height:19px; line-height:19px;
  font-family:'Ailerons','Space Grotesk',sans-serif; font-weight:400; font-size:16px;
  text-transform:uppercase; white-space:nowrap;
}
.nw-btn .btn-kite{ transform:rotate(-45deg); }

/* red: maroon box + white square + maroon arrow */
.nw-btn--red{ background:#80121d; }
.nw-btn--red .btn-sq{ background:#ffffff; }
.nw-btn--red .btn-label{ color:#ffffff; }
.nw-btn--red .btn-kite path{ fill:#80121d; }

/* white: white box + maroon square + white arrow */
.nw-btn--white{ background:#ffffff; }
.nw-btn--white .btn-sq{ background:#80121d; }
.nw-btn--white .btn-label{ color:#80121d; }
.nw-btn--white .btn-kite path{ fill:#ffffff; }

/* 1:1885..1:1889 — hero CONTACT US (left 41.67% + 19.67 = 553) */
.nw-btn--contact{ left:553px; top:465px; width:174px; height:46px; }
.nw-btn--contact .btn-sq{ left:132px; }
.nw-btn--contact .btn-label{ left:14px; top:13px; }

/* 1:1895..1:1899 — white SEE MORE (left 41.67% + 23.67 = 557) */
.nw-btn--seemore{ left:557px; top:2550px; width:166px; height:46px; }
.nw-btn--seemore .btn-sq{ left:123px; }
.nw-btn--seemore .btn-label{ left:12px; top:13px; }

/* per-card red SEE MORE (local to .nw-card) */
.nw-btn--card{ left:909px; top:287px; width:174px; height:46px; }
.nw-btn--card .btn-sq{ left:132px; }
.nw-btn--card .btn-label{ left:14px; top:13px; }

/* =====================================================================
   1:1890 — hero text block
   centred at x = 50% + 0.5 = 640.5, y = 50% - 1409.19 = 339.81
   ===================================================================== */
.nw-hero-text{
  position:absolute; left:640.5px; top:339.81px; transform:translate(-50%,-50%);
  display:flex; flex-direction:column; align-items:center;
  text-align:center; color:#ffffff;
}
.nw-hero-h1{
  width:1163px; height:103.611px; margin:0; flex:none;
  font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:70px;
  line-height:normal; text-transform:uppercase;
}
.nw-hero-sub{
  position:relative; top:2px;
  width:899px; margin:0; flex:none;
  font-family:'Inter',sans-serif; font-weight:300; font-size:24px; line-height:0.98;
}

/* =====================================================================
   FOOTER 1:1894
   Node: left -4, right -22 (w 1306), bottom -17, h 827 -> top 2688.
   Cloned from the verified about-page footer, which is expressed in the
   home-page coordinate system (footer top = 5895) at left -13; this page
   puts the same 1306-wide box at left -4, so every child x is +9 and the
   vertical shift is 2688 - 5895 = -3207.
   ===================================================================== */
.nw-footer-shift{
  position:absolute;
  left:0; top:-3207px;
  pointer-events:none;
}
.nw-footer-shift a{ pointer-events:auto; }

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

/* the box spans x -4..1302; the visible slice is 0..1280 (no sliver) */
.sec-footer .ftr-bg{ position:absolute; left:0; top:5895px; width:1280px; height:827px; background:#203148; }

/* I1:1894;211:1250 / 211:1254 — the two rack renders.
   211:1254 -> left 9.8% of 1306 - 4 = 124, w 362;
   211:1250 -> left 25.64% of 1306 - 4 = 330.86 (= 124 + 206.86). */
.sec-footer .ftr-servers{ position:absolute; left:124px; top:5921px; width:569px; height:362px; }
.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; }
.sec-footer .ftr-rack--right{ left:206.86px; }
.sec-footer .ftr-rack img{ display:block; width:100%; height:100%; object-fit:contain; }

/* I1:1894;211:1298 */
.sec-footer .ftr-headline{ position:absolute; left:702px; 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; }
.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; }

/* I1:1894;211:1297 */
.sec-footer .ftr-paragraph{ position:absolute; left:707px; top:6150px; width:356px; margin:0; font-family:'Inter',sans-serif; font-size:16px; line-height:normal; color:#ffffff; font-weight:300; }
.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; }

/* I1:1894;211:1293..1296 — white CTA */
.sec-footer .ftr-cta{ position:absolute; left:707px; top:6207px; width:170px; height:46px; background:#ffffff; border:1px solid #002444; display:block; text-decoration:none; }
.sec-footer .ftr-cta-label{ position:absolute; left:15px; top:15px; height:19px; line-height:19px; width:138px; margin:0; font-family:'Ailerons','Space Grotesk',sans-serif; font-weight:400; font-size:16px; text-transform:uppercase; color:#80121d; }
.sec-footer .ftr-cta-icon-bg{ position:absolute; left:128px; top:7px; width:34px; height:31px; background:#80121d; display:flex; align-items:center; justify-content:center; }
.sec-footer .ftr-cta-icon-bg .btn-kite{ transform:rotate(-45deg); }
.sec-footer .ftr-cta-icon-bg .btn-kite path{ fill:#ffffff; }

/* I1:1894;211:1299 */
.sec-footer .ftr-pin{ position:absolute; left:598px; top:6530px; width:44.735px; height:44.735px; transform:rotate(-90.97deg); }
.sec-footer .ftr-pin img{ display:block; width:100%; height:100%; }

/* I1:1894;211:1267 — logo */
.sec-footer .ftr-logo{ position:absolute; left:107px; top:6348px; width:154px; height:67px; }
.sec-footer .ftr-logo img{ display:block; width:100%; height:100%; }

/* I1:1894;211:1255 "Content" — tagline + social links */
.sec-footer .ftr-tagline{ position:absolute; left:104px; 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); }
.sec-footer .ftr-social{ position:absolute; left:104px; top:6493px; display:flex; align-items:center; gap:24px; }
.sec-footer .ftr-social-link{ display:block; width:24px; height:24px; }
.sec-footer .ftr-social-link img{ display:block; width:100%; height:100%; }

/* I1:1894;211:1302 / 211:1311 — link columns */
.sec-footer .ftr-col{ position:absolute; top:6348px; width:150px; }
.sec-footer .ftr-col--learn{ left:451px; }
.sec-footer .ftr-col--support{ left:708px; }
.sec-footer .ftr-col-header{ margin:0; font-family:'Inter',sans-serif; font-weight:600; font-size:16px; line-height:1.45; letter-spacing:-0.08px; color:#ffffff; white-space:nowrap; }
.sec-footer .ftr-col-item{ position:absolute; margin:0; 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); text-decoration:none; display:block; }
.sec-footer .ftr-col-item--1{ top:47px; }
.sec-footer .ftr-col-item--2{ top:78.2px; }
.sec-footer .ftr-col-item--3{ top:109.4px; }
.sec-footer .ftr-col-item--4{ top:140.6px; }

/* I1:1894;211:1308 / 211:1289 / 211:1288 — contact column */
.sec-footer .ftr-contact-header{ position:absolute; left:964px; top:6348px; margin:0; }
.sec-footer .ftr-contact{ position:absolute; left:964px; }
.sec-footer .ftr-contact--email{ top:6384px; width:170px; }
.sec-footer .ftr-contact--address{ top:6420px; width:162px; }
.sec-footer .ftr-contact-label{ margin:0; font-family:'Aileron','Inter',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:0; font-family:'Aileron','Inter',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:0; font-family:'Inter',sans-serif; font-weight:300; font-size:10px; line-height:normal; color:rgba(255,255,255,0.9); }

/* I1:1894;211:1317 / 211:1310 */
.sec-footer .ftr-divider{ position:absolute; left:51px; top:6612px; width:1180px; height:1px; background:#ffffff; }
.sec-footer .ftr-copyright{ position:absolute; left:455px; top:6641px; width:387px; 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; }

/* =====================================================================
   News cards — 1:1936 / 1:1900 / 1:1912 / 1:1924
   All 1120 x 370 at left 80.
   ===================================================================== */
.nw-card{ position:absolute; left:80px; width:1120px; height:370px; }
.nw-card--1{ top:845px; }
.nw-card--2{ top:1267px; }
.nw-card--3{ top:1689px; }
.nw-card--4{ top:2111px; }

.nw-card-bg{
  position:absolute; left:0; top:0; width:1120px; height:370px; border-radius:22px;
  background-image:linear-gradient(to left, #7f90a3, #003159);
}
.nw-card-photo{ position:absolute; left:40px; top:36px; width:396px; height:297px; border-radius:10px; }
.nw-card-photo img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; border-radius:10px; display:block; max-width:none; pointer-events:none; }

.nw-card-title{
  position:absolute; left:465px; margin:0; padding-top:1px;
  font-family:'Space Grotesk',sans-serif; font-weight:400; font-size:32px;
  line-height:1.03; color:#ffffff;
}
.nw-card-copy{
  position:absolute; left:465px; padding-top:2px; width:527px; height:95px; margin:0;
  font-family:'Inter',sans-serif; font-weight:300; font-size:20px; line-height:1.03;
  text-align:justify; color:#ffffff; white-space:pre-wrap;
}

/* 1:1946 / 1:1947 */
.nw-card--1 .nw-card-title{ top:84px; width:531px; height:70px; }
.nw-card--1 .nw-card-copy{ top:174px; }
/* 1:1910 / 1:1911 */
.nw-card--2 .nw-card-title{ top:94px; width:531px; height:70px; }
.nw-card--2 .nw-card-copy{ top:178px; }
/* 1:1922 / 1:1923 */
.nw-card--3 .nw-card-title{ top:131px; width:343px; height:39px; }
.nw-card--3 .nw-card-copy{ top:177px; }
/* 1:1934 / 1:1935 */
.nw-card--4 .nw-card-title{ top:86px; width:317px; height:70px; }
.nw-card--4 .nw-card-copy{ top:170px; }