.elementor-497 .elementor-element.elementor-element-08d2756{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}:root{--page-title-display:none;}/* Start custom CSS for html, class: .elementor-element-196761d *//* One-Page Portfolio · ADIL KHAN (scoped) */
:root{
  --ak-bg:#0b0c0f;
  --ak-panel:#0f1115;
  --ak-card:#12151a;
  --ak-ring:#1f2430;
  --ak-text:#e5e7eb;
  --ak-muted:#a7b0bf;
  --ak-accent:#60a5fa;
  --ak-accent-2:#22d3ee;
  --ak-radius:16px;
  --ak-gap:28px;
  --ak-max:1200px;
}

.ak{ font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; color:var(--ak-text); background:radial-gradient(1200px 600px at 10% -10%, #122, transparent 55%), var(--ak-bg); }
.ak *{ box-sizing:border-box }
.ak a{ color:inherit; text-decoration:none }

/* Layout helpers */
.ak-container{ max-width:var(--ak-max); margin:0 auto; padding:0 20px }
.ak-section{ padding:80px 0 }
.ak-h2{ font-size:clamp(22px,3vw,34px); margin:0 0 20px; letter-spacing:.3px }

/* Header */
.ak-header{ position:sticky; top:0; z-index:50; background:linear-gradient(to bottom, rgba(11,12,15,.9), rgba(11,12,15,.6) 70%, transparent); backdrop-filter:saturate(1.2) blur(8px); border-bottom:1px solid rgba(255,255,255,0.04); }
.ak-header .ak-container{ display:flex; align-items:center; justify-content:space-between; min-height:64px }
.ak-brand{ font-weight:800; letter-spacing:.06em; }
.ak-brand span{ color:var(--ak-accent) }

.ak-nav{ display:flex; gap:18px }
.ak-nav a{ padding:8px 12px; border-radius:10px; border:1px solid transparent; transition:border-color .2s, background .2s }
.ak-nav a:hover{ border-color:var(--ak-ring); background:rgba(255,255,255,.03) }

/* Mobile nav */
.ak-nav-toggle{ display:none; background:none; border:0; width:40px; height:40px; position:relative }
.ak-nav-toggle span{ position:absolute; left:8px; right:8px; height:2px; background:var(--ak-text); transition:transform .2s, top .2s, opacity .2s }
.ak-nav-toggle span:nth-child(1){ top:12px }
.ak-nav-toggle span:nth-child(2){ top:19px }
.ak-nav-toggle span:nth-child(3){ top:26px }

@media (max-width: 900px){
  .ak-nav-toggle{ display:inline-block }
  .ak-nav{ position:absolute; top:64px; right:20px; background:var(--ak-panel); border:1px solid var(--ak-ring); border-radius:12px; padding:10px; display:none; flex-direction:column; min-width:180px }
  .ak-nav.open{ display:flex }
}

/* Hero */
.ak-hero{ position:relative; padding:110px 0 80px; overflow:hidden }
.ak-title{ font-size: clamp(32px, 6vw, 60px); line-height:1.02; margin:0 0 10px; font-weight:900; letter-spacing:.3px; }
.ak-sub{ max-width:680px; color:var(--ak-muted) }
.ak-cta{ display:flex; gap:12px; margin:22px 0 26px }
.ak-btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; height:42px; padding:0 16px; border-radius:12px; border:1px solid var(--ak-ring); background:var(--ak-card); transition:transform .15s ease, box-shadow .15s ease, background .2s, border-color .2s }
.ak-btn:hover{ transform: translateY(-2px); box-shadow:0 10px 24px rgba(0,0,0,.2); border-color:#2a3242 }
.ak-primary{ background:linear-gradient(120deg, var(--ak-accent), var(--ak-accent-2)); border-color:transparent; color:#0a0c10; font-weight:800 }
.ak-ghost{ background:transparent }

.ak-stats{ display:flex; gap:18px; margin:20px 0 0; padding:0; list-style:none }
.ak-stats li{ display:flex; flex-direction:column; background:var(--ak-panel); border:1px solid var(--ak-ring); border-radius:12px; padding:12px 14px; min-width:120px; }
.ak-stats strong{ font-size:20px }
.ak-stats span{ color:var(--ak-muted); font-size:12px }

/* Floating logos in hero */
.ak-logos{ position:absolute; inset:0; pointer-events:none; }
.lf{ position:absolute; width:56px; height:56px; will-change:transform; filter: drop-shadow(0 8px 18px rgba(0,0,0,.18)); animation:
  lf-y var(--dy, 10s) ease-in-out infinite alternate,
  lf-x var(--dx, 13s) linear infinite,
  lf-r var(--dr, 18s) linear infinite;
}
.lf.sm{ width:44px; height:44px; opacity:.9 }
.lf.lg{ width:68px; height:68px; opacity:.95 }
@keyframes lf-y { from { transform: translateY(0) } to { transform: translateY(-18px) } }
@keyframes lf-x { from { transform: translateX(0) } to { transform: translateX(22px) } }
@keyframes lf-r { from { rotate:0deg } to { rotate:360deg } }

@media (prefers-reduced-motion: reduce){
  .lf{ animation:none }
}

/* Services */
.ak-grid{ display:grid; grid-template-columns:repeat(12,1fr); gap:var(--ak-gap) }
.ak-card{ grid-column:span 3 / span 3; background:var(--ak-panel); border:1px solid var(--ak-ring); border-radius:var(--ak-radius); padding:18px }
.ak-card h3{ margin:0 0 8px; font-size:18px }
.ak-card p{ margin:0 0 10px; color:var(--ak-muted) }
.ak-tags{ display:flex; flex-wrap:wrap; gap:8px; list-style:none; padding:0; margin:0 }
.ak-tags li{ font-size:12px; border:1px solid var(--ak-ring); background:rgba(255,255,255,.02); padding:4px 8px; border-radius:999px }

@media (max-width: 1000px){
  .ak-card{ grid-column:span 6 / span 6 }
}
@media (max-width: 640px){
  .ak-card{ grid-column:span 12 / span 12 }
}

/* Projects */
.ak-project{ grid-column:span 4 / span 4; background:var(--ak-panel); border:1px solid var(--ak-ring); border-radius:var(--ak-radius); overflow:hidden }
.ak-project img{ width:100%; height:auto; display:block }
.ak-project figcaption{ padding:14px }
.ak-project h3{ margin:0 0 6px; font-size:18px }
.ak-muted{ color:var(--ak-muted) }
.ak-actions{ display:flex; gap:10px; margin-top:10px }

/* About */
.ak-about{ display:grid; grid-template-columns: 1.4fr .6fr; gap:var(--ak-gap) }
.ak-pill-list{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:10px }
.ak-pill-list li{ border:1px solid var(--ak-ring); background:rgba(255,255,255,.02); padding:6px 10px; border-radius:999px; font-size:12px }
@media (max-width: 900px){ .ak-about{ grid-template-columns:1fr } }

/* Contact */
.ak-contact{ background: radial-gradient(900px 400px at 100% 0, rgba(96,165,250,.12), transparent 60%), var(--ak-bg) }
.ak-contact-grid{ display:flex; flex-wrap:wrap; gap:14px; margin-top:10px }
.ak-contact-item{ border:1px solid var(--ak-ring); background:var(--ak-card); border-radius:10px; padding:10px 12px; transition:border-color .2s, transform .15s }
.ak-contact-item:hover{ border-color:#2a3242; transform: translateY(-2px) }

/* Footer */
.ak-footer{ padding:34px 0; border-top:1px solid var(--ak-ring); background:rgba(0,0,0,.25) }
.ak-footer small{ color:var(--ak-muted) }/* End custom CSS */