/* =====================================================================
   contact-page.css — Elsewedy Digital  CONTACT US
   1:1 carbon copy of Figma frame 1:2570 ("Desktop"), 1280 x 2028,
   inside section 1:2624 ("/contact-us").

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

   DOM order == Figma paint order:
     1:2571 radial backdrop -> 1:2572 wallpaper -> 1:2573 blur plate
     -> 1:2575 glow ellipse -> 1:2576 footer -> 1:28 header
     -> 1:2578 title -> 1:2579 / 1:2588 / 1:2597 contact cards
     -> 1:2607 lead paragraph -> 1:2608 form panel -> 1:2623 logo render
   ===================================================================== */

*{ 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; }

#stage{
  position:relative;
  width:1280px;
  height:2028px;
  transform-origin:top left;
  overflow:hidden;
  background:#ffffff;
}

/* =====================================================================
   1:2571 — radial-gradient backdrop.
   Figma: left 1 / right 1 (w 1278), top 0, h 1282, radius 0 0 25 25.
   Extended to left:0 / width:1280 so no 1px sliver survives at either
   edge (rule: page-spanning backgrounds placed at x=1 go full-bleed).
   ===================================================================== */
.ct-rad{
  position:absolute; left:0; top:0; width:1280px; height:1282px;
  border-radius:0 0 25px 25px;
  background-image:url("data:image/svg+xml;utf8,<svg viewBox='0 0 1278 1282' 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(-57.7 147.85 -121.3 -62.596 653.5 -21)'><stop stop-color='rgba(4,236,255,1)' offset='0'/><stop stop-color='rgba(17,230,254,1)' offset='0.0030626'/><stop stop-color='rgba(30,224,252,1)' offset='0.0061252'/><stop stop-color='rgba(57,213,250,1)' offset='0.01225'/><stop stop-color='rgba(83,201,247,1)' offset='0.018376'/><stop stop-color='rgba(110,189,244,1)' offset='0.024501'/><stop stop-color='rgba(88,152,200,1)' offset='0.15281'/><stop stop-color='rgba(66,114,155,1)' offset='0.28113'/><stop stop-color='rgba(44,77,110,1)' offset='0.40944'/><stop stop-color='rgba(33,59,88,1)' offset='0.4736'/><stop stop-color='rgba(22,40,66,1)' offset='0.53775'/><stop stop-color='rgba(11,20,33,1)' offset='0.76333'/><stop stop-color='rgba(6,10,17,1)' offset='0.87611'/><stop stop-color='rgba(0,0,0,1)' offset='0.9889'/></radialGradient></defs></svg>");
  background-size:100% 100%; background-repeat:no-repeat;
}

/* =====================================================================
   1:2572 — "Stunning Wallpapers for Android and iPhone 1" texture.
   Figma: left 0, top -55, 1278 x 785, node opacity 0.73.  The image's own
   0.40 opacity is ALREADY baked into the PNG alpha channel (getextrema()
   -> (102,102) == 0.40), so CSS opacity is applied only once, on the node.
   size-full with no object-cover / object-contain class -> object-fit:fill.
   Widened 1278 -> 1280 to remove the right-edge sliver.
   ===================================================================== */
.ct-wall{ position:absolute; left:0; top:-55px; width:1280px; height:785px; opacity:0.73; pointer-events:none; }
.ct-wall img{ position:absolute; inset:0; width:100%; height:100%; object-fit:fill; display:block; max-width:none; }

/* 1:2573 — blurred dark plate across the bottom of the hero band */
.ct-plate{
  position:absolute; left:-4px; top:613px; width:1286px; height:282px;
  background:#101d2f; filter:blur(41.05px); pointer-events:none;
}

/* =====================================================================
   1:2575 — Ellipse 22 glow.  Node is 475 x 475 at left calc(50% + 6.5px)
   with translate(-50%) -> left 409, top 63.  Its <img> is inset -10.44%
   on every side -> a 574.18 square at (359.41, 13.41), which is exactly
   the SVG's own 574.2 viewBox.  The SVG already carries opacity 0.41 and
   the 24.8 Gaussian blur, so no CSS opacity is re-applied.
   ===================================================================== */
.ct-glow{ position:absolute; left:359.41px; top:13.41px; width:574.18px; height:574.18px; pointer-events:none; }
.ct-glow img{ display:block; width:100%; height:100%; }

/* =====================================================================
   FOOTER 1:2576 — 1306 wide, centred -> x = -13; bottom 0 with h 827
   -> top = 2028 - 827 = 1201.
   Cloned verbatim from the verified certifications footer, which is
   expressed in the home-page coordinate system (footer top = 5895);
   shift = 1201 - 5895 = -4694.
   ===================================================================== */
.ct-footer-shift{
  position:absolute;
  left:0; top:-4694px;
  pointer-events:none;      /* purely visual shell; real links re-enabled below */
}
.ct-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:2576;211:1250 / 211:1254 — the two rack renders.
   Container-relative: 211:1254 -> 9.8% of 1306 - 13 = 115, w 362;
   211:1250 -> 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:2576;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:2576;211:1297 */
