/*
Theme Name: GLP Logistics
Theme URI: https://glp.com.pk/
Author: Global Logistic Planners
Description: Corporate theme for Global Logistic Planners (GLP) - freight forwarding and logistics, Lahore and Karachi.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: Proprietary
Text Domain: glp
*/
:root{--navy:#0b2545;--navy2:#13315c;--teal:#0e9f9a;--teal-d:#0a7c78;--mint:#e3f6f5;--ink:#1c2b3a;--mute:#52627a;--line:#dbe3ec;--bg:#f2f5f8;--w:#fff;--r:10px;--max:1200px;--f:"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;font:400 1rem/1.65 var(--f);color:var(--ink);background:var(--w);overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:var(--teal-d);text-underline-offset:3px}a:hover{color:var(--navy)}
h1,h2,h3,h4{font-family:var(--f);color:var(--navy);line-height:1.2;margin:0 0 .6em;letter-spacing:-.01em}
h1{font-size:clamp(1.9rem,4.5vw,3.1rem);font-weight:750}h2{font-size:clamp(1.5rem,3vw,2.2rem);font-weight:720}h3{font-size:1.15rem;font-weight:680}
p{margin:0 0 1em}ul{padding-left:1.2em;margin:0 0 1em}
:focus-visible{outline:3px solid #f5b700;outline-offset:2px;border-radius:3px}
.skip{position:absolute;left:-999px;top:0;background:var(--navy);color:#fff;padding:.7rem 1rem;z-index:200}.skip:focus{left:8px;top:8px}
.wrap{width:min(100% - 2rem,var(--max));margin-inline:auto}
.sec{padding:clamp(2.8rem,6vw,5rem) 0}.sec.alt{background:var(--bg)}.sec.dark{background:var(--navy);color:#d7e2f0}.sec.dark h2,.sec.dark h3{color:#fff}
.lead{font-size:1.12rem;color:var(--mute);max-width:62ch}.dark .lead{color:#b8c9de}
.sh{max-width:720px;margin-bottom:2rem}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:46px;padding:.65rem 1.25rem;border-radius:8px;font-weight:650;text-decoration:none;border:2px solid transparent;cursor:pointer;font:inherit;font-weight:650;line-height:1.2}
.btn-p{background:var(--teal);color:#fff}.btn-p:hover{background:var(--teal-d);color:#fff}
.btn-n{background:var(--navy);color:#fff}.btn-n:hover{background:var(--navy2);color:#fff}
.btn-o{border-color:currentColor;color:var(--navy);background:transparent}.dark .btn-o,.hero .btn-o{color:#fff}.btn-o:hover{background:rgba(255,255,255,.12)}
.btns{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.4rem}
.ico{width:1.35em;height:1.35em;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
/* header */
.hd{position:sticky;top:0;z-index:100;background:#fff;border-bottom:1px solid var(--line)}
.hd .wrap{display:flex;align-items:center;gap:1rem;min-height:72px}
.logo{display:flex;align-items:center;gap:.6rem;text-decoration:none;color:var(--navy);font-weight:800;font-size:1.25rem;margin-right:auto}
.logo .mk{display:grid;place-items:center;width:42px;height:42px;border-radius:9px;background:linear-gradient(135deg,var(--navy),var(--navy2));color:#fff;font-size:.95rem;border-bottom:4px solid var(--teal)}
.logo small{display:block;font-size:.62rem;font-weight:600;color:var(--mute);letter-spacing:.02em}
.logo img{max-height:46px;width:auto}
.nav{display:flex;align-items:center;gap:.2rem}.nav>ul{display:flex;list-style:none;margin:0;padding:0;gap:.2rem}
.nav a,.nav button.sm{color:var(--navy);text-decoration:none;font:inherit;font-weight:600;padding:.7rem .85rem;border-radius:8px;background:none;border:0;cursor:pointer;display:flex;align-items:center;gap:.3rem;min-height:44px}
.nav a:hover,.nav button.sm:hover,.nav [aria-current=page]{background:var(--mint)}
.has-m{position:relative}
.mega{position:absolute;left:50%;top:100%;transform:translateX(-35%);width:min(640px,92vw);background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:0 18px 40px rgba(11,37,69,.15);padding:1rem;display:none;grid-template-columns:1fr 1fr;gap:.2rem}
.has-m.open .mega,.has-m:hover .mega{display:grid}
.mega a{display:flex;gap:.6rem;align-items:center;font-weight:550}
.mega .all{grid-column:1/-1;border-top:1px solid var(--line);margin-top:.4rem;color:var(--teal-d)}
.hd-act{display:flex;gap:.5rem;align-items:center}
.tel{display:flex;align-items:center;gap:.4rem;font-weight:650;color:var(--navy);text-decoration:none;white-space:nowrap}
.mt{display:none;width:48px;height:48px;border:1px solid var(--line);border-radius:8px;background:#fff;color:var(--navy);cursor:pointer}
@media(max-width:1080px){.tel span{display:none}}
@media(max-width:960px){
.mt{display:grid;place-items:center}.hd-act .btn{display:none}
.nav{position:fixed;inset:72px 0 0 0;background:#fff;flex-direction:column;align-items:stretch;padding:1rem;overflow:auto;display:none}
.nav.open{display:flex}.nav>ul{flex-direction:column}.nav a,.nav button.sm{min-height:52px;font-size:1.05rem;width:100%;justify-content:space-between}
.mega{position:static;transform:none;width:100%;box-shadow:none;border:0;padding:0 0 0 .8rem;grid-template-columns:1fr}
.has-m:hover .mega{display:none}.has-m.open .mega{display:grid}
.nav .m-cta{display:flex;margin-top:1rem}}
@media(min-width:961px){.m-cta{display:none!important}}
/* hero slider */
.hero{position:relative;background:var(--navy);color:#fff;overflow:hidden}
.slides{position:relative;aspect-ratio:16/8;min-height:520px;max-height:760px}
@media(max-width:700px){.slides{aspect-ratio:auto;height:620px}}
.slide{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity .8s ease,visibility .8s}
.slide.on{opacity:1;visibility:visible}
.slide .bg,.slide .bg img,.ph{width:100%;height:100%;object-fit:cover}
.slide .bg{position:absolute;inset:0}
.slide::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(11,37,69,.92) 0%,rgba(11,37,69,.72) 45%,rgba(11,37,69,.25) 100%)}
.slide .wrap{position:relative;z-index:2;height:100%;display:flex;flex-direction:column;justify-content:center;padding-bottom:3.5rem}
.slide h1,.slide h2{color:#fff;max-width:17ch;font-size:clamp(2rem,5vw,3.6rem)}
.slide p{max-width:52ch;color:#d7e4f3;font-size:1.1rem}
.slide .tag{display:inline-flex;align-items:center;gap:.5rem;color:#8fe3df;font-weight:650;margin-bottom:1rem}
.ctl{position:absolute;z-index:5;bottom:1.2rem;left:0;right:0}
.ctl .wrap{display:flex;align-items:center;gap:.6rem}
.cb{width:46px;height:46px;border-radius:50%;border:1.5px solid rgba(255,255,255,.6);background:rgba(11,37,69,.5);color:#fff;display:grid;place-items:center;cursor:pointer}
.cb:hover{background:var(--teal)}
.dots{display:flex;gap:.2rem;margin-left:.5rem}
.dot{width:44px;height:44px;background:none;border:0;cursor:pointer;display:grid;place-items:center}
.dot::before{content:"";width:28px;height:5px;border-radius:3px;background:rgba(255,255,255,.4)}
.dot[aria-selected=true]::before{background:var(--teal)}
.ph{display:block;background:linear-gradient(135deg,#0b2545,#13315c 55%,#0e7f7b);min-height:100%}
/* page hero */
.ph-hero{background:linear-gradient(120deg,var(--navy),var(--navy2));color:#fff;position:relative;overflow:hidden}
.ph-hero .wrap{display:grid;grid-template-columns:1.2fr .8fr;gap:2rem;align-items:center;padding:3rem 0}
.ph-hero h1{color:#fff}.ph-hero .lead{color:#c3d3e6}
.ph-hero .im{border-radius:14px;overflow:hidden;aspect-ratio:4/3;border:1px solid rgba(255,255,255,.2)}
.ph-hero .im img,.ph-hero .im .ph{width:100%;height:100%;object-fit:cover}
@media(max-width:820px){.ph-hero .wrap{grid-template-columns:1fr}}
.bc{font-size:.9rem;margin-bottom:1rem}.bc ol{list-style:none;display:flex;flex-wrap:wrap;gap:.3rem;padding:0;margin:0}
.bc li+li::before{content:"/";margin-right:.3rem;opacity:.6}.bc a{color:#8fe3df}.bc [aria-current]{color:#fff}
/* grids & cards */
.g{display:grid;gap:1.25rem}.g2{grid-template-columns:repeat(2,1fr)}.g3{grid-template-columns:repeat(3,1fr)}.g4{grid-template-columns:repeat(4,1fr)}
@media(max-width:960px){.g3,.g4{grid-template-columns:repeat(2,1fr)}}@media(max-width:640px){.g2,.g3,.g4{grid-template-columns:1fr}}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:1.4rem}
.sc{padding:0;overflow:hidden;display:flex;flex-direction:column}
.sc .im{aspect-ratio:3/2;position:relative;overflow:hidden}.sc .im img,.sc .im .ph{width:100%;height:100%;object-fit:cover}
.sc .im .ico{position:absolute;left:1rem;bottom:-1.3rem;width:2.8rem;height:2.8rem;padding:.65rem;background:var(--teal);color:#fff;border-radius:10px;border:3px solid #fff}
.sc .bd{padding:1.9rem 1.4rem 1.4rem;display:flex;flex-direction:column;flex:1}.sc .bd p{color:var(--mute)}
.sc .ben{font-weight:600;color:var(--navy);font-size:.95rem;border-left:3px solid var(--teal);padding-left:.7rem}
.sc .more{margin-top:auto;font-weight:700;padding-top:1rem}
.bn{display:flex;gap:1rem}.bn .ico{background:var(--mint);color:var(--teal-d);width:2.6rem;height:2.6rem;padding:.6rem;border-radius:10px}
.bn h3{margin-bottom:.3rem}.bn p{color:var(--mute);margin:0}
.steps{counter-reset:s;list-style:none;padding:0;display:grid;grid-template-columns:repeat(5,1fr);gap:1rem;position:relative}
.steps li{counter-increment:s;position:relative;padding-top:3.4rem}
.steps li::before{content:counter(s);position:absolute;top:0;left:0;width:2.6rem;height:2.6rem;border-radius:50%;background:var(--teal);color:#fff;display:grid;place-items:center;font-weight:800;z-index:1}
.steps li::after{content:"";position:absolute;top:1.3rem;left:2.6rem;right:-1rem;border-top:2px dashed rgba(143,227,223,.5)}.steps li:last-child::after{display:none}
.steps h3{font-size:1.02rem}.steps p{font-size:.93rem;margin:0;color:#b8c9de}
.light .steps p{color:var(--mute)}
@media(max-width:900px){.steps{grid-template-columns:1fr}.steps li{padding:0 0 0 3.6rem}.steps li::after{top:2.7rem;left:1.3rem;right:auto;bottom:-1rem;border-top:0;border-left:2px dashed rgba(143,227,223,.5)}}
.chips{display:flex;flex-wrap:wrap;gap:.6rem;list-style:none;padding:0}.chips li{background:#fff;border:1px solid var(--line);border-radius:999px;padding:.5rem 1rem;font-weight:600;color:var(--navy)}
.note{border-left:4px solid var(--teal);background:var(--mint);padding:1rem 1.2rem;border-radius:0 8px 8px 0;color:var(--navy)}
.two{display:grid;grid-template-columns:1fr 1fr;gap:2.5rem}@media(max-width:820px){.two{grid-template-columns:1fr}}
.tick{list-style:none;padding:0}.tick li{padding-left:1.7rem;position:relative;margin-bottom:.5rem}.tick li::before{content:"";position:absolute;left:0;top:.5em;width:.9rem;height:.5rem;border-left:2px solid var(--teal);border-bottom:2px solid var(--teal);transform:rotate(-45deg)}
.off h3{display:flex;gap:.5rem;align-items:center}.off .role{color:var(--teal-d);font-weight:650;margin-bottom:.6rem}
.off dl{margin:0}.off dt{font-weight:650;color:var(--navy);margin-top:.6rem}.off dd{margin:0;color:var(--mute)}
.map{margin-top:1rem;border:1px dashed var(--line);border-radius:8px;background:var(--bg);padding:1.5rem;text-align:center;color:var(--mute);font-size:.92rem}
.faq details{border:1px solid var(--line);border-radius:8px;background:#fff;margin-bottom:.6rem}
.faq summary{cursor:pointer;padding:1rem 1.2rem;font-weight:650;color:var(--navy);list-style:none;display:flex;justify-content:space-between;gap:1rem;min-height:48px}
.faq summary::after{content:"+";font-size:1.4rem;line-height:1;color:var(--teal-d)}.faq details[open] summary::after{content:"\2212"}.faq details p{padding:0 1.2rem 1rem;margin:0;color:var(--mute)}
.cta{background:linear-gradient(120deg,var(--navy),var(--navy2));color:#fff;text-align:center}.cta h2{color:#fff}.cta .lead{margin-inline:auto;color:#c3d3e6}.cta .btns{justify-content:center}
.cta .btn-o{color:#fff}
/* forms */
.fm{display:grid;grid-template-columns:1fr 1fr;gap:1rem}.fm .full{grid-column:1/-1}@media(max-width:640px){.fm{grid-template-columns:1fr}}
.fm label{display:block;font-weight:600;color:var(--navy);margin-bottom:.3rem;font-size:.95rem}
.fm input,.fm select,.fm textarea{width:100%;min-height:46px;padding:.6rem .8rem;border:1.5px solid #9fb0c4;border-radius:8px;font:inherit;background:#fff;color:var(--ink)}
.fm textarea{min-height:120px}.fm input:focus,.fm select:focus,.fm textarea:focus{border-color:var(--teal);outline:3px solid rgba(14,159,154,.3)}
.fm .chk{display:flex;gap:.6rem;align-items:flex-start;font-weight:400}.fm .chk input{width:22px;min-height:22px;margin-top:.2rem}
.hp{position:absolute;left:-9999px;height:0;overflow:hidden}
.st{padding:1rem 1.2rem;border-radius:8px;margin-bottom:1rem;font-weight:600}.st.ok{background:#e6f6ea;color:#14532d;border:1px solid #86d19a}.st.er{background:#fdeceb;color:#7f1d1d;border:1px solid #f1a9a5}
.req{color:#b42318}
/* footer */
.ft{background:#071a33;color:#b8c9de;padding:3.5rem 0 0}.ft h2{font-size:1rem;color:#fff;margin-bottom:.8rem}.ft a{color:#b8c9de;text-decoration:none}.ft a:hover{color:#fff;text-decoration:underline}
.ft ul{list-style:none;padding:0;margin:0}.ft li{margin-bottom:.35rem}.ft li a{display:inline-block;padding:.15rem 0}
.fg{display:grid;grid-template-columns:1.4fr 1fr 1.2fr 1.4fr;gap:2rem}@media(max-width:960px){.fg{grid-template-columns:1fr 1fr}}@media(max-width:600px){.fg{grid-template-columns:1fr}}
.ft .logo{color:#fff}.ft .logo small{color:#8fa5c0}
.soc{display:flex;gap:.5rem;margin-top:1rem}.soc a,.soc span{width:44px;height:44px;border:1px solid rgba(255,255,255,.25);border-radius:50%;display:grid;place-items:center;color:#fff}.soc span{opacity:.45}
.fb{border-top:1px solid rgba(255,255,255,.12);margin-top:2.5rem;padding:1.2rem 0;display:flex;justify-content:space-between;flex-wrap:wrap;gap:.8rem;font-size:.9rem}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important;scroll-behavior:auto!important}}

.slide .bg img,.sc .im img,.ph-hero .im img{width:100%;height:100%;object-fit:cover}

/* 3D motion, badge, clients, brand social */
.brandline{color:#8fe3df;font-weight:650;margin:-.2rem 0 .8rem}
[data-tilt]{transform-style:preserve-3d;transition:transform .25s ease,box-shadow .25s ease;will-change:transform}
[data-tilt].tilting{box-shadow:0 24px 50px rgba(11,37,69,.22)}
.card.sc{perspective:900px}.sc .im{transform:translateZ(0)}.sc .im .ico{transform:translateZ(40px)}
.sc:hover .im img,.sc:hover .im .ph{transform:scale(1.06)}.sc .im img,.sc .im .ph{transition:transform .6s ease}
.slide.on .bg img{animation:kb 14s ease-out both}
@keyframes kb{from{transform:scale(1)}to{transform:scale(1.08)}}
.since{position:absolute;z-index:6;right:clamp(1rem,5vw,5rem);top:clamp(1.2rem,6vw,4rem);perspective:800px;pointer-events:none}
.since-in{background:linear-gradient(145deg,rgba(255,255,255,.96),#e3f6f5);color:var(--navy);padding:1.1rem 1.5rem;border-radius:16px;border-bottom:5px solid var(--teal);box-shadow:0 22px 40px rgba(0,0,0,.35);text-align:center;transform:rotateY(-14deg) rotateX(6deg);animation:fl 6s ease-in-out infinite}
.since-in strong{display:block;font-size:clamp(2.4rem,5vw,3.8rem);line-height:1;color:var(--teal-d)}.since-in span{display:block;font-weight:750}.since-in small{display:block;color:var(--mute);font-size:.75rem;margin-top:.2rem}
@keyframes fl{0%,100%{transform:rotateY(-14deg) rotateX(6deg) translateY(0)}50%{transform:rotateY(10deg) rotateX(2deg) translateY(-10px)}}
@media(max-width:700px){.since{top:.8rem;right:.8rem}.since-in{padding:.6rem .9rem}.since-in small{display:none}}
.clients{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
@media(max-width:960px){.clients{grid-template-columns:repeat(2,1fr)}}@media(max-width:520px){.clients{grid-template-columns:1fr}}
.clients li{display:flex;align-items:center;gap:.8rem;background:#fff;border:1px solid var(--line);border-left:4px solid var(--teal);border-radius:10px;padding:1rem;font-weight:650;color:var(--navy);min-height:76px}
.clients .cm{display:grid;place-items:center;flex:none;width:2.6rem;height:2.6rem;border-radius:10px;background:linear-gradient(135deg,var(--navy),var(--navy2));color:#fff;font-weight:800}
.agri{align-items:center}.agri-im{border-radius:16px;overflow:hidden;aspect-ratio:4/3;box-shadow:0 30px 50px rgba(11,37,69,.2)}.agri-im img,.agri-im .ph{width:100%;height:100%;object-fit:cover}
.soc{gap:.7rem}.soc .sb{position:relative;display:block;width:46px;height:46px;border:0;border-radius:12px;background:#fff;padding:5px;transition:transform .25s ease,box-shadow .25s ease}
.soc .sb svg{width:100%;height:100%;display:block;border-radius:8px}
.soc a.sb:hover,.soc a.sb:focus-visible{transform:translateY(-5px) rotate(-6deg) scale(1.08);box-shadow:0 10px 22px rgba(0,0,0,.4)}
.soc a.sb::after{content:"";position:absolute;inset:-2px;border-radius:14px;border:2px solid rgba(143,227,223,.7);animation:pr 2.6s ease-out infinite}
@keyframes pr{0%{transform:scale(1);opacity:.8}100%{transform:scale(1.45);opacity:0}}
.soc span.sb.off{opacity:.55}
@media(prefers-reduced-motion:reduce){.since-in{animation:none}.slide.on .bg img{animation:none}.soc a.sb::after{animation:none;opacity:0}[data-tilt]{transform:none!important}}