/* Webtel main menu (v2) */
  :root{
    --navy-900:#0d1f4d;   /* logo wordmark blue, deepened for backgrounds */
    --navy-800:#16305e;
    --navy-700:#22447e;
    --gold-500:#f7a600;   /* logo pentagon gold */
    --gold-300:#ffd166;   /* lighter gold tint */
    --sky:#7fd1f5;        /* logo ribbon blue */
    --leaf:#8bc34a;       /* logo ribbon green, deepened for contrast */
    --ink:#0d1f4d;
    --muted:#64748b;
    --panel:#f8f9fb;
    --line:rgba(255,255,255,0.10);
    --shadow: 0 24px 60px -20px rgba(13,31,77,0.45);
  }
  *{box-sizing:border-box;}

  /* ===== TOP UTILITY STRIP ===== */
  .wt-topbar{
    display:flex;
    align-items:stretch;
    height:44px;
    background:#0d1f4d;
    font-family:'Manrope',sans-serif;
    overflow:hidden;
  }
  .wt-topbar-search{
    flex:1 1 320px;
    display:flex;
    align-items:center;
    gap:10px;
    background:#fff;
    padding:0 18px;
    max-width:420px;
  }
  .wt-topbar-search input{
    border:none;
    outline:none;
    flex:1;
    font-family:'Manrope',sans-serif;
    font-size:13.5px;
    color:var(--ink);
  }
  .wt-topbar-search input::placeholder{ color:#6e797c; }
  .wt-topbar-search button{
    background:none;border:none;cursor:pointer;
    color:#ba1a1a;
    display:flex;align-items:center;justify-content:center;
  }
  .wt-topbar-mid{
    flex:1;
    display:flex;
    align-items:stretch;
    justify-content:flex-end;
  }
  .wt-topbar-item{
    display:flex;
    align-items:center;
    gap:8px;
    padding:0 22px;
    color:#fff;
    text-decoration:none;
    font-size:12.5px;
    font-weight:700;
    letter-spacing:.02em;
    white-space:nowrap;
    border-left:1px solid rgba(255,255,255,0.08);
    transition:filter .18s ease;
  }
  .wt-topbar-item:hover{ filter:brightness(1.08); }
  .wt-topbar-item svg{ width:15px;height:15px;flex-shrink:0; }
  .wt-topbar-item.i-support{ background:var(--navy-800); color:#eaf1ff; }
  .wt-topbar-item.i-success{ background:var(--leaf); }
  .wt-topbar-item.i-find{ background:var(--gold-500); color:#ffffff; }
  .wt-topbar-item.i-call{ background:#ba1a1a; padding-left:20px; padding-right:26px; font-size:14px; }
  .wt-topbar-item.i-call svg{ width:17px;height:17px; }

  @media (max-width:900px){
    .wt-topbar-item span.label-text{ display:none; }
    .wt-topbar-item{ padding:0 14px; }
    .wt-topbar-item.i-call{ padding:0 16px; }
    .wt-topbar-search{ max-width:none; }
  }
  @media (max-width:640px){
    .wt-topbar-item.i-success,
    .wt-topbar-item.i-find{ display:none; }
  }

  /* ===== NAVBAR ===== */
  .wt-nav{
    position:relative;
    z-index:200;
    background:linear-gradient(180deg,var(--navy-900) 0%, var(--navy-800) 100%);
    border-bottom:1px solid var(--line);
  }
  .wt-nav-inner{
    max-width:1320px;
    margin:0 auto;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:0 28px;
    height:76px;
  }

  /* Logo */
  .wt-logo{
    display:flex;
    align-items:center;
    gap:10px;
    text-decoration:none;
    flex-shrink:0;
  }
  .wt-logo-img{
    height:32px;
    width:auto;
    display:block;
  }
  .wt-logo-chip{
    background:#ffffff;
    border-radius:9px;
    padding:6px 12px;
    display:flex;
    align-items:center;
    box-shadow:0 2px 8px rgba(13,31,77,0.15);
  }

  /* Primary menu */
  .wt-menu{
    display:flex;
    align-items:center;
    gap:4px;
    list-style:none;
    margin:0;padding:0;
    height:100%;
  }
  .wt-menu > li{
    position:relative;
    height:100%;
    display:flex;
    align-items:center;
  }
  .wt-menu > li > a{
    display:flex;
    align-items:center;
    gap:6px;
    color:#e7ebf1;
    text-decoration:none;
    font-size:14.5px;
    font-weight:600;
    letter-spacing:.01em;
    padding:10px 16px;
    border-radius:8px;
    position:relative;
    transition:color .2s ease;
    cursor:pointer;
  }
  .wt-menu > li > a::after{
    content:"";
    position:absolute;
    left:16px; right:16px; bottom:6px;
    height:2px;
    background:linear-gradient(90deg,var(--gold-300),var(--gold-500));
    transform:scaleX(0);
    transform-origin:left;
    transition:transform .25s ease;
    border-radius:2px;
  }
  .wt-menu > li:hover > a,
  .wt-menu > li.active > a{ color:#fff; }
  .wt-menu > li:hover > a::after,
  .wt-menu > li.active > a::after{ transform:scaleX(1); }
  .wt-caret{
    width:9px;height:9px;
    border-right:1.6px solid currentColor;
    border-bottom:1.6px solid currentColor;
    transform:rotate(45deg);
    margin-top:-3px;
    transition:transform .25s ease;
    opacity:.8;
  }
  .wt-menu > li:hover .wt-caret{ transform:rotate(225deg); margin-top:3px; }

  /* Right side actions */
  .wt-actions{
    display:flex;
    align-items:center;
    gap:12px;
    flex-shrink:0;
  }
  .wt-btn-ghost{
    color:#e7ebf1;
    text-decoration:none;
    font-size:13.5px;
    font-weight:600;
    padding:9px 14px;
    border:1px solid var(--line);
    border-radius:8px;
    transition:.2s ease;
    white-space:nowrap;
  }
  .wt-btn-ghost:hover{ border-color:var(--gold-300); color:var(--gold-300); }
  .wt-btn-solid{
    background:linear-gradient(135deg,var(--gold-300),var(--gold-500));
    color:var(--navy-900);
    text-decoration:none;
    font-size:13.5px;
    font-weight:700;
    padding:10px 18px;
    border-radius:8px;
    white-space:nowrap;
    box-shadow:0 8px 20px -6px rgba(247,166,0,0.5);
    transition:transform .2s ease, box-shadow .2s ease;
  }
  .wt-btn-solid:hover{ transform:translateY(-1px); box-shadow:0 12px 26px -6px rgba(247,166,0,0.65); }

  .wt-burger{
    display:none;
    width:40px;height:40px;
    border-radius:8px;
    border:1px solid var(--line);
    background:transparent;
    cursor:pointer;
    align-items:center;
    justify-content:center;
    flex-direction:column;
    gap:4px;
  }
  .wt-burger span{ width:18px; height:2px; background:#e7ebf1; border-radius:2px; transition:.2s; }

  /* ===== MEGA PANEL ===== */
  .wt-mega{
    position:absolute;
    top:100%;
    left:0;
    transform:translateY(10px);
    width:min(920px, 92vw);
    background:#fff;
    border-radius:16px;
    box-shadow:var(--shadow);
    padding:28px;
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:8px 28px;
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transition:opacity .22s ease, transform .22s ease;
    border:1px solid #dce9ff;
  }
  .wt-menu > li:hover .wt-mega{
    opacity:1; visibility:visible; pointer-events:auto;
    transform:translateY(0);
  }

  .wt-mega-col-title{
    font-family:'Sora',sans-serif;
    font-size:11.5px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.08em;
    color:var(--gold-500);
    margin:4px 0 14px;
    display:flex;
    align-items:center;
    gap:8px;
  }
  .wt-mega-col-title::before{
    content:"";
    width:16px;height:2px;
    background:var(--gold-500);
    border-radius:2px;
  }
  .wt-mega ul{ list-style:none; margin:0 0 20px; padding:0; }
  .wt-mega li{ margin:0; }
  .wt-mega a.wt-mega-link{
    display:flex;
    align-items:center;
    gap:10px;
    text-decoration:none;
    color:var(--ink);
    font-size:14px;
    font-weight:600;
    padding:8px 10px;
    border-radius:8px;
    border-left:2px solid transparent;
    transition:background .18s ease, border-color .18s ease, padding-left .18s ease, color .18s ease;
  }
  .wt-mega a.wt-mega-link:hover{
    background:var(--panel);
    border-left-color:var(--gold-500);
    padding-left:14px;
    color:var(--navy-800);
  }
  .wt-mega a.wt-mega-link .dot{
    width:6px;height:6px;
    border-radius:50%;
    background:#bdc8cc;
    flex-shrink:0;
    transition:background .18s ease, transform .18s ease;
  }
  .wt-mega a.wt-mega-link:hover .dot{ background:var(--gold-500); transform:scale(1.25); }

  .wt-mega-feature{
    grid-column:3;
    grid-row:1 / span 2;
    background:linear-gradient(160deg,var(--navy-900),var(--navy-700));
    border-radius:12px;
    padding:22px;
    color:#fff;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    min-height:220px;
  }
  .wt-mega-feature h4{
    font-family:'Sora',sans-serif;
    font-size:15px;
    margin:0 0 8px;
    line-height:1.35;
  }
  .wt-mega-feature p{
    font-size:12.5px;
    color:#b4c8e2;
    line-height:1.55;
    margin:0 0 18px;
  }
  .wt-mega-feature a{
    align-self:flex-start;
    font-size:12.5px;
    font-weight:700;
    color:var(--navy-900);
    background:var(--gold-300);
    text-decoration:none;
    padding:9px 14px;
    border-radius:7px;
  }

  /* Simple dropdown (non-mega) */
  .wt-dropdown{
    position:absolute;
    top:100%;
    left:0;
    transform:translateY(10px);
    min-width:240px;
    background:#fff;
    border-radius:14px;
    box-shadow:var(--shadow);
    padding:10px;
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transition:opacity .22s ease, transform .22s ease;
    border:1px solid #dce9ff;
    list-style:none;
    margin:0;
  }
  .wt-menu > li:hover .wt-dropdown{
    opacity:1; visibility:visible; pointer-events:auto; transform:translateY(0);
  }
  .wt-dropdown li a{
    display:flex;
    align-items:center;
    gap:10px;
    text-decoration:none;
    color:var(--ink);
    font-size:14px;
    font-weight:600;
    padding:10px 12px;
    border-radius:8px;
    border-left:2px solid transparent;
    transition:background .18s ease, border-color .18s ease;
  }
  .wt-dropdown li a:hover{ background:var(--panel); border-left-color:var(--gold-500); }


  /* ===== NEW MENU ADDITIONS ===== */
  .wt-menu > li.wt-mega-host{ position:static; }
  .wt-menu > li.wt-mega-host > .wt-mega{
    left:50%;
    transform:translate(-50%,10px);
    width:min(1080px, 94vw);
    grid-template-columns:repeat(4,1fr);
  }
  .wt-menu > li.wt-mega-host:hover > .wt-mega{ transform:translate(-50%,0); }
  .wt-mega .wt-mega-feature{ grid-column:4; grid-row:1; }

  .wt-mega-col-head{
    display:flex; align-items:center; gap:10px;
    text-decoration:none; margin:0 0 12px; padding:10px 12px;
    border-radius:10px; background:var(--panel);
    border:1px solid #e6eefb;
    transition:border-color .18s ease, background .18s ease;
  }
  .wt-mega-col-head:hover{ border-color:var(--gold-500); background:#fff; }
  .wt-mega-ico{
    width:34px;height:34px;border-radius:9px;flex-shrink:0;
    display:flex;align-items:center;justify-content:center;color:#fff;
  }
  .wt-mega-ico svg{ width:18px;height:18px; }
  .ico-sap{ background:linear-gradient(135deg,var(--navy-700),var(--navy-900)); }
  .ico-einv{ background:linear-gradient(135deg,#a5d66a,var(--leaf)); }
  .ico-hrms{ background:linear-gradient(135deg,var(--gold-300),var(--gold-500)); }
  .wt-mega-col-head strong{
    display:block; font-family:'Sora',sans-serif; font-size:14px; color:var(--navy-900); line-height:1.2;
  }
  .wt-mega-col-head small{ display:block; font-size:11.5px; color:var(--muted); font-weight:500; margin-top:2px; }
  .wt-mega ul.wt-sub-list{ margin:0; }

  .wt-menu > li > a.wt-plain::after{ left:16px; right:16px; }

  /* Mobile extras */
  .wt-mobile-accordion > li > a.wt-mobile-link{
    display:block; color:#fff; text-decoration:none; font-size:15px; font-weight:700; padding:16px 4px;
  }
  .wt-mobile-group{
    font-family:'Sora',sans-serif; font-size:11px; font-weight:700; text-transform:uppercase;
    letter-spacing:.08em; color:var(--gold-500); padding:12px 10px 4px;
  }
  .wt-mobile-group a{ color:var(--gold-500)!important; padding:0!important; font-size:11px!important; font-weight:700!important; }
  .wt-mobile-group a:hover{ background:none!important; }
  .wt-mobile-accordion > li.open .wt-mobile-sub.tall{ max-height:900px; }

  /* ===== RESPONSIVE ===== */
  @media (max-width:1080px){
    .wt-menu, .wt-actions .wt-btn-ghost{ display:none; }
    .wt-burger{ display:flex; }
    .wt-nav-inner{ height:68px; }
  }

  /* Mobile panel */
  .wt-mobile{
    position:fixed;
    inset:0 0 0 auto;
    width:min(340px,86vw);
    background:var(--navy-900);
    transform:translateX(100%);
    transition:transform .3s ease;
    z-index:300;
    overflow-y:auto;
    padding:22px;
  }
  .wt-mobile.open{ transform:translateX(0); }
  .wt-mobile-overlay{
    position:fixed; inset:0; background:rgba(13,31,77,.55);
    opacity:0; visibility:hidden; transition:opacity .3s ease;
    z-index:290;
  }
  .wt-mobile-overlay.open{ opacity:1; visibility:visible; }
  .wt-mobile-top{ display:flex; justify-content:space-between; align-items:center; margin-bottom:18px; }
  .wt-mobile-close{ background:none; border:none; color:#fff; font-size:22px; cursor:pointer; }
  .wt-mobile-accordion{ list-style:none; margin:0; padding:0; }
  .wt-mobile-accordion > li{ border-bottom:1px solid var(--line); }
  .wt-mobile-accordion > li > button{
    width:100%; display:flex; justify-content:space-between; align-items:center;
    background:none; border:none; color:#fff; font-family:'Manrope',sans-serif;
    font-size:15px; font-weight:700; padding:16px 4px; cursor:pointer;
  }
  .wt-mobile-accordion .wt-caret{ color:#b4c8e2; }
  .wt-mobile-sub{
    list-style:none; margin:0; padding:0 0 12px 4px;
    max-height:0; overflow:hidden; transition:max-height .28s ease;
  }
  .wt-mobile-accordion > li.open .wt-mobile-sub{ max-height:600px; }
  .wt-mobile-sub a{
    display:block; color:#b4c8e2; text-decoration:none; font-size:13.5px;
    font-weight:600; padding:8px 10px; border-radius:6px;
  }
  .wt-mobile-sub a:hover{ background:rgba(255,255,255,.06); color:#fff; }
  .wt-mobile-cta{ margin-top:20px; display:flex; flex-direction:column; gap:10px; }

  /* ===== Site integration ===== */
  .wt-topbar, .wt-nav, .wt-mobile{ font-family:'Manrope',sans-serif; }
  .wt-nav{ position:sticky; top:0; transition:box-shadow .2s ease; }
  .wt-nav.scrolled{ box-shadow:0 10px 24px -12px rgba(13,31,77,.55); }
  .wt-mega a.wt-mega-link.is-current{ background:var(--panel); border-left-color:var(--gold-500); color:var(--navy-800); }
  .wt-mega a.wt-mega-link.is-current .dot{ background:var(--gold-500); }
  .wt-mega-col-head.is-current{ border-color:var(--gold-500); background:#fff; }
  .wt-mobile-sub a.is-current{ color:#fff; background:rgba(255,255,255,.08); }
  .wt-dropdown li a.is-current{ background:var(--panel); border-left-color:var(--gold-500); color:var(--navy-800); }
  /* keep the menu's own fonts/colours on pages whose stylesheets style bare a / button / h4 */
  .wt-nav a, .wt-mobile a, .wt-topbar a{ text-decoration:none; }
  .wt-nav button, .wt-mobile button, .wt-topbar button, .wt-topbar input{ font-family:'Manrope',sans-serif; }
  .wt-mega-feature h4, .wt-mega-col-head strong{ font-family:'Sora',sans-serif; }

  /* ===== Mega menu sizes ===== */
  .wt-menu > li.wt-mega-host > .wt-mega.cols-3{ grid-template-columns:repeat(3,1fr); width:min(860px,94vw); }
  .wt-mega.cols-3 .wt-mega-feature{ grid-column:3; }
  .wt-mega-badge{ font-family:'Sora',sans-serif; font-size:12px; font-weight:800; letter-spacing:.04em; }
  .ico-uae{ background:linear-gradient(135deg,#1f9d55,#0d6b3a); }
  .ico-oman{ background:linear-gradient(135deg,#d63a3a,#9b1c1c); }
  .ico-ksa{ background:linear-gradient(135deg,#0f7a4a,#0d1f4d); }
  .wt-menu > li > a{ white-space:nowrap; }
  @media (max-width:1240px){ .wt-menu > li > a{ padding:10px 11px; font-size:14px; } .wt-menu > li > a::after{ left:11px; right:11px; } .wt-nav-inner{ padding:0 20px; } }
  .wt-topbar-search input[type=search]{ -webkit-appearance:none; appearance:none; background:transparent; }
  .wt-topbar-search input[type=search]::-webkit-search-cancel-button{ display:none; }

  /* ===== Shared site footer (works with or without Tailwind) ===== */
  .wt-sf{ background:var(--navy-900); color:#b4c8e2; font-family:'Manrope',sans-serif; font-size:13.5px; }
  .wt-sf a{ color:#b4c8e2; text-decoration:none; transition:color .15s ease; }
  .wt-sf a:hover{ color:var(--gold-300); }
  .wt-sf-inner{ max-width:1280px; margin:0 auto; padding:56px 24px 28px; display:grid; grid-template-columns:1.4fr repeat(5,1fr); gap:32px; }
  .wt-sf-brand p{ margin:14px 0 18px; line-height:1.6; max-width:260px; }
  .wt-sf-logo{ display:inline-flex; align-items:center; background:#fff; border-radius:9px; padding:6px 12px; }
  .wt-sf-logo img{ height:28px; width:auto; display:block; }
  .wt-sf h5{ font-family:'Sora',sans-serif; color:#fff; font-size:13px; letter-spacing:.06em; text-transform:uppercase; margin:4px 0 14px; }
  .wt-sf ul{ list-style:none; margin:0; padding:0; }
  .wt-sf li{ margin:0 0 9px; }
  .wt-sf-contact{ display:flex; flex-direction:column; gap:8px; }
  .wt-sf-contact a{ display:inline-flex; align-items:center; gap:8px; color:#fff; font-weight:700; }
  .wt-sf-social{ display:flex; gap:8px; margin-top:16px; }
  .wt-sf-social a{ width:34px; height:34px; border-radius:50%; border:1px solid rgba(255,255,255,.18); display:flex; align-items:center; justify-content:center; }
  .wt-sf-social a:hover{ background:var(--gold-500); border-color:var(--gold-500); color:var(--navy-900); }
  .wt-sf-social svg{ width:15px; height:15px; fill:currentColor; }
  .wt-sf-bottom{ border-top:1px solid rgba(255,255,255,.1); }
  .wt-sf-bottom div{ max-width:1280px; margin:0 auto; padding:18px 24px; display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; font-size:12.5px; }
  .wt-sf-bottom nav{ display:flex; gap:18px; flex-wrap:wrap; }
  @media (max-width:1024px){ .wt-sf-inner{ grid-template-columns:repeat(3,1fr); } .wt-sf-brand{ grid-column:1 / -1; } }
  @media (max-width:560px){ .wt-sf-inner{ grid-template-columns:1fr 1fr; gap:26px 18px; padding-top:40px; } }

  /* ===== Shared form styles ===== */
  .wt-form{ display:grid; grid-template-columns:1fr 1fr; gap:14px; font-family:'Inter','Manrope',sans-serif; }
  .wt-form .full{ grid-column:1 / -1; }
  .wt-form label{ display:block; font-size:12.5px; font-weight:600; color:#33475C; margin-bottom:6px; }
  .wt-form label .req{ color:#ba1a1a; }
  .wt-form input, .wt-form select, .wt-form textarea{ width:100%; border:1.5px solid #d5dce6; border-radius:10px; padding:11px 13px; font:inherit; font-size:14px; color:#0b1c30; background:#fff; transition:border-color .15s ease, box-shadow .15s ease; }
  .wt-form textarea{ min-height:110px; resize:vertical; }
  .wt-form input:focus, .wt-form select:focus, .wt-form textarea:focus{ outline:none; border-color:#4F46E5; box-shadow:0 0 0 3px rgba(79,70,229,.12); }
  .wt-form .err{ display:none; font-size:11.5px; color:#ba1a1a; margin-top:5px; }
  .wt-form .field.invalid input, .wt-form .field.invalid select, .wt-form .field.invalid textarea{ border-color:#ba1a1a; }
  .wt-form .field.invalid .err{ display:block; }
  .wt-form .check{ display:flex; gap:10px; align-items:flex-start; font-size:12.5px; color:#33475C; font-weight:500; }
  .wt-form .check input{ width:auto; margin-top:2px; }
  .wt-form button[type=submit]{ grid-column:1 / -1; border:none; cursor:pointer; background:#31AD9C; color:#fff; font-weight:700; font-size:14.5px; padding:13px 18px; border-radius:10px; box-shadow:0 8px 18px -6px rgba(49,173,156,.55); transition:transform .2s ease; }
  .wt-form button[type=submit]:hover{ transform:translateY(-2px); }
  .wt-form button[disabled]{ opacity:.6; cursor:wait; }
  .wt-form .hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
  .wt-form-note{ font-size:12px; color:#64748b; margin-top:10px; }
  .wt-form-status{ grid-column:1 / -1; display:none; border-radius:10px; padding:12px 14px; font-size:13.5px; font-weight:600; }
  .wt-form-status.ok{ display:block; background:rgba(49,173,156,.1); color:#1f7a6d; }
  .wt-form-status.fail{ display:block; background:rgba(186,26,26,.08); color:#ba1a1a; }
  @media (max-width:640px){ .wt-form{ grid-template-columns:1fr; } }