.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:2576;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); width:15px; height:7.663px; }
.sec-footer .ftr-cta-icon-bg .btn-kite path{ fill:#ffffff; }

/* I1:2576;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:2576;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:2576;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:2576;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:2576;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:2576;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)
   ===================================================================== */
.ct-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); }
.ct-header-logo{ position:absolute; left:58px; top:24px; width:109px; height:47px; }
.ct-header-logo img{ display:block; width:100%; height:100%; }
.ct-header-nav{ position:absolute; left:0; top:0; width:100%; height:100%; }
.ct-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; }
.ct-nav-home{ left:402px; width:45px; }
.ct-nav-solutions{ left:487px; width:82px; }
.ct-nav-services{ left:593px; width:66px; }
.ct-nav-projects{ left:688px; width:62px; }
.ct-nav-news{ left:793px; width:43px; }
.ct-nav-caret{ transform:rotate(180deg); flex:none; }
.ct-header-contact{ position:absolute; left:1009px; top:17px; width:169px; height:49px; background:#ffffff; text-decoration:none; overflow:hidden; }
.ct-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; }
.ct-header-contact-icon{ position:absolute; left:125px; top:7px; width:37px; height:35px; background:#213a5d; display:flex; align-items:center; justify-content:center; }
/* Kite ink measures 16 x 16 in the design render, i.e. the kite is laid out
   15px wide (11.194 x sqrt(2) inside the arrow frame), not at its natural
   22.6048 viewBox width. */
.ct-header-contact-icon svg{ transform:rotate(-45deg); width:15px; height:7.663px; }

/* =====================================================================
   1:2578 — "CONTACT US"  (Space Grotesk Bold 48, leading-none, uppercase)
   ===================================================================== */
.ct-title{
  position:absolute; left:80px; top:544px; width:318px; height:60px; margin:0;
  font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:48px;
  line-height:1; color:#ffffff; text-transform:uppercase;
}

/* 1:2607 — lead paragraph.  Explicit <br> matches the design's own line
   break; Inter Light 20 at leading-none -> the two lines sit 20px apart. */
.ct-intro{
  position:absolute; left:79px; top:609px; width:550px; height:95px; margin:0;
  font-family:'Inter',sans-serif; font-weight:300; font-size:20px;
  line-height:1; color:#ffffff;
}

/* =====================================================================
   1:2579 / 1:2588 / 1:2597 — the three contact cards.
   All 550 wide at left 79, fill rgba(97,113,127,0.2), radius 10, with the
   design's 1px light rim (brighter at the top-left than the bottom-right;
   sampled +56 / +34 over the local background in the design render).
   ===================================================================== */
.ct-card{
  position:absolute; left:79px; width:550px; border-radius:10px;
  background:rgba(97,113,127,0.2);
}
/* the 1px rim, painted only in the ring so the translucent fill underneath
   is not double-tinted */
.ct-card::after,
.ct-field::after{
  content:''; position:absolute; inset:0; border-radius:10px; padding:1px;
  background:linear-gradient(135deg, rgba(255,255,255,0.25), rgba(255,255,255,0.17));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
          mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask-composite:exclude;
  pointer-events:none;
}
.ct-card--email{ top:679px; height:97px; }
.ct-card--call{  top:799px; height:98px; }
.ct-card--loc{   top:920px; height:97px; }

/* 1:2582 / 1:2591 / 1:2600 — glyph icons (size-full, no fit class -> fill) */
.ct-card-icon{ position:absolute; display:block; }
.ct-card-icon img{ display:block; width:100%; height:100%; object-fit:fill; }
.ct-card--email .ct-card-icon{ left:43px; top:35px; width:30px; height:23px; }
.ct-card--call  .ct-card-icon{ left:43px; top:35px; width:22px; height:25px; }
.ct-card--loc   .ct-card-icon{ left:43px; top:34px; width:22px; height:28px; }

.ct-card-title{
  position:absolute; left:87px; top:24px; width:177px; height:23px; margin:0;
  font-family:'Inter',sans-serif; font-weight:400; font-size:20px; line-height:1;
  color:#ffffff;
}
.ct-card-value{
  position:absolute; left:88px; top:51px; height:27px; margin:0;
  font-family:'Inter',sans-serif; font-weight:300; font-size:16px; line-height:1;
  color:#ffffff; white-space:nowrap;
}
.ct-card--email .ct-card-value{ width:274px; }
.ct-card--call  .ct-card-value{ width:274px; }
.ct-card--loc   .ct-card-value{ width:343px; }

/* 1:2585 / 1:2594 / 1:2604 — white square button (left 88% -> 484, w 37)
   with the navy #213a5d kite arrow (1:2586 / 1:2595 / 1:2605). */
.ct-card-btn{
  position:absolute; left:484px; width:37px; height:35px; background:#ffffff;
  display:flex; align-items:center; justify-content:center; text-decoration:none;
}
.ct-card--email .ct-card-btn{ top:31px; }
.ct-card--call  .ct-card-btn{ top:30px; }
.ct-card--loc   .ct-card-btn{ top:31px; }
.ct-card-btn .ct-kite path{ fill:#213a5d; }

/* Shared kite geometry.  The Figma arrow node is an 11.194px square frame
   whose content is the kite laid out 15.831px wide (= 11.194 x sqrt(2));
   rotated -45deg that yields the 16 x 16 ink box measured in the design
   render.  Path is the verbatim 22.6048 x 11.547 kite. */
.ct-kite{ display:block; width:15px; height:7.663px; transform:rotate(-45deg); flex:none; }

/* =====================================================================
   1:2608 / 1:2609 — the translucent form panel (550 x 607 at 651, 544).
   Panel padding is 21 top / 17 left / 20 right / 34 bottom with a 21px
   column gap, which places the four field boxes and the button row at the
   panel-relative tops asserted below (all re-measured off the design
   render: 565 / 651 / 737 / 823 / 1073 in canvas space).
   ===================================================================== */
.ct-form{
  position:absolute; left:651px; top:544px; width:550px; height:607px;
  border-radius:10px;
  background:linear-gradient(to bottom, rgba(53,101,142,0.2), rgba(24,29,48,0.2));
}

.ct-field{
  position:absolute; left:17px; width:513px; border-radius:10px;
  background:rgba(97,113,127,0.2);
}
.ct-field--1{ top:21px;  height:65px; }
.ct-field--2{ top:107px; height:65px; }
.ct-field--3{ top:193px; height:65px; }
.ct-field--4{ top:279px; height:229px; }

.ct-input{
  position:absolute; left:0; top:0; width:100%; height:100%;
  background:transparent; border:0; outline:none; border-radius:10px;
  color:#ffffff; caret-color:#ffffff;
  font-family:'Inter',sans-serif; font-weight:400; font-size:18px; line-height:23px;
  -webkit-appearance:none; appearance:none;
}
.ct-input::placeholder{ color:rgba(255,255,255,0.58); opacity:1; }
.ct-input::-webkit-input-placeholder{ color:rgba(255,255,255,0.58); }

/* The design places its four placeholder rows at panel-relative tops
   42 / 124 / 203 / 296 — i.e. NOT uniformly centred in their boxes.  The
   asymmetric padding below reproduces those exact baselines. */
.ct-field--1 .ct-input{ padding:0 20px 4px 24px; }
.ct-field--2 .ct-input{ padding:0 20px 12px 24px; }
.ct-field--3 .ct-input{ padding:0 20px 26px 24px; }
.ct-textarea{ padding:15px 20px 0 24px; resize:none; }

/* 1:2614..1:2618 — SUBMIT.  Maroon 136 x 46 box, centred in the 513-wide
   content column -> left 17 + (513-136)/2 = 205.5; top 529. */
.ct-submit{
  position:absolute; left:205.5px; top:529px; width:136px; height:46px;
  background:#80121d; border:0; border-radius:0; padding:0; margin:0;
  cursor:pointer; display:block; text-align:left; font:inherit; color:#ffffff;
}
.ct-submit-label{
  position:absolute; left:18px; top:13px; width:104px; height:19px; line-height:19px;
  font-family:'Ailerons','Space Grotesk',sans-serif; font-weight:400; font-size:16px;
  text-transform:uppercase; color:#ffffff;
}
.ct-submit-icon{
  position:absolute; left:94px; top:7px; width:34px; height:31px; background:#ffffff;
  display:flex; align-items:center; justify-content:center;
}
.ct-submit-icon .ct-kite path{ fill:#80121d; }

/* Inline confirmation — swaps the button row after a valid submit.
   (The one intentional addition to the design.) */
.ct-thanks{
  position:absolute; left:17px; top:529px; width:513px; height:46px; margin:0;
  display:none; align-items:center; justify-content:center;
  font-family:'Inter',sans-serif; font-weight:500; font-size:18px; line-height:1;
  color:#ffffff;
}
.ct-form.is-sent .ct-submit{ display:none; }
.ct-form.is-sent .ct-thanks{ display:flex; }

/* =====================================================================
   1:2623 — "ChatGPT Image Jul 4, 2026, 11_32_14 PM 1" chrome logo render.
   655 x 382 centred on (640.5, 347) -> left 313, top 156; the <img> is
   151.65% x 173.12% at -24.33% / -34.14% inside a clipped box.
   ===================================================================== */
.ct-render{ position:absolute; left:313px; top:156px; width:655px; height:382px; overflow:hidden; pointer-events:none; }
.ct-render img{
  position:absolute; left:-24.33%; top:-34.14%; width:151.65%; height:173.12%;
  display:block; max-width:none;
}