/* =====================================================================
   certifications-page.css — Elsewedy Digital  CERTIFICATIONS
   1:1 carbon copy of Figma frame 1:2527 ("Desktop"), 1280 x 1871,
   inside section 1:2556 ("/certification").

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

   DOM order == Figma paint order:
     1:2528 radial backdrop -> 1:2529 hero photo -> 1:2530 blur panel
     -> 1:2531 carousel arrows -> 1:2536 footer -> 1:28 header
     -> 1:2538 content column (title + certificate strip)

   Nothing in this frame is fully off-canvas except the last two
   certificate cards (left 1523 and 1849); per the build brief they are
   built at TRUE coordinates and clipped by #stage / strip overflow.
   ===================================================================== */

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

/* ---- The fixed design canvas (1:2527 frame fill = white) ---- */
#stage{
  position:relative;
  width:1280px;
  height:1871px;
  transform-origin:top left;
  overflow:hidden;
  background:#ffffff;
}

/* =====================================================================
   1:2528 — radial-gradient backdrop
   left -39, top -35, 1357 x 1370, radius 0 0 25 25.
   Spans -39..1318, so it fully covers 0..1280 (no edge sliver) and the
   rounded bottom corners fall outside the canvas.
   ===================================================================== */
.cf-rad{
  position:absolute; left:-39px; top:-35px; width:1357px; height:1370px;
  border-radius:0 0 25px 25px;
  background-image:url("data:image/svg+xml;utf8,<svg viewBox='0 0 1357 1370' 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(-51.126 83.231 -41.1 -54.757 600.99 947.12)'><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:2529 — hero render "ChatGPT Image Jul 5, 2026, 01_03_45 AM 2"
   left 0 / right 0 -> w 1280; aspect 1536/1024 -> h 853.333; top -34.
   The exported PNG already carries the 0.85 layer opacity baked into its
   alpha channel (max alpha 217 = 0.851) — CSS opacity is NOT re-applied.
   ===================================================================== */
.cf-hero{ position:absolute; left:0; top:-34px; width:1280px; height:853.333px; pointer-events:none; }
.cf-hero img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; max-width:none; }

/* =====================================================================
   1:2530 — blurred dark plate behind the title
   right 232 -> left = 1280 - 232 - 780 = 268
   ===================================================================== */
.cf-panel{
  position:absolute; left:268px; top:282px; width:780px; height:225px;
  background:rgba(3,8,13,0.58);
  filter:blur(35.35px);
  pointer-events:none;
}

/* =====================================================================
   1:2531 — Group 149, carousel arrows (102 x 44, centred, top 946)
   ===================================================================== */
.cf-arrows{ position:absolute; left:589px; top:946px; width:102px; height:44px; }
.cf-arrows img{ display:block; width:100%; height:100%; }

/* =====================================================================
   FOOTER 1:2536
   The footer node is 1306 wide, centred -> x = -13, and bottom:0 with
   h 827 -> top = 1871 - 827 = 1044.
   Cloned verbatim from the verified about-page footer, which is expressed
   in the home-page coordinate system (footer top = 5895);
   shift = 1044 - 5895 = -4851.
   ===================================================================== */
.cf-footer-shift{
  position:absolute;
  left:0; top:-4851px;
  pointer-events:none;      /* purely visual shell; real links re-enabled below */
}
.cf-footer-shift a{ pointer-events:auto; }

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

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

/* I1:2536;211:1250 / 211:1254 — the two rack renders.
   Exact Figma geometry: 211:1254 -> left 9.8% of 1306 - 13 = 115, w 362;
   211:1250 -> left 25.64% of 1306 - 13 = 321.86 (= 115 + 206.86). */
.sec-footer .ftr-servers{ position:absolute; left:115px; 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:2536;211:1298 */
.sec-footer .ftr-headline{ position:absolute; left:693px; 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:2536;211:1297 */
/* Figma box is 356 wide; trimmed to 354 so the browser's Inter metrics break
   the line after "just want" exactly as the design render does. Text is
   left-aligned, so the 2px trim changes nothing else. */
.sec-footer .ftr-paragraph{ position:absolute; left:698px; top:6150px; width:354px; 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:2536;211:1293..1296 — white CTA */
.sec-footer .ftr-cta{ position:absolute; left:698px; 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:2536;211:1299 */
.sec-footer .ftr-pin{ position:absolute; left:589px; top:6530px; width:44.735px; height:44.735px; transform:rotate(-90.97deg); }
.sec-footer .ftr-pin img{ display:block; width:100%; height:100%; }

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

/* I1:2536;211:1255 "Content" — tagline + social links */
.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); }
.sec-footer .ftr-social{ position:absolute; left:95px; 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:2536;211:1302 / 211:1311 — link columns */
.sec-footer .ftr-col{ position:absolute; top:6348px; width:150px; }
.sec-footer .ftr-col--learn{ left:442px; }
.sec-footer .ftr-col--support{ left:699px; }
.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:2536;211:1308 / 211:1289 / 211:1288 — contact column */
.sec-footer .ftr-contact-header{ position:absolute; left:955px; top:6348px; margin:0; }
.sec-footer .ftr-contact{ position:absolute; left:955px; }
.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:2536;211:1317 / 211:1310 */
.sec-footer .ftr-divider{ position:absolute; left:42px; top:6612px; width:1180px; height:1px; background:#ffffff; }
.sec-footer .ftr-copyright{ position:absolute; left:446px; 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; }

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

/* =====================================================================
   1:2538 — content column: left 209, top 318, flex column, gap 26,
   width 1931.894 (the column is as wide as the certificate row).
   ===================================================================== */
.cf-content{ position:absolute; left:209px; top:318px; width:1931.894px; }

/* 1:2539 — Space Grotesk Bold 96, leading-none, uppercase, white.
   The source string is "    certifications" — the four leading spaces are
   what indents the word in the design, so whitespace is preserved. */
.cf-title{
  margin:0; width:100%; height:98px;
  font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:96px;
  line-height:1; color:#ffffff; text-transform:uppercase;
  white-space:pre-wrap; word-break:break-word;
}

/* 1:2540 — the certificate strip: overflow hidden, 24px side padding,
   items vertically centred.  Sits 26px below the 98px title -> top 442
   inside .cf-content. */
.cf-strip{
  position:relative; margin-top:26px;
  width:100%; height:446.416px;
  overflow:hidden;
}
/* 1:2541 — the overlap grid; every card is placed by its own offset. */
.cf-grid{ position:absolute; left:24px; top:0; width:1931.894px; height:446.416px; }
.cf-cert{ position:absolute; }
.cf-cert img{ position:absolute; inset:0; width:100%; height:100%; display:block; max-width:none; }

/* 1:2546  IfZIzYBn15wEcxZcZxGA 1 — size-full, no object-cover -> fill */
.cf-cert--a{ left:0;    top:1px; width:315px;     height:445px; }
.cf-cert--a img{ object-fit:fill; }
/* 1:2553  mMGDLbNDtKfXG5UAAl8t 1 — size-full, no object-cover -> fill */
.cf-cert--b{ left:323px; top:1px; width:312px;    height:445px; }
.cf-cert--b img{ object-fit:fill; }
/* 1:2549  LOROKTpOl2h7wzKwt3Mv 1 — size-full, no object-cover -> fill */
.cf-cert--c{ left:645px; top:1px; width:312px;    height:445px; }
.cf-cert--c img{ object-fit:fill; }
/* 1:2545  DwGFXFpoiCQLlUQa9NiZ 1 — rounded 5, object-cover */
.cf-cert--d{ left:965px; top:0;   width:312px;    height:445px; border-radius:5px; }
.cf-cert--d img{ object-fit:cover; border-radius:5px; }
/* 1:2552  mLiZbSGZq6kAkBRwayll 1 — rounded 5, object-cover */
.cf-cert--e{ left:1290px; top:0;  width:314px;    height:445px; border-radius:5px; }
.cf-cert--e img{ object-fit:cover; border-radius:5px; }
/* 1:2542  Lt9ujhzSUiTsmbvI4az5 1 — rounded 5, object-cover */
.cf-cert--f{ left:1616px; top:0;  width:315.894px; height:446.416px; border-radius:5px; }
.cf-cert--f img{ object-fit:cover; border-radius:5px; }