/* =====================================================================
   PakAmGlobal · Homepage · Elementor styles
   ---------------------------------------------------------------------
   Paste this into the FIRST HTML widget on the page (inside the hidden
   "PAG · Styles + Scripts" container). The second HTML widget holds the
   script. Nothing else on the page uses HTML widgets.

   NO FONTS ARE SET HERE for your content. Font family, size and weight
   for headings, text and buttons are yours to set in Elementor.
   Section 12 at the end lists the original values if you want them.

   SECTION CLASSES (Advanced > CSS Classes). The script finds everything
   by these names, so no per-widget setup is needed:
     pag-section ........ every section container
     pag-wrap ........... the centred content column inside a section
     pag-home-hero + pag-art-city pag-art-orbits pag-art-spot
     pag-hero-slides / pag-hero-slide / pag-hero-title / pag-hero-sub
     pag-hero-buttons / pag-btn pag-btn--outline | pag-btn--blue
     pag-hero-logos-wrap / pag-logos pag-logos--light pag-marquee / pag-logo
     pag-home-panel + one art class (pag-art-mesh | waves | glass | office)
                    + one accent (pag-accent-a..d)
     pag-panel-card / pag-panel-kicker / pag-panel-title / pag-panel-text / pag-learn
     pag-home-reach / pag-reach-title / pag-reach-text / pag-map pag-art-map
     pag-home-partners / pag-partners-title / pag-partners-text / pag-logos pag-logos--dark
     pag-home-footer pag-art-glow / pag-footer-top / pag-footer-logo /
     pag-footer-title / pag-footer-links / pag-footer-bottom / pag-copy / pag-socials / pag-legal

   TO USE YOUR OWN PHOTOS: set the section's Background Image in Elementor
   normally, then remove its pag-art-* class. The animation still runs.
   ===================================================================== */

/* =====================================================================
   PakAmGlobal · Homepage
   ---------------------------------------------------------------------
   Built to convert to Elementor later:
   • every block below is a container (section → wrap → widgets)
   • class names start with "pag-" and map 1:1 to Elementor CSS classes
   • decorative artwork is drawn by the script into containers carrying
     "pag-art-..." classes, so no HTML is needed for it in Elementor
   ORDER: 1 tokens · 2 base · 3 header · 4 hero · 5 panels · 6 reach
          7 partners · 8 footer · 9 motion · 10 responsive · 11 reduced motion
   ===================================================================== */

/* 1. TOKENS ------------------------------------------------------------ */
:root{
  --pag-hero:#0B3A8F;
  --pag-blue:#2E6CB5;
  --pag-blue-deep:#194A79;
  --pag-reach:#2166AB;
  --pag-navy:#0A2146;
  --pag-red:#CF021A;
  --pag-sky:#8EB6E3;
  --pag-ink:#0F1B2D;
  --pag-slate:#33425A;
  --pag-line:rgba(255,255,255,.28);
  --pag-deck:#040A1C;              /* shows around the panels while they shrink into the deck */
  --pag-wrap:1320px;
  --pag-gutter:40px;
  --pag-header-h:84px;
  /* no font family is set anywhere: every text piece inherits your Elementor typography */
  --ease-out:cubic-bezier(.2,.7,.2,1);
  --ease-draw:cubic-bezier(.6,.05,.25,1);
  --ease-pop:cubic-bezier(.34,1.56,.64,1);
  --ease-words:cubic-bezier(.2,.85,.2,1);
  --ease-wipe:cubic-bezier(.75,0,.2,1);
}

/* 2. BASE -------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0; color:var(--pag-ink); background:#fff; -webkit-font-smoothing:antialiased}
img,svg,canvas{display:block; max-width:100%}
h1,h2,h3,h4,p,ul{margin:0}
ul{padding:0; list-style:none}
a{color:inherit; text-decoration:none}
.pag-section{position:relative}
.pag-wrap{position:relative; z-index:2; width:100%; max-width:var(--pag-wrap); margin:0 auto; padding:0 var(--pag-gutter)}
.pag-bg{position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none}
.pag-bg > *,.pag-bg canvas{position:absolute; inset:0; width:100%; height:100%}
.pag-sr-only{position:absolute; width:1px; height:1px; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap}
:focus-visible{outline:2px solid #fff; outline-offset:3px}
.pag-home-partners :focus-visible{outline-color:var(--pag-blue)}

/* buttons */
.pag-btn{display:inline-flex; align-items:center; justify-content:center; gap:10px; padding:15px 26px; border-radius:3px;
  color:#fff; border:1px solid rgba(255,255,255,.9);
  transition:background-color .25s, color .25s, border-color .25s, translate .35s var(--ease-out)}
