/* =============================================================
   ADROKS IT Solutions — about.css
   Covers: About Us section, Our Journey timeline, responsive
   Brand: navy #1c4883 · accent #2ba6e0 · ink #1b2a40
   ============================================================= */

/* ── Page Base ─────────────────────────────────────────── */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    body { font-family: 'Poppins', sans-serif; background: #180f5c; color: #1b2a40; }

    .au-title span {
    color: #00bbf0 !important;
}


    /* ── About Us Section ──────────────────────────────────── */
    .about_us_modern {
      --navy: #1c4883; --navy-d: #143560; --navy-dd: #0e2748;
      --accent: #2ba6e0; --ink: #1b2a40; --muted: #5f7088;
      --line: #e7eef7; --soft: #f4f8fc;
      padding: 84px 0 40px; position: relative; overflow: hidden; background: #fff;
    }
    .about_us_modern * { box-sizing: border-box; }
    .au-container { max-width: 1180px; margin: 0 auto; padding: 0 28px; position: relative; z-index: 2; }
    .about_us_modern::before {
      content: ""; position: absolute; top: -160px; right: -160px;
      width: 520px; height: 520px; border-radius: 50%;
      background: radial-gradient(circle, rgba(43,166,224,.10), transparent 65%); z-index: 0;
    }
    .about_us_modern::after {
      content: ""; position: absolute; bottom: 120px; left: -180px;
      width: 480px; height: 480px; border-radius: 50%;
      background: radial-gradient(circle, rgba(28,72,131,.07), transparent 65%); z-index: 0;
    }
    /* intro head */
    .au-head { text-align: center; max-width: 760px; margin: 0 auto 60px; }
    .au-eyebrow {
      display: inline-flex; align-items: center; gap: 9px;
      font-size: 13px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase;
      color: var(--navy); background: rgba(28,72,131,.07); padding: 8px 18px; border-radius: 999px;
    }
    .au-title { font-size: clamp(34px,4.6vw,52px); font-weight: 700; line-height: 1.1; margin: 22px 0 0; color: var(--ink); letter-spacing: -.5px; }
    .au-title span { color: (--accent); }
    .au-lead { font-size: clamp(16px,1.7vw,19px); line-height: 1.7; color: var(--muted); margin: 20px auto 0; max-width: 620px; }
    /* two-col */
    .au-main { display: grid; grid-template-columns: 1.02fr .98fr; gap: 60px; align-items: center; margin-bottom: 88px; }
    .au-copy h3 { font-size: clamp(23px,2.6vw,31px); font-weight: 700; line-height: 1.25; color: var(--ink); margin: 0 0 18px; }
    .au-copy p { font-size: 16px; line-height: 1.8; color: var(--muted); margin: 0 0 16px; }
    .au-copy p strong { color: var(--navy); font-weight: 600; }
    .au-checks { list-style: none; padding: 0; margin: 24px 0 30px; display: grid; grid-template-columns: 1fr 1fr; gap: 14px 22px; }
    .au-checks li { display: flex; align-items: flex-start; gap: 11px; font-size: 14.5px; font-weight: 500; color: var(--ink); line-height: 1.45; }
    .au-checks .ic { color: var(--accent); margin-top: 1px; flex: none; }
    .au-btn {
      display: inline-flex; align-items: center; gap: 11px;
      background: linear-gradient(135deg, #180f5c, #180f5c);
      color: #fff; font-weight: 600; font-size: 15.5px; padding: 15px 30px;
      border-radius: 12px; text-decoration: none;
      box-shadow: 0 16px 34px -16px rgba(28,72,131,.7);
      transition: transform .25s, box-shadow .25s;
    }
    .au-btn:hover { transform: translateY(-3px); box-shadow: 0 22px 40px -16px rgba(28,72,131,.85); color: #fff; }
    /* visual panel */
    .au-visual { position: relative; }
    .au-panel {
      position: relative; height: 440px; border-radius: 26px; overflow: hidden;
      background: linear-gradient(150deg, var(--navy) 0%, var(--navy-d) 55%, var(--navy-dd) 100%);
      box-shadow: 0 40px 80px -40px rgba(14,39,72,.65);
    }
    .au-grid-overlay {
      position: absolute; inset: 0; opacity: .5;
      background-image: linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px), linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
      background-size: 38px 38px;
      -webkit-mask-image: radial-gradient(circle at 50% 45%,#000,transparent 78%);
      mask-image: radial-gradient(circle at 50% 45%,#000,transparent 78%);
    }
    .au-orbit { position: absolute; top: 50%; left: 50%; width: 330px; height: 330px; transform: translate(-50%,-52%); animation: au-spin 36s linear infinite; }
    .au-orbit circle { fill: none; stroke: rgba(255,255,255,.16); stroke-dasharray: 3 8; stroke-width: 1.4; }
    @keyframes au-spin { to { transform: translate(-50%,-52%) rotate(360deg); } }
    .au-core {
      position: absolute; top: 45%; left: 50%; transform: translate(-50%,-50%);
      width: 118px; height: 118px; border-radius: 50%; display: grid; place-items: center;
      background: linear-gradient(150deg,#2ba6e0,#1c4883);
      box-shadow: 0 0 0 12px rgba(255,255,255,.06), 0 18px 40px -10px rgba(0,0,0,.5);
    }
    .au-core .ic { color: #fff; width: 56px; height: 56px; }
    .au-chip {
      position: absolute; width: 62px; height: 62px; border-radius: 16px;
      display: grid; place-items: center;
      background: rgba(255,255,255,.10); backdrop-filter: blur(6px);
      border: 1px solid rgba(255,255,255,.18);
      box-shadow: 0 14px 30px -14px rgba(0,0,0,.5);
      animation: au-float 5s ease-in-out infinite;
    }
    .au-chip .ic { color: #fff; width: 27px; height: 27px; }
    .au-chip-1 { top: 42px; left: 46px; }
    .au-chip-2 { top: 34px; right: 54px; animation-delay: .8s; }
    .au-chip-3 { bottom: 96px; left: 38px; animation-delay: 1.6s; }
    .au-chip-4 { bottom: 64px; right: 46px; animation-delay: 2.4s; }
    .au-chip-5 { top: 50%; right: 18px; animation-delay: 1.2s; animation-name: au-float-c; }
    @keyframes au-float { 0%,100%{transform:translateY(0);}50%{transform:translateY(-10px);} }
    @keyframes au-float-c { 0%,100%{transform:translateY(-50%);}50%{transform:translateY(calc(-50% - 10px));} }
    .au-panel-badge {
      position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); white-space: nowrap;
      display: inline-flex; align-items: center; gap: 9px;
      background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.2);
      color: #fff; font-size: 13px; font-weight: 500; padding: 9px 18px; border-radius: 999px; backdrop-filter: blur(6px);
    }
    .au-panel-badge .dot { width: 8px; height: 8px; border-radius: 50%; background: #3ddc97; box-shadow: 0 0 0 4px rgba(61,220,151,.22); }
    /* stats */
    .au-stats {
      display: grid; grid-template-columns: repeat(4,1fr); gap: 22px;
      background: var(--soft); border: 1px solid var(--line); border-radius: 22px; padding: 38px 30px; margin-bottom: 90px;
    }
    .au-stat { text-align: center; position: relative; }
    .au-stat:not(:last-child)::after { content:""; position:absolute; right:-11px; top:14%; height:72%; width:1px; background:var(--line); }
    .au-ico { width:48px; height:48px; margin:0 auto 14px; border-radius:13px; display:grid; place-items:center; background:linear-gradient(135deg,rgba(28,72,131,.10),rgba(43,166,224,.12)); color:var(--navy); }
    .au-ico .ic { width: 23px; height: 23px; }
    .au-num { font-size: clamp(32px,3.8vw,44px); font-weight: 700; line-height: 1; color: #180f5c; letter-spacing: -1px; }
    .au-num span { color: var(--accent); }
    .au-lbl { font-size: 14px; font-weight: 500; color: var(--muted); margin-top: 9px; }
    /* pillars */
    .au-pillars-head { text-align: center; max-width: 620px; margin: 0 auto 46px; }
    .au-pillars-head h3 { font-size: clamp(26px,3.4vw,38px); font-weight: 700; color: var(--ink); margin: 0; }
    .au-pillars-head p { font-size: 16px; color: var(--muted); margin: 14px 0 0; line-height: 1.7; }
    .au-pillars { display: grid; grid-template-columns: repeat(3,1fr); gap: 26px; margin-bottom: 30px; }
    .au-card {
      position: relative; background: #fff; border: 1px solid var(--line); border-radius: 20px; padding: 36px 30px;
      transition: transform .3s, box-shadow .3s, border-color .3s; overflow: hidden;
    }
    .au-card::before {
      content:""; position:absolute; top:0; left:0; right:0; height:4px; border-radius:20px 20px 0 0;
      background:linear-gradient(90deg,var(--navy),var(--accent)); transform:scaleX(0); transform-origin:left; transition:transform .35s;
    }
    .au-card:hover { transform: translateY(-8px); box-shadow: 0 34px 60px -34px rgba(28,72,131,.5); border-color: transparent; }
    .au-card:hover::before { transform: scaleX(1); }
    .au-card .au-badge { width:64px; height:64px; border-radius:18px; display:grid; place-items:center; background:linear-gradient(150deg,var(--navy),var(--accent)); color:#fff; box-shadow:0 16px 30px -14px rgba(28,72,131,.65); margin-bottom:24px; }
    .au-badge .ic { width: 31px; height: 31px; }
    .au-card h4 { font-size: 21px; font-weight: 600; color: var(--ink); margin: 0 0 12px; }
    .au-card p { font-size: 15px; line-height: 1.75; color: var(--muted); margin: 0 0 20px; }
    .au-tags { list-style: none; padding: 0; margin: 0 0 22px; display: flex; flex-wrap: wrap; gap: 8px; }
    .au-tags li { font-size: 12.5px; font-weight: 500; color: var(--navy); background: rgba(28,72,131,.07); padding: 6px 12px; border-radius: 8px; }
    .au-more { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--navy); text-decoration: none; }
    .au-more .ic { width: 13px; height: 13px; transition: transform .25s; }
    .au-card:hover .au-more { color: var(--accent); }
    .au-card:hover .au-more .ic { transform: translateX(4px); }
    /* mission */
    .au-mission {
      position: relative; margin-top: 64px; border-radius: 24px; overflow: hidden;
      background: linear-gradient(135deg,var(--navy),var(--navy-dd)); padding: 56px 48px; text-align: center;
    }
    .au-mission .au-quote-ic { position: relative; z-index: 2; color: var(--accent); margin-bottom: 12px; }
    .au-mission .au-quote-ic .ic { width: 30px; height: 30px; }
    .au-mission p { position: relative; z-index: 2; font-size: clamp(20px,2.6vw,29px); font-weight: 600; line-height: 1.45; color: #fff; max-width: 820px; margin: 0 auto; }
    .au-mission p em { font-style: normal; color: #7fd0f4; }
    /* scroll reveal */
    .au-rv { opacity: 0; transform: translateY(28px); transition: opacity .7s cubic-bezier(.22,.61,.36,1), transform .7s cubic-bezier(.22,.61,.36,1); }
    .au-rv.in { opacity: 1; transform: none; }
    .au-rv.d1 { transition-delay: .08s; } .au-rv.d2 { transition-delay: .16s; } .au-rv.d3 { transition-delay: .24s; }
    .ic { display: inline-block; vertical-align: middle; flex: none; }

    /* ── Our Journey ───────────────────────────────────────── */
    .sa-journey {
      background: #0c1e35; padding: 80px 0 96px;
      position: relative; overflow: hidden;
    }
    .sa-journey::before {
      content:""; position:absolute; width:700px; height:700px; border-radius:50%;
      background:radial-gradient(circle,rgba(43,166,224,.14) 0%,transparent 68%);
      top:-220px; right:-200px; pointer-events:none;
    }
    .sa-journey::after {
      content:""; position:absolute; width:500px; height:500px; border-radius:50%;
      background:radial-gradient(circle,rgba(28,72,131,.18) 0%,transparent 68%);
      bottom:-140px; left:-140px; pointer-events:none;
    }
    .jw { max-width:1100px; margin:0 auto; padding:0 28px; position:relative; z-index:2; }
    .jw-head { text-align:center; margin-bottom:64px; }
    .jw-eyebrow {
      display:inline-block; font-size:11px; font-weight:600; letter-spacing:.16em;
      text-transform:uppercase; color:#2ba6e0; background:rgba(43,166,224,.1);
      border:1px solid rgba(43,166,224,.28); border-radius:100px; padding:5px 16px; margin-bottom:16px;
    }
    .jw-h2 { font-weight:800; font-size:clamp(26px,4.5vw,44px); color:#f1f5f9; margin:0 0 14px; line-height:1.1; }
    .jw-h2 em { font-style:normal; color:#2ba6e0; }
    .jw-lead { font-size:15px; color:#64748b; max-width:52ch; margin:0 auto; line-height:1.75; }
    .jw-track { position:relative; display:flex; flex-direction:column; }
    .jw-spine {
      position:absolute; left:50%; top:0; bottom:0; width:2px; transform:translateX(-50%);
      background:linear-gradient(to bottom,transparent,rgba(43,166,224,.45) 10%,rgba(43,166,224,.45) 90%,transparent);
    }
    .jw-row { display:grid; grid-template-columns:1fr 88px 1fr; margin-bottom:52px; }
    .jw-row:last-child { margin-bottom:0; }
    .jw-node { display:flex; justify-content:center; align-items:flex-start; padding-top:4px; position:relative; z-index:3; }
    .jw-dot {
      width:72px; height:72px; border-radius:50%;
      background:linear-gradient(145deg,#0d2d50,#1c4883);
      border:2px solid rgba(43,166,224,.5);
      display:flex; align-items:center; justify-content:center;
      box-shadow:0 0 0 10px rgba(43,166,224,.08),0 10px 30px rgba(0,0,0,.5);
      transition:transform .3s,box-shadow .3s;
    }
    .jw-row:hover .jw-dot { transform:scale(1.1); box-shadow:0 0 0 14px rgba(43,166,224,.13),0 14px 40px rgba(43,166,224,.3); }
    .jw-dot svg { width:28px; height:28px; stroke:#2ba6e0; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
    .jw-card {
      background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08);
      border-radius:16px; padding:28px 24px; position:relative;
      transition:transform .3s,border-color .3s,box-shadow .3s;
    }
    .jw-row:hover .jw-card { transform:translateY(-4px); border-color:rgba(43,166,224,.3); box-shadow:0 16px 48px rgba(0,0,0,.3); }
    .jw-arr-r { position:absolute; right:-12px; top:26px; width:0; height:0; border-top:10px solid transparent; border-bottom:10px solid transparent; border-left:12px solid rgba(255,255,255,.08); }
    .jw-arr-l { position:absolute; left:-12px; top:26px; width:0; height:0; border-top:10px solid transparent; border-bottom:10px solid transparent; border-right:12px solid rgba(255,255,255,.08); }
    .jw-yr { font-weight:800; font-size:40px; line-height:1; margin:0 0 4px; background:linear-gradient(120deg,#2ba6e0,#1c7aad); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
    .jw-lbl { font-size:10px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:#2ba6e0; margin:0 0 10px; display:block; }
    .jw-ct { font-weight:700; font-size:16px; color:#e2e8f0; margin:0 0 9px; }
    .jw-cb { font-size:13.5px; color:#64748b; line-height:1.75; margin:0 0 16px; }
    .jw-tags { display:flex; flex-wrap:wrap; gap:7px; }
    .jw-tag { font-size:11px; padding:4px 11px; background:rgba(43,166,224,.08); border:1px solid rgba(43,166,224,.2); border-radius:6px; color:#7ec8e3; }

    /* ── Responsive ────────────────────────────────────────── */
    @media(max-width:900px){
      .au-main{grid-template-columns:1fr;gap:44px;}
      .au-visual{order:-1;max-width:520px;margin:0 auto;width:100%;}
      .au-pillars{grid-template-columns:1fr;max-width:480px;margin-left:auto;margin-right:auto;}
      .au-stats{grid-template-columns:repeat(2,1fr);gap:30px 18px;}
      .au-stat:not(:last-child)::after{display:none;}
    }
    @media(max-width:680px){
      .jw-spine{left:33px;}
      .jw-row{grid-template-columns:66px 1fr;gap:0 14px;}
      .jw-blank,.jw-arr-r,.jw-arr-l{display:none;}
      .jw-node{padding-top:8px;}
      .jw-dot{width:56px;height:56px;}
      .jw-yr{font-size:28px;}
      .jw-card{padding:20px 16px;}
      .mega-menu{min-width:90vw;grid-template-columns:1fr;left:0;transform:none;}
    }
    @media(max-width:560px){
      .about_us_modern{padding:60px 0 30px;}
      .au-checks{grid-template-columns:1fr;}
      .au-panel{height:380px;}
      .au-mission{padding:42px 24px;}
      .au-stats{padding:30px 20px;}
    }
    @media(prefers-reduced-motion:reduce){
      .au-orbit,.au-chip{animation:none;}
      .au-rv{transition:none;opacity:1;transform:none;}
    }