.pag-home-hero .pag-btn{padding:17px 32px; letter-spacing:.01em}
.pag-btn--outline{background:transparent}
.pag-btn--outline:hover{background:#fff; color:var(--pag-hero)}
.pag-btn--blue{background:linear-gradient(180deg, #3C80CB, #2465AC); border-color:rgba(255,255,255,.55); box-shadow:0 10px 26px -12px rgba(0,0,0,.65)}
.pag-btn--blue:hover{background:linear-gradient(180deg, #4A8FD8, #2E72BC); border-color:rgba(255,255,255,.8)}
.pag-btn--nav{background:var(--pag-blue); border-color:var(--pag-blue); border-radius:4px; padding:15px 24px}
.pag-btn--nav:hover{background:#3F80CC; border-color:#3F80CC}

/* logo slots (swap the text for your logo <img>) */
.pag-logos{display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:24px 48px}
.pag-logo{display:flex; align-items:center; justify-content:center; min-height:44px}
.pag-logo img{max-height:44px; width:auto}
.pag-logo-text{letter-spacing:.05em; text-transform:uppercase; text-align:center; max-width:150px}
.pag-logos--light .pag-logo-text{color:rgba(255,255,255,.82)}
.pag-logos--light .pag-logo{opacity:.85; transition:opacity .3s}
.pag-logos--light .pag-logo:hover{opacity:1}
/* looping row (script adds .pag-marquee-on and builds the track) */
.pag-marquee-on{display:block; width:min(1080px,100%); margin-left:auto; margin-right:auto; overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
          mask-image:linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent)}
.pag-marquee-track{display:flex; width:max-content; animation:pag-marquee var(--pag-marquee-dur,30s) linear infinite}
.pag-marquee-group{display:flex; align-items:center; flex:none; gap:64px; padding-right:64px}
.pag-marquee-on:hover .pag-marquee-track{animation-play-state:paused}
.pag-marquee-group .pag-logo{transition:translate .35s var(--ease-out), opacity .35s}
.pag-marquee-group .pag-logo:hover{translate:0 -5px}
@keyframes pag-marquee{to{transform:translateX(var(--pag-marquee-shift,-50%))}}
.pag-logos--dark .pag-logo-text{color:#3C4656}

/* 3. HEADER ------------------------------------------------------------ */
.pag-header{position:fixed; top:0; left:0; right:0; z-index:100; color:#fff;
  transition:background-color .4s, box-shadow .4s, backdrop-filter .4s, translate .45s var(--ease-out)}
.pag-header-inner{height:var(--pag-header-h); display:flex; align-items:center; gap:40px; padding:0 34px}
.pag-brand{display:flex; align-items:center; margin-right:auto}
.pag-brand img{height:52px; width:auto}
.pag-menu{display:flex; align-items:center; gap:34px}
.pag-menu > li{position:relative}
.pag-menu > li > a{display:inline-flex; align-items:center; gap:8px; padding:10px 0; position:relative}
.pag-menu > li > a::after{content:""; position:absolute; left:0; right:0; bottom:2px; height:1.5px; background:currentColor; transform:scaleX(0); transform-origin:right; transition:transform .35s var(--ease-out)}
.pag-menu > li > a:hover::after,.pag-menu > li:focus-within > a::after{transform:scaleX(1); transform-origin:left}
.pag-has-sub{display:flex; align-items:center; gap:2px}
.pag-sub-toggle{display:grid; place-items:center; width:28px; height:28px; margin-right:-8px; padding:0; border:0; border-radius:50%;
  background:transparent; color:inherit; cursor:pointer; transition:background-color .2s}
.pag-sub-toggle:hover{background:rgba(255,255,255,.14)}
.pag-caret{width:10px; height:10px; transition:rotate .3s var(--ease-out)}
.pag-has-sub.is-open .pag-caret{rotate:180deg}
.pag-sub{position:absolute; top:100%; left:-18px; min-width:250px; padding:10px; margin-top:10px; border-radius:10px;
  background:rgba(8,26,64,.96); box-shadow:0 18px 40px rgba(0,0,0,.25);
  opacity:0; visibility:hidden; translate:0 8px; transition:opacity .25s, translate .3s var(--ease-out), visibility .25s}
.pag-sub::before{content:""; position:absolute; left:0; right:0; top:-12px; height:12px}
.pag-has-sub.is-open .pag-sub{opacity:1; visibility:visible; translate:0 0}
@media (hover:hover) and (min-width:901px){
  .pag-has-sub:hover:not(.is-suppressed) .pag-sub{opacity:1; visibility:visible; translate:0 0}
  .pag-has-sub:hover:not(.is-suppressed) .pag-caret{rotate:180deg}
}
.pag-sub a{display:block; padding:10px 12px; border-radius:6px; transition:background-color .2s, padding-left .25s var(--ease-out)}
.pag-sub a:hover{background:rgba(255,255,255,.08); padding-left:18px}
.pag-burger{display:none; margin-left:8px; width:44px; height:44px; border:0; background:transparent; color:#fff; cursor:pointer; position:relative}
.pag-burger span{position:absolute; left:11px; right:11px; height:2px; background:currentColor; transition:transform .35s var(--ease-out), opacity .2s}
.pag-burger span:nth-child(1){top:15px}.pag-burger span:nth-child(2){top:21px}.pag-burger span:nth-child(3){top:27px}
.pag-header.is-scrolled{background:rgba(7,24,60,.94); box-shadow:0 10px 30px rgba(0,0,0,.18)}
.pag-header.is-hidden{translate:0 -110%}

/* 4. HERO -------------------------------------------------------------- */
.pag-home-hero{min-height:max(100vh, 680px); min-height:max(100svh, 680px); display:flex; align-items:center; justify-content:center; overflow:hidden;
  color:#fff; text-align:center; background:var(--pag-hero); padding:calc(var(--pag-header-h) + 70px) 0 96px}
/* depth: darker top and edges, warm floor glow, faint grain */
.pag-home-hero::after{content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    radial-gradient(120% 75% at 50% 118%, rgba(90,160,255,.30), transparent 62%),
    radial-gradient(90% 60% at 50% 42%, transparent 40%, rgba(3,17,48,.55) 100%),
    linear-gradient(180deg, rgba(4,18,50,.72) 0%, transparent 26%, transparent 72%, rgba(3,14,40,.55) 100%)}
.pag-hero-copy{display:flex; flex-direction:column; align-items:center; width:100%}
.pag-hero-slides{display:grid; justify-items:center; width:100%}
.pag-hero-slide{grid-area:1 / 1; min-width:0; max-width:100%; display:flex; flex-direction:column; align-items:center}
.pag-hero-slide > *{max-width:100%}
.pag-hero-slide + .pag-hero-slide{display:none}                 /* without the script: first slide only */
.pag-slider-on .pag-hero-slide{display:flex}
.pag-slider-on .pag-hero-slide:not(.is-active):not(.is-leaving){visibility:hidden}
.pag-hero-title{letter-spacing:-.005em}
.pag-hero-sub{margin-top:8px; letter-spacing:-.01em}
/* short accent rule under the slide text */
.pag-hero-rule{width:74px; height:2px; margin:30px auto 0; border-radius:2px;
  background:linear-gradient(90deg, transparent, var(--pag-red) 18%, #FF6A7A 50%, var(--pag-red) 82%, transparent);
  transform:scaleX(0); transform-origin:50% 50%}
.pag-in .pag-hero-rule,.pag-slider-on ~ .pag-hero-buttons .pag-hero-rule{transform:none}
.pag-anim .pag-hero-rule{transition:transform 1.1s var(--ease-draw) 1.1s}
.pag-hero-rule.pag-in{transform:none}
.pag-hero-buttons{display:flex; flex-wrap:wrap; justify-content:center; gap:16px; margin-top:46px; width:100%}
/* logo strip sits apart, with a hairline above it */
.pag-hero-logos-wrap{position:relative; width:100%; margin-top:66px; padding-top:34px}
.pag-hero-logos-wrap::before{content:""; position:absolute; top:0; left:50%; translate:-50% 0; width:min(860px,88%); height:1px;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.45) 30%, rgba(255,255,255,.45) 70%, transparent)}
.pag-home-hero .pag-logos{margin-top:0}

/* slide dots (built by the script): click to jump, with a 3s fill on the active one */
.pag-hero-dots{display:flex; justify-content:center; gap:10px; margin-top:40px}
.pag-hero-dot{position:relative; width:34px; height:3px; padding:0; border:0; border-radius:3px; cursor:pointer;
  background:rgba(255,255,255,.3); overflow:hidden; transition:width .4s var(--ease-out), background-color .3s}
.pag-hero-dot::after{content:""; position:absolute; inset:0; border-radius:inherit; background:#fff; transform:scaleX(0); transform-origin:left}
.pag-hero-dot.is-now{width:56px; background:rgba(255,255,255,.22)}
.pag-hero-dot.is-now::after{animation:pag-dot-fill var(--pag-hero-int,3s) linear forwards}
.pag-hero-dot.is-paused::after{animation-play-state:paused}
.pag-hero-dot:hover{background:rgba(255,255,255,.55)}
@keyframes pag-dot-fill{from{transform:scaleX(0)} to{transform:scaleX(1)}}

/* scroll cue */
.pag-scroll-cue{position:absolute; left:50%; bottom:26px; translate:-50% 0; z-index:3; width:26px; height:42px; border-radius:14px;
  border:1.5px solid rgba(255,255,255,.45); display:grid; justify-items:center; padding-top:8px; transition:border-color .3s}
.pag-scroll-cue:hover{border-color:#fff}
.pag-scroll-cue span{width:3px; height:8px; border-radius:2px; background:#fff; animation:pag-cue 1.9s var(--ease-out) infinite}
@keyframes pag-cue{0%{opacity:0; translate:0 -4px} 35%{opacity:1} 75%{opacity:0; translate:0 14px} 100%{opacity:0; translate:0 14px}}
/* hero art: city + orbits + cursor light */
.pag-city{background:
  radial-gradient(ellipse 60% 55% at 50% 45%, rgba(40,100,210,.35), transparent 70%),
  linear-gradient(180deg, #0A3483 0%, #0E43A2 60%, #1552B8 100%)}
.pag-city svg{position:absolute; inset:-6%; width:112%; height:112%; opacity:.5}
.pag-orbits{opacity:.5}
.pag-orbits .ring{fill:none; stroke:var(--pag-sky); stroke-width:1; opacity:.55}
.pag-orbits .draw{stroke-dasharray:1; stroke-dashoffset:1; animation:pag-draw 2.6s var(--ease-draw) forwards}
.pag-orbits .swoosh{fill:none; stroke:var(--pag-red); stroke-width:3; stroke-linecap:round; stroke-dasharray:0 1; stroke-dashoffset:-.03; animation:pag-swoosh 2.4s .9s var(--ease-draw) forwards}
.pag-spot{background:radial-gradient(520px circle at var(--pag-mx,50%) var(--pag-my,40%), rgba(120,175,255,.22), transparent 60%); opacity:0; transition:opacity .6s}
.pag-home-hero:hover .pag-spot{opacity:1}

/* 5. SERVICE PANELS ---------------------------------------------------- */
/* text block: starts 70.8% across and 21% down, ends ~2% from the right edge (as on the live site) */
.pag-home-panel{min-height:100vh; min-height:100svh; display:flex; align-items:flex-start; justify-content:flex-start; overflow:hidden; color:#fff; background:#050B1F}
/* ---- panel card: the text now sits in a glass card ----
   --nav-gap keeps the card clear of the sticky services nav on the right */
.pag-home-panel{--nav-gap:66px}
.pag-home-panel > .pag-panel-card{position:relative; z-index:3; margin-left:66.5%; margin-right:var(--nav-gap); width:auto;
  margin-top:calc(21vh - 5.4vw); margin-bottom:8vh; display:flex; flex-direction:column}
.pag-panel-kicker{letter-spacing:-.01em}
.pag-panel-title{margin-top:.15em; letter-spacing:-.02em;
  background:linear-gradient(100deg, #fff 34%, var(--accent)); -webkit-background-clip:text; background-clip:text; color:transparent}
.pag-panel-text{margin-top:.7em; color:rgba(255,255,255,.9)}
.pag-learn{align-self:flex-start; margin-top:clamp(18px,1.6vw,28px); display:inline-flex; align-items:center; gap:14px;
  padding:10px 10px 10px 20px; border-radius:999px; border:1px solid rgba(255,255,255,.28); position:relative; isolation:isolate;
  transition:border-color .3s, color .3s, gap .3s var(--ease-out)}
.pag-learn::after{content:""; position:absolute; inset:0; border-radius:inherit; z-index:-1;
  background:linear-gradient(120deg, var(--accent), var(--accent-2)); opacity:0; transition:opacity .35s}
.pag-learn:hover,.pag-learn:focus-visible{border-color:transparent; gap:18px; color:#06142C}
.pag-learn:hover::after,.pag-learn:focus-visible::after{opacity:1}
.pag-learn-ico{display:grid; place-items:center; width:34px; height:34px; border-radius:50%; flex:none;
  background:rgba(255,255,255,.14); transition:background-color .3s}
.pag-learn:hover .pag-learn-ico{background:rgba(6,20,44,.2)}
.pag-learn svg{width:18px; height:10px; transition:translate .35s var(--ease-out)}
.pag-learn:hover svg{translate:3px 0}
  padding:8px 0; position:relative}
.pag-learn::after{content:""; position:absolute; left:0; right:0; bottom:0; height:1px; background:#fff; transform-origin:left}
.pag-learn svg{width:22px; height:12px; transition:translate .35s var(--ease-out)}
.pag-learn::before{content:""; position:absolute; left:-14px; right:-14px; top:-10px; bottom:-6px; border-radius:6px; z-index:-1;
  background:rgba(255,255,255,.1); opacity:0; transform:scaleX(.85); transform-origin:right; transition:opacity .3s, transform .35s var(--ease-out)}
.pag-learn:hover::before,.pag-learn:focus-visible::before{opacity:1; transform:none}
.pag-learn:hover svg{translate:6px 0}
.pag-learn:hover::after{background:var(--pag-red)}
.pag-learn::after{transition:background-color .3s}

/* panel artwork (replace with your photos: add data-bg="image.jpg" to the panel) */
/* Managed Service panel: blue duotone to match the theme */
.pag-home-panel.pag-art-office .pag-office{
  background:linear-gradient(100deg, #0A2146 0%, #194A79 45%, #2166AB 100%)}
.pag-home-panel.pag-art-office .pag-photo{filter:grayscale(1) contrast(1.08) brightness(.95)}
.pag-home-panel.pag-art-office .pag-bg::after{content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(120deg, #0A2146 0%, #194A79 45%, #2E6CB5 100%);
  mix-blend-mode:multiply}
/* ---- card visuals, accent per panel, ghost word ---- */
.pag-accent-a{--accent:#5AC8FA; --accent-2:#2E7DD1}
.pag-accent-b{--accent:#63E6C3; --accent-2:#2F7FE0}
.pag-accent-c{--accent:#4FD1E6; --accent-2:#1E8FB8}
.pag-accent-d{--accent:#FF7A8A; --accent-2:#CF021A}
.pag-panel-card{--skew:0deg; --lift:0px;
  background:linear-gradient(150deg, rgba(11,25,55,.66), rgba(6,14,34,.52));
  -webkit-backdrop-filter:blur(16px) saturate(120%); backdrop-filter:blur(16px) saturate(120%);
  border-radius:22px; border:1px solid rgba(255,255,255,.14);
  box-shadow:0 30px 70px -40px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.14);
  padding:clamp(24px,2vw,38px) clamp(22px,1.8vw,34px) clamp(22px,1.8vw,30px);
  transform:translateY(var(--lift)) skewY(var(--skew));
  transition:border-color .4s}
.pag-panel-card::before{content:""; position:absolute; inset:-1px; border-radius:inherit; padding:1px; pointer-events:none;
  background:linear-gradient(150deg, var(--accent), transparent 42%, transparent 62%, var(--accent-2));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude; opacity:.9}
.pag-panel-card::after{content:""; position:absolute; top:-26%; right:-16%; width:54%; height:72%; border-radius:50%; pointer-events:none; z-index:-1;
  background:radial-gradient(circle, color-mix(in srgb, var(--accent) 50%, transparent), transparent 68%); filter:blur(26px); opacity:.5}
.pag-panel-card:hover{border-color:rgba(255,255,255,.26)}
.pag-card-top{display:flex; align-items:center; gap:14px; margin-bottom:clamp(12px,1.2vw,20px)}
.pag-card-num{font-size:clamp(28px,2.4vw,42px); font-weight:700; line-height:1; letter-spacing:-.02em; color:transparent;
  -webkit-text-stroke:1.5px color-mix(in srgb, var(--accent) 80%, #fff); opacity:.9}
.pag-card-tick{flex:1; height:1px; background:linear-gradient(90deg, color-mix(in srgb, var(--accent) 70%, transparent), transparent);
  transform:scaleX(0); transform-origin:left}
.is-live .pag-card-tick{transform:none; transition:transform 1.1s var(--ease-draw) .3s}
.pag-card-bar{position:absolute; left:7px; top:16%; bottom:16%; width:3px; border-radius:3px; background:rgba(255,255,255,.16); overflow:hidden}
.pag-card-bar i{position:absolute; inset:0; border-radius:inherit; background:linear-gradient(180deg, var(--accent), var(--accent-2));
  transform:scaleY(var(--p,0)); transform-origin:top}
/* giant ghost word drifting across the panel (built by the script) */
.pag-ghost{position:absolute; left:0; right:0; top:36%; z-index:1; overflow:hidden; pointer-events:none;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
          mask-image:linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent)}
.pag-ghost-track{display:flex; width:max-content; will-change:transform}
.pag-ghost span{flex:none; padding-right:.22em; font-size:clamp(90px,14vw,240px); font-weight:700; line-height:.92; letter-spacing:-.03em;
  color:transparent; -webkit-text-stroke:1.5px rgba(255,255,255,.14); text-transform:uppercase; white-space:nowrap}
.pag-ghost span:nth-child(even){-webkit-text-stroke-color:color-mix(in srgb, var(--accent) 30%, transparent)}

/* scrim: a soft pool of shade behind the text column keeps it readable over any photo */
.pag-panel-shade{background:
  linear-gradient(90deg, transparent 52%, rgba(3,10,26,.34) 100%),
  linear-gradient(180deg, rgba(3,10,26,.42) 0%, transparent 28%)}
/* light backgrounds need a deeper pool so white text still reads */
.pag-home-panel.pag-art-office .pag-panel-shade,
.pag-home-panel.pag-is-light .pag-panel-shade{background:
  linear-gradient(90deg, transparent 44%, rgba(3,10,26,.5) 100%),
  linear-gradient(180deg, rgba(3,10,26,.46) 0%, transparent 30%)}


/* =====================================================================
   STICKY SERVICES NAV (built by the script) · final
   ===================================================================== */
.pag-panel-dots{--dot-accent:#5AC8FA; position:fixed; right:max(18px, env(safe-area-inset-right)); top:50%; z-index:60;
  translate:12px -50%; opacity:0; pointer-events:none; transition:opacity .4s, translate .5s var(--ease-out)}
.pag-panel-dots.is-on{opacity:1; translate:0 -50%; pointer-events:auto}
.pag-panel-dots ul{display:flex; flex-direction:column; align-items:center; gap:4px; margin:0; padding:8px 4px; list-style:none;
  border-radius:999px; background:rgba(6,14,34,.42); border:1px solid rgba(255,255,255,.12);
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); box-shadow:0 12px 30px -14px rgba(0,0,0,.7)}
.pag-panel-dots li{margin:0; padding:0; list-style:none}

/* override the theme's global button style (the red blocks) */
.pag-panel-dots .pag-dot,
.pag-panel-dots .pag-dot:hover,
.pag-panel-dots .pag-dot:focus,
.pag-panel-dots .pag-dot:active{
  background:transparent !important; border:0 !important; border-radius:999px !important; box-shadow:none !important;
  padding:0 !important; margin:0 !important; min-width:0 !important; min-height:0 !important;
  color:#fff !important; text-transform:none !important; text-decoration:none !important; outline:none}
.pag-panel-dots .pag-dot{position:relative; display:grid; place-items:center; width:24px; height:24px;
  cursor:pointer; -webkit-tap-highlight-color:transparent; transition:height .45s var(--ease-out)}
.pag-panel-dots .pag-dot::before{content:""; position:absolute; inset:-4px -10px}   /* bigger tap area, invisible */

/* the dot */
.pag-panel-dots .pag-dot-mark{display:block; width:6px; height:6px; border-radius:999px; background:rgba(255,255,255,.4);
  box-shadow:none; transform:none; transition:height .45s var(--ease-out), background-color .3s, box-shadow .3s}
.pag-panel-dots .pag-dot-mark::after{content:none !important}
.pag-panel-dots .pag-dot:hover .pag-dot-mark,
.pag-panel-dots .pag-dot:focus-visible .pag-dot-mark{background:#fff}
.pag-panel-dots .pag-dot.is-now{height:36px}
.pag-panel-dots .pag-dot.is-now .pag-dot-mark{height:22px; background:var(--dot-accent);
  box-shadow:0 0 12px color-mix(in srgb, var(--dot-accent) 70%, transparent)}

/* label pill on hover / keyboard focus */
.pag-panel-dots .pag-dot-label{position:absolute; right:calc(100% + 14px); top:50%; translate:6px -50%; order:0;
  max-width:none; overflow:visible; white-space:nowrap; padding:7px 12px; border-radius:999px;
  font-size:12px; font-weight:600; line-height:1; letter-spacing:.02em; color:#fff; text-shadow:none;
  background:rgba(6,14,34,.9); border:1px solid rgba(255,255,255,.14); box-shadow:0 10px 24px -12px rgba(0,0,0,.8);
  opacity:0; pointer-events:none; transition:opacity .25s, translate .3s var(--ease-out)}
.pag-panel-dots .pag-dot:hover .pag-dot-label,
.pag-panel-dots .pag-dot:focus-visible .pag-dot-label{opacity:1; translate:0 -50%}
.pag-panel-dots .pag-dot:focus-visible{outline:2px solid #fff !important; outline-offset:2px}

@media (max-width:900px){
  .pag-panel-dots{right:max(6px, env(safe-area-inset-right))}
  .pag-panel-dots ul{padding:6px 2px}
}
@media (hover:none), (max-width:900px){ .pag-panel-dots .pag-dot-label{display:none} }
@media (prefers-reduced-motion:reduce){ .pag-panel-dots, .pag-panel-dots *{transition:none !important} }


/* 6. GLOBAL REACH ------------------------------------------------------ */
.pag-home-reach{background:var(--pag-reach); color:#fff; text-align:center; padding:64px 0 70px; overflow:hidden}
.pag-reach-title,.pag-partners-title{letter-spacing:-.01em}
.pag-reach-text,.pag-partners-text{max-width:560px; margin:18px auto 0}
.pag-map{position:relative; width:min(900px,100%); margin:34px auto 0; aspect-ratio:1440 / 554}
.pag-map canvas,.pag-map svg{position:absolute; inset:0; width:100%; height:100%}
.pag-map .arc{fill:none; stroke:rgba(255,255,255,.55); stroke-width:1.6; stroke-dasharray:1; stroke-dashoffset:1}
.pag-pin{position:absolute; width:0; height:0}
.pag-pin i{position:absolute; left:-6px; top:-6px; width:12px; height:12px; border-radius:50%; background:var(--pag-red); box-shadow:0 0 0 2px rgba(255,255,255,.2)}
.pag-pin i::after{content:""; position:absolute; inset:-2px; border-radius:50%; border:2px solid var(--pag-red); opacity:0}
.pag-pin b{position:absolute; left:10px; top:-8px; font-size:12px; font-weight:600; line-height:1; color:#fff; white-space:nowrap}
/* headquarters pin: larger, with a steady halo */
.pag-pin.is-hub i{left:-8px; top:-8px; width:16px; height:16px; box-shadow:0 0 0 4px rgba(207,2,26,.25), 0 0 0 9px rgba(255,255,255,.12)}
.pag-pin.is-hub b{left:14px; top:-9px; font-size:13px}

/* 7. PARTNERS ---------------------------------------------------------- */
.pag-home-partners{background:#fff; text-align:center; padding:84px 0 96px; color:var(--pag-ink)}
.pag-partners-text{color:var(--pag-ink)}
.pag-home-partners .pag-logos{margin-top:30px; justify-content:space-between; gap:26px 40px}

/* 8. FOOTER ------------------------------------------------------------ */
.pag-home-footer{position:relative; overflow:hidden; color:#fff; padding:86px 0 56px; background:#140A14}
.pag-footer-glow{background:
  radial-gradient(ellipse 55% 70% at 8% 100%, rgba(150,18,32,.85), transparent 70%),
  radial-gradient(ellipse 50% 60% at 55% 20%, rgba(70,30,100,.75), transparent 70%),
  linear-gradient(90deg, #4A0E1C 0%, #2A1030 55%, #140A14 100%);
  inset:-15% !important; width:auto !important; height:auto !important;
  animation:pag-glow 18s ease-in-out infinite alternate}
.pag-footer-top{display:grid; grid-template-columns:1.3fr 1fr 1fr; gap:40px; align-items:start}
.pag-footer-logo img{height:64px; width:auto}
.pag-footer-title{margin-bottom:22px}
.pag-footer-links{display:grid; gap:16px; padding-left:18px}
.pag-footer-links a{opacity:.9; position:relative; transition:opacity .2s, padding-left .3s var(--ease-out)}
.pag-footer-links a:hover{opacity:1; padding-left:8px}
.pag-footer-rule{height:1px; background:rgba(255,255,255,.3); margin:56px 0 40px; transform-origin:left}
.pag-footer-bottom{display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:24px}
.pag-copy{}
.pag-socials{display:flex; gap:10px}
.pag-social{width:44px; height:44px; border-radius:50%; background:#000; display:grid; place-items:center; font-size:13px; font-weight:700; line-height:1;
  transition:transform .4s var(--ease-pop), background-color .25s}
.pag-social:hover{transform:translateY(-4px) rotate(-8deg); background:var(--pag-red)}
.pag-legal{justify-self:end; display:flex; align-items:center; gap:10px}
.pag-legal span{width:1px; height:16px; background:rgba(255,255,255,.6)}

/* 9. MOTION ------------------------------------------------------------ */
@keyframes pag-draw{to{stroke-dashoffset:0}}
@keyframes pag-swoosh{to{stroke-dasharray:.3 1}}
@keyframes pag-float{0%{translate:0 0} 100%{translate:3% -4%}}
@keyframes pag-glow{0%{transform:translate(-4%,2%)} 100%{transform:translate(4%,-3%)}}
@keyframes pag-up{from{opacity:0; transform:translateY(34px)} to{opacity:1; transform:none}}
@keyframes pag-pop{0%{opacity:0; transform:scale(.45)} 65%{opacity:1; transform:scale(1.08)} 100%{opacity:1; transform:none}}
@keyframes pag-rise{from{opacity:0; transform:translateY(50px) rotate(-6deg) scale(.88)} to{opacity:1; transform:none}}
@keyframes pag-deal{from{opacity:0; transform:perspective(800px) translate(-30px,40px) rotateY(-75deg)} to{opacity:1; transform:none}}
@keyframes pag-wipe{from{clip-path:inset(0 100% 0 0)} to{clip-path:inset(0 0 0 0)}}
@keyframes pag-slide-in{from{opacity:0; transform:translateX(60px) skewX(-8deg)} to{opacity:1; transform:none}}
@keyframes pag-spin-pop{0%{opacity:0; transform:scale(0) rotate(-200deg)} 70%{opacity:1; transform:scale(1.15) rotate(12deg)} 100%{opacity:1; transform:none}}
@keyframes pag-drop{0%{opacity:0; transform:translateY(-60px)} 60%{opacity:1; transform:translateY(4px)} 100%{opacity:1; transform:none}}
@keyframes pag-ping{0%{transform:scale(1); opacity:.9} 100%{transform:scale(3); opacity:0}}
@keyframes pag-float-logo{0%,100%{translate:0 0} 50%{translate:0 -6px}}

.pag-progress{position:fixed; left:0; top:0; width:100%; height:3px; z-index:200; pointer-events:none;
  background:linear-gradient(90deg, var(--pag-red), #E4495A 60%, #6FA3DA); transform:scaleX(0); transform-origin:0 50%}

/* words rise out of a mask (pag-split) */
.pag-split .pag-w{display:inline-block; overflow:hidden; vertical-align:top; padding-bottom:.14em; margin-bottom:-.14em}
.pag-split .pag-wi{display:inline-block; transform:translateY(115%) rotate(7deg); transform-origin:0 100%;
  transition:transform 1s var(--ease-words) calc(var(--pag-d,0s) + var(--pag-wn,0) * 70ms)}
.pag-split.pag-in .pag-wi{transform:none}
.pag-split--blur .pag-wi{filter:blur(12px); transition:transform 1.1s var(--ease-words) calc(var(--pag-d,0s) + var(--pag-wn,0) * 80ms), filter 1.1s calc(var(--pag-d,0s) + var(--pag-wn,0) * 80ms)}
.pag-split--blur.pag-in .pag-wi{filter:none}

/* ---- text effects (hero slides + service panels) --------------------------
   pag-fx-flip ...... letters flip in on a 3D hinge with a blue glow, then a light sweep
   pag-fx-scramble .. text decodes from random glyphs, left to right
   The script adds .is-in to play and .is-out to leave; letters keep their
   own width, so the text never shifts position. */
.pag-fx-flip,.pag-fx-scramble{position:relative}
.pag-fx-flip{perspective:900px}
.pag-cw{display:inline-block; white-space:nowrap}
.pag-ch{display:inline-block}
.pag-fx-flip .pag-ch{transform-origin:50% 100%; backface-visibility:hidden}
.pag-anim .pag-fx-flip:not(.is-in):not(.is-out) .pag-ch,
.pag-anim .pag-fx-scramble:not(.is-in):not(.is-out) .pag-ch{opacity:0}
.pag-anim .pag-fx-flip:not(.pag-fx-ready),.pag-anim .pag-fx-scramble:not(.pag-fx-ready){opacity:0}
.pag-fx-flip.is-in .pag-ch{animation:pag-flip-in .85s cubic-bezier(.34,1.56,.64,1) calc(var(--pag-d,0s) + var(--pag-ci,0) * 30ms) both}
.pag-fx-flip.is-out .pag-ch{transform-origin:50% 0; animation:pag-flip-out .5s cubic-bezier(.55,0,.75,.2) calc(var(--pag-ci,0) * 14ms) both}
.pag-fx-scramble .pag-ch.is-wait{opacity:0}
.pag-fx-scramble .pag-ch.is-noise{color:var(--pag-sky); opacity:.85; text-shadow:0 0 14px rgba(142,182,227,.85); text-align:center; transform:scale(.88)}
.pag-fx-scramble .pag-ch.is-landed{animation:pag-land .5s var(--ease-out) both}
.pag-fx-scramble.is-out .pag-ch{animation:pag-char-out .42s cubic-bezier(.55,0,.75,.2) calc(var(--pag-ci,0) * 10ms) both}
/* light sweep across a flipped line once its letters land */
.pag-fx-flip::after{content:""; position:absolute; inset:-12% -4%; pointer-events:none; opacity:0;
  background:linear-gradient(100deg, transparent 40%, rgba(255,255,255,.5) 50%, transparent 60%) 130% 0 / 260% 100% no-repeat;
  -webkit-mask-image:linear-gradient(180deg, transparent 0%, #000 30%, #000 70%, transparent 100%);
          mask-image:linear-gradient(180deg, transparent 0%, #000 30%, #000 70%, transparent 100%);
  mix-blend-mode:overlay}
.pag-fx-flip.is-in::after{animation:pag-sweep-text 1.1s var(--pag-sweep,1s) ease-out both}
@keyframes pag-flip-in{
  0%{opacity:0; transform:translateY(.5em) rotateX(-100deg) scale(.9); filter:blur(6px); text-shadow:0 0 26px rgba(142,182,227,.95)}
  55%{opacity:1; filter:blur(0)}
  100%{opacity:1; transform:none; filter:none; text-shadow:0 0 0 rgba(142,182,227,0)}}
@keyframes pag-flip-out{to{opacity:0; transform:translateY(-.45em) rotateX(100deg) scale(.95); filter:blur(5px)}}
@keyframes pag-char-out{to{opacity:0; transform:translateY(-.35em); filter:blur(3px)}}
@keyframes pag-land{0%{text-shadow:0 0 16px rgba(255,255,255,.9)} 100%{text-shadow:0 0 0 rgba(255,255,255,0)}}
@keyframes pag-sweep-text{0%{opacity:1; background-position:130% 0} 100%{opacity:1; background-position:-30% 0}}

/* one-shot entrances: hidden only while the script runs (.pag-anim) */
.pag-anim :is(.pag-up,.pag-pop,.pag-rise,.pag-deal,.pag-slide,.pag-spin){opacity:0}
.pag-anim .pag-up.pag-in{animation:pag-up .9s var(--pag-d,0s) var(--ease-out) both}
.pag-anim .pag-pop.pag-in{animation:pag-pop .8s var(--pag-d,0s) var(--ease-pop) both}
.pag-anim .pag-rise.pag-in{animation:pag-rise .95s var(--pag-d,0s) var(--ease-pop) both}
.pag-anim .pag-deal.pag-in{animation:pag-deal 1s var(--pag-d,0s) var(--ease-out) both; transform-origin:0 50%}
.pag-anim .pag-slide.pag-in{animation:pag-slide-in 1s var(--pag-d,0s) var(--ease-out) both}
.pag-anim .pag-spin.pag-in{animation:pag-spin-pop .9s var(--pag-d,0s) var(--ease-pop) both}
.pag-anim .pag-wipe{clip-path:inset(0 100% 0 0)}
.pag-anim .pag-wipe.pag-in{animation:pag-wipe 1.1s var(--pag-d,0s) var(--ease-wipe) both}
/* Learn More: line draws, arrow slides in after it */
.pag-anim .pag-learn::after{transform:scaleX(0)}
.pag-anim .pag-learn.pag-in::after{transform:scaleX(1); transition:transform 1s calc(var(--pag-d,0s) + .15s) var(--ease-draw)}
.pag-anim .pag-learn span,.pag-anim .pag-learn svg{opacity:0}
.pag-anim .pag-learn.pag-in span{animation:pag-up .7s var(--pag-d,0s) var(--ease-out) both}
.pag-anim .pag-learn.pag-in svg{animation:pag-slide-in .7s calc(var(--pag-d,0s) + .8s) var(--ease-out) both}
/* footer rule draws */
.pag-anim .pag-footer-rule{transform:scaleX(0)}
.pag-anim .pag-footer-rule.pag-in{transform:none; transition:transform 1.4s var(--ease-draw)}
/* logos: gentle float after arriving (hero) */
.pag-logo{transition:translate .35s var(--ease-out), filter .35s}
.pag-home-partners .pag-logo:hover{translate:0 -6px}
/* map: pins drop, rings pulse, arcs draw */
.pag-anim .pag-pin{opacity:0}
.pag-anim .pag-map.pag-in .pag-pin{animation:pag-drop .8s calc(1.1s + var(--pag-pi) * .14s) var(--ease-pop) both}
.pag-map.pag-in .pag-pin i::after{animation:pag-ping 2.4s calc(2s + var(--pag-pi) * .3s) ease-out infinite}
.pag-anim .pag-pin b{opacity:0; transition:opacity .5s calc(1.5s + var(--pag-pi) * .14s)}
.pag-anim .pag-map.pag-in .pag-pin b{opacity:1}
.pag-map.pag-in .arc{animation:pag-draw 1.6s calc(1.8s + var(--pag-ai) * .2s) var(--ease-draw) forwards}
.pag-map .spark{opacity:0; transition:opacity .4s}
.pag-map .spark.is-on{opacity:1}
/* panels stacking into a deck (script adds .pag-stack) */
.pag-stack{position:sticky; top:var(--pag-top,0px); transform-origin:50% 0; will-change:transform}
.pag-measuring .pag-stack{position:static}   /* used for a moment while measuring panel positions */
.pag-stack.pag-covered{border-radius:calc(var(--pag-t,0) * 28px)}
.pag-stack.pag-first.pag-covered{box-shadow:0 0 0 100vmax var(--pag-deck)}
.pag-dim{position:absolute; inset:0; z-index:5; pointer-events:none; background:#020817; opacity:calc(var(--pag-t,0) * .6)}
.pag-stack.pag-buried > *{visibility:hidden}   /* fully hidden in the deck: skip painting it */
.pag-bg-zoom{will-change:transform}
.pag-parallax{will-change:translate, opacity}

/* 10. RESPONSIVE ------------------------------------------------------- */
@media (max-width:1199px){
  .pag-home-panel > .pag-panel-card{margin-left:50%}
}
@media (max-width:1100px){
  .pag-menu{gap:24px}
}
@media (max-width:900px){
  :root{--pag-gutter:24px; --pag-header-h:72px}
  .pag-burger{display:block}
  .pag-header .pag-btn--nav{display:none}
  .pag-nav{position:fixed; inset:0 0 0 auto; width:min(340px, 86vw); background:#071A44; padding:96px 28px 28px;
    translate:100% 0; transition:translate .5s var(--ease-out); box-shadow:-20px 0 60px rgba(0,0,0,.3)}
  .pag-nav.is-open{translate:0 0}
  .pag-menu{flex-direction:column; align-items:stretch; gap:6px}
  .pag-menu > li > a{padding:14px 0}
  .pag-has-sub{flex-wrap:wrap; justify-content:space-between}
  .pag-sub-toggle{width:44px; height:44px; margin-right:-10px}
  .pag-caret{width:13px; height:13px}
  /* mobile submenus fold open when the arrow is tapped */
  .pag-sub{position:static; flex-basis:100%; opacity:1; visibility:visible; translate:none; background:transparent; box-shadow:none;
    padding:0 0 0 12px; margin:0; max-height:0; overflow:hidden; transition:max-height .45s var(--ease-out), padding .3s}
  .pag-sub::before{display:none}
  .pag-has-sub.is-open .pag-sub{max-height:320px; padding-bottom:8px}
  .pag-nav .pag-btn--nav-mobile{display:inline-flex; margin-top:22px}
  .pag-header.menu-open .pag-burger span:nth-child(1){transform:translateY(6px) rotate(45deg)}
  .pag-header.menu-open .pag-burger span:nth-child(2){opacity:0}
  .pag-header.menu-open .pag-burger span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
  .pag-burger{z-index:2}
  /* phones/tablets: the card sits in the upper part, inside the gutters */
  .pag-home-panel{--nav-gap:54px}
  .pag-home-panel > .pag-panel-card{width:auto; max-width:560px;
    margin:calc(var(--pag-header-h) + 6vh) var(--nav-gap) 8vh var(--pag-gutter)}
  .pag-ghost{top:auto; bottom:8%}

  .pag-panel-shade{background:linear-gradient(180deg, rgba(0,0,0,.42) 0%, rgba(0,0,0,.18) 55%, transparent 100%)}
  .pag-footer-top{grid-template-columns:1fr 1fr}
  .pag-footer-logo{grid-column:1 / -1}
  .pag-footer-bottom{grid-template-columns:1fr; justify-items:center; text-align:center}
  .pag-legal{justify-self:center}
  /* phones: bigger targets, no hover labels, clear of the card */
  .pag-panel-dots{right:max(2px, env(safe-area-inset-right))}
  .pag-dot{padding:16px 14px; min-width:44px; min-height:44px; justify-content:center}
  .pag-dot-mark{width:10px; height:10px}
  .pag-dot-label{display:none}
}
.pag-btn--nav-mobile{display:none}
@media (max-width:360px){
  .pag-hero-buttons{flex-direction:column; align-items:center; width:100%}
  .pag-home-hero .pag-btn{width:min(260px,100%)}
}
@media (max-width:600px){
  /* keep the headline inside the screen on phones */

  .pag-hero-copy{padding-inline:4px}
  .pag-hero-buttons{gap:12px}
  .pag-home-hero .pag-btn{padding:15px 20px}
  .pag-hero-rule{margin-top:22px}
  .pag-hero-buttons{margin-top:34px}
  .pag-hero-logos-wrap{margin-top:46px; padding-top:26px}
  .pag-home-hero .pag-btn{padding:15px 24px}
  .pag-scroll-cue{display:none}
  .pag-home-partners .pag-logos{justify-content:center}
  .pag-pin b{font-size:10px}
  .pag-footer-top{grid-template-columns:1fr}
}

/* 11. REDUCED MOTION --------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .pag-orbits .draw{animation:none; stroke-dashoffset:0}
  .pag-orbits .swoosh{animation:none; stroke-dasharray:.3 1}
  .pag-orbits .mover{display:none}
  .pag-glass canvas,.pag-office canvas,.pag-footer-glow{animation:none}
  .pag-map .arc{stroke-dashoffset:0}
  .pag-progress{display:none}
  .pag-marquee-track,.pag-scroll-cue span{animation:none}
  .pag-hero-rule{transform:none}
  .pag-card-tick{transform:none}
  .pag-panel-card{transform:none}
  .pag-dot.is-now .pag-dot-mark::after{animation:none; opacity:0}
}


/* =====================================================================
   ELEMENTOR BRIDGE
   Elementor puts your CSS class on the widget wrapper and renders the real
   element inside it, so these rules point the design at the inner element.
   ===================================================================== */
/* containers: clear Elementor's default padding and gaps, we set our own */
.e-con[class*="pag-"]{--padding-top:0px; --padding-right:0px; --padding-bottom:0px; --padding-left:0px; --row-gap:0px; --column-gap:0px}
.e-con.pag-wrap{width:100%; max-width:var(--pag-wrap); margin-inline:auto; padding-inline:var(--pag-gutter)}
/* widgets keep our own widths; Elementor's own bottom margins are cleared */
.elementor .pag-section .elementor-widget,
.elementor .pag-home-footer .elementor-widget{margin-bottom:0}
.elementor .pag-footer-col .elementor-widget.pag-footer-title{margin-bottom:22px}
:where(.pag-section) .elementor-widget-text-editor p{margin:0}
:where(.pag-section) .elementor-widget-text-editor p,
:where(.pag-section) .elementor-heading-title{text-wrap:wrap}
/* our own widths on widgets (Elementor caps widgets at 100% by default) */
.e-con.pag-wrap > .elementor-widget.pag-reach-text,
.e-con.pag-wrap > .elementor-widget.pag-partners-text{max-width:560px; margin-inline:auto; width:100%}
.e-con > .elementor-widget.pag-panel-text{max-width:none}
/* headings and text: the design colours live on the inner element */
.pag-hero-title .elementor-heading-title,
.pag-hero-sub .elementor-heading-title,
.pag-panel-kicker .elementor-heading-title,
.pag-reach-title .elementor-heading-title,
.pag-partners-title .elementor-heading-title,
.pag-footer-title .elementor-heading-title{color:inherit; margin:0}
.pag-panel-title .elementor-heading-title{margin:0;
  background:linear-gradient(100deg, #fff 34%, var(--accent)); -webkit-background-clip:text; background-clip:text; color:transparent}
/* buttons: the widget wrapper becomes a plain flex box (the look belongs to the link inside),
   so its height is exactly the button's height */
.elementor .pag-btn,.elementor .pag-learn{display:flex; line-height:0; width:auto;
  padding:0; border:0; border-radius:0; background:none; box-shadow:none; color:inherit}
.elementor .pag-btn{justify-content:center}
.elementor .pag-btn--nav-mobile{display:none}          /* only inside the open mobile menu */
.elementor .pag-learn{justify-content:flex-start}
.pag-btn .elementor-widget-container,.pag-learn .elementor-widget-container,
.elementor .pag-btn .elementor-button-wrapper, .elementor .pag-learn .elementor-button-wrapper{display:flex; line-height:0; width:100%}
.elementor .pag-btn .elementor-button-wrapper{justify-content:center}
.elementor .pag-learn .elementor-button-wrapper{justify-content:flex-start}
.elementor .pag-btn .elementor-button, .elementor .pag-learn .elementor-button{display:inline-flex; align-items:center; justify-content:center; gap:10px; text-decoration:none}
.elementor .pag-btn .elementor-button{padding:15px 26px; border-radius:3px; color:#fff; border:1px solid rgba(255,255,255,.9);
  transition:background-color .25s, color .25s, border-color .25s, translate .35s var(--ease-out)}
.elementor .pag-btn--outline .elementor-button{background:transparent}
.elementor .pag-btn--outline .elementor-button:hover{background:#fff; color:var(--pag-hero)}
.elementor .pag-btn--blue .elementor-button{background:linear-gradient(180deg, #3C80CB, #2465AC); border-color:rgba(255,255,255,.55); box-shadow:0 10px 26px -12px rgba(0,0,0,.65)}
.elementor .pag-btn--blue .elementor-button:hover{background:linear-gradient(180deg, #4A8FD8, #2E72BC); border-color:rgba(255,255,255,.8)}
.elementor .pag-btn--nav .elementor-button{background:var(--pag-blue); border-color:var(--pag-blue); border-radius:4px; padding:15px 24px}
.elementor .pag-btn--nav .elementor-button:hover{background:#3F80CC; border-color:#3F80CC}
.elementor .pag-home-hero .pag-btn .elementor-button{padding:17px 32px; letter-spacing:.01em}
/* Learn More pill: Elementor's button icon becomes the circled arrow */
.elementor .pag-learn .elementor-button{align-self:flex-start; gap:14px; padding:10px 10px 10px 20px; border-radius:999px;
  border:1px solid rgba(255,255,255,.28); position:relative; isolation:isolate; color:#fff; background:transparent;
  transition:border-color .3s, color .3s, gap .3s var(--ease-out)}
.elementor .pag-learn .elementor-button::after{content:""; position:absolute; inset:0; border-radius:inherit; z-index:-1;
  background:linear-gradient(120deg, var(--accent), var(--accent-2)); opacity:0; transition:opacity .35s}
.elementor .pag-learn .elementor-button:hover, .elementor .pag-learn .elementor-button:focus-visible{border-color:transparent; gap:18px; color:#06142C}
.elementor .pag-learn .elementor-button:hover::after, .elementor .pag-learn .elementor-button:focus-visible::after{opacity:1}
.elementor .pag-learn .elementor-button-icon{display:grid; place-items:center; width:34px; height:34px; border-radius:50%; flex:none;
  background:rgba(255,255,255,.14); transition:background-color .3s, translate .35s var(--ease-out)}
.elementor .pag-learn .elementor-button:hover .elementor-button-icon{background:rgba(6,20,44,.2); translate:3px 0}
.elementor .pag-learn .elementor-button-icon svg, .elementor .pag-learn .elementor-button-icon i{width:15px; height:15px; font-size:15px}
/* social icons widget in the footer */
.pag-socials .elementor-social-icon{width:44px; height:44px; border-radius:50%; background:#000;
  transition:transform .4s var(--ease-pop), background-color .25s}
.pag-socials .elementor-social-icon:hover{transform:translateY(-4px) rotate(-8deg); background:var(--pag-red)}
.pag-socials .elementor-grid{gap:10px}
/* the assets container is hidden on the live page, shown as a label in the editor */
.e-con.pag-assets{display:none}
.elementor-editor-active .e-con.pag-assets{display:flex; --padding-top:10px; --padding-bottom:10px; --padding-left:16px; --padding-right:16px;
  background:#F5F7FA; border:1px dashed #9AA8BA; min-height:0}
.elementor-editor-active .e-con.pag-assets::after{content:"PakAmGlobal homepage styles + scripts (hidden on the live page)";
  font:500 12px/1.4 system-ui, sans-serif; color:#4E5D73}
/* the editor shows everything still and visible */
.elementor-editor-active .pag-hero-slide + .pag-hero-slide{display:flex; opacity:.45}


/* ---- Elementor markup for the header menu, footer and map ---- */
.e-con.pag-header-inner{height:var(--pag-header-h); display:flex; flex-direction:row; align-items:center; gap:40px; padding-inline:34px}
.e-con.pag-brand{margin-right:auto; flex-direction:row; align-items:center; width:auto}
.pag-brand-img img{height:52px; width:auto}
.e-con.pag-nav{flex-direction:row; align-items:center; width:auto}
.e-con.pag-menu{flex-direction:row; align-items:center; gap:34px; width:auto}
.e-con.pag-menu-item{position:relative; flex-direction:row; align-items:center; gap:2px; width:auto}
.elementor .pag-menu-link a,.elementor .pag-sub-link a,
.elementor .pag-footer-links a,.elementor .pag-legal a{color:inherit; text-decoration:none}
.pag-menu-link a{display:inline-flex; align-items:center; padding:10px 0; position:relative}
.pag-menu-link a::after{content:""; position:absolute; left:0; right:0; bottom:2px; height:1.5px; background:currentColor;
  transform:scaleX(0); transform-origin:right; transition:transform .35s var(--ease-out)}
.pag-menu-link a:hover::after{transform:scaleX(1); transform-origin:left}
.e-con.pag-sub{position:absolute; top:100%; left:-18px; min-width:250px; padding:10px; margin-top:10px; border-radius:10px;
  background:rgba(8,26,64,.96); box-shadow:0 18px 40px rgba(0,0,0,.25); width:auto;
  opacity:0; visibility:hidden; translate:0 8px; transition:opacity .25s, translate .3s var(--ease-out), visibility .25s}
.e-con.pag-sub::before{content:""; position:absolute; left:0; right:0; top:-12px; height:12px}
.pag-sub-link a{display:block; padding:10px 12px; border-radius:6px; color:#fff; text-decoration:none;
  transition:background-color .2s, padding-left .25s var(--ease-out)}
.pag-sub-link a:hover{background:rgba(255,255,255,.08); padding-left:18px}
.pag-has-sub.is-open .e-con.pag-sub{opacity:1; visibility:visible; translate:0 0}
@media (hover:hover) and (min-width:901px){
  .pag-has-sub:hover:not(.is-suppressed) .e-con.pag-sub{opacity:1; visibility:visible; translate:0 0}
  .pag-has-sub:hover:not(.is-suppressed) .pag-caret{rotate:180deg}
}
.e-con.pag-hero-copy{align-items:center}
.e-con.pag-hero-slides{display:grid; justify-items:center}
.e-con.pag-hero-slide{grid-area:1 / 1; align-items:center; min-width:0; max-width:100%}
.e-con.pag-hero-buttons{flex-direction:row; flex-wrap:wrap; justify-content:center; gap:16px}
.e-con.pag-logos{flex-direction:row; flex-wrap:wrap; align-items:center; justify-content:center}
.e-con.pag-logo{width:auto; align-items:center}
.e-con.pag-panel-card{align-items:flex-start}
.e-con.pag-map{display:block}
.e-con.pag-footer-top{display:grid; grid-template-columns:1.3fr 1fr 1fr; gap:40px; align-items:start}
.e-con.pag-footer-col{width:auto}
.pag-footer-logo img{height:64px; width:auto}
.e-con.pag-footer-rule{height:1px; min-height:1px; background:rgba(255,255,255,.3); margin:56px 0 40px; transform-origin:left}
.e-con.pag-footer-bottom{display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:24px}
.pag-legal a{color:inherit; text-decoration:none}
.pag-footer-links a{color:inherit; text-decoration:none}
@media (max-width:900px){
  .e-con.pag-nav{position:fixed; inset:0 0 0 auto; width:min(340px,86vw); background:#071A44; padding:96px 28px 28px;
    translate:100% 0; transition:translate .5s var(--ease-out); box-shadow:-20px 0 60px rgba(0,0,0,.3); flex-direction:column; align-items:stretch; z-index:2}
  .e-con.pag-nav.is-open{translate:0 0}
  .e-con.pag-menu{flex-direction:column; align-items:stretch; gap:6px; width:100%}
  .e-con.pag-menu-item{flex-wrap:wrap; justify-content:space-between; width:100%}
  .e-con.pag-sub{position:static; flex-basis:100%; width:100%; opacity:1; visibility:visible; translate:none; background:transparent;
    box-shadow:none; padding:0 0 0 12px; margin:0; max-height:0; overflow:hidden; transition:max-height .45s var(--ease-out), padding .3s}
  .pag-has-sub.is-open .e-con.pag-sub{max-height:320px; padding-bottom:8px}
  .elementor .pag-nav .pag-btn--nav-mobile{display:flex; margin-top:22px}
  .elementor .pag-header-inner > .pag-btn{display:none}   /* the header button moves into the menu */
  .e-con.pag-footer-top{grid-template-columns:1fr 1fr}
  .e-con.pag-footer-bottom{grid-template-columns:1fr; justify-items:center; text-align:center}
}
@media (max-width:600px){
  .e-con.pag-footer-top{grid-template-columns:1fr}
}

/* =====================================================================
   12. OPTIONAL TYPOGRAPHY — the original design's fonts.
   Set these in Elementor instead, or remove the comment markers to apply.
   ---------------------------------------------------------------------
.pag-btn .elementor-button{font-size:14.5px; font-weight:600; line-height:1}
.pag-logo-text{font-size:14px; font-weight:600; line-height:1.1}
.pag-menu a{font-size:14.5px; font-weight:500; line-height:1}
.pag-hero-title .elementor-heading-title{font:400 clamp(40px,3.8vw,74px)/1.08 'Gilda Display',Georgia,serif}
.pag-hero-sub .elementor-heading-title{font-size:clamp(20px,2vw,38px); line-height:1.25}
.pag-panel-kicker .elementor-heading-title{font:400 clamp(34px,2.7vw,58px)/1.05 'Gilda Display',Georgia,serif}
.pag-panel-title .elementor-heading-title{font-size:clamp(23px,2.1vw,44px); font-weight:600; line-height:1.12}
.pag-learn .elementor-button{font-size:clamp(14px,.85vw,16px); font-weight:600; line-height:1}
.pag-reach-title .elementor-heading-title,
.pag-partners-title .elementor-heading-title{font:400 clamp(32px,2.9vw,56px)/1.1 'Gilda Display',Georgia,serif}
.pag-footer-title .elementor-heading-title{font-size:16px; font-weight:600; line-height:1.3}
.pag-panel-text{font-size:clamp(15px,.92vw,18px); line-height:1.55}
.pag-reach-text,.pag-partners-text{font-size:16.5px; line-height:1.5}
.pag-footer-links a{font-size:15px}
.pag-copy{font-size:15px}
.pag-legal{font-size:15px}
.pag-sub a{font-size:14.5px}
body{font-family:'Instrument Sans',system-ui,sans-serif; font-size:17px; line-height:1.6}
.pag-copy,.pag-legal{font-weight:700}
.pag-home-hero .pag-btn .elementor-button{font-size:15px}
@media (max-width:900px){ .pag-menu a{font-size:17px} }
@media (max-width:720px){
  .pag-panel-kicker .elementor-heading-title{font-size:clamp(32px,7.6vw,50px)}
  .pag-panel-title .elementor-heading-title{font-size:clamp(22px,5.4vw,36px)}
  .pag-panel-text{font-size:15.5px}
}
@media (max-width:600px){
  .pag-hero-title .elementor-heading-title{font-size:clamp(29px,8.2vw,46px); line-height:1.12}
  .pag-hero-sub .elementor-heading-title{font-size:clamp(16px,4.3vw,26px)}
  .pag-home-hero .pag-btn .elementor-button{font-size:14px}
}
   ===================================================================== */