*,
 *::before,
 *::after {
   box-sizing: border-box;
   margin: 0;
   padding: 0;
 }

 body {
   font-family: 'Poppins', sans-serif;
   /* background: #e8eef5; */
   min-height: 100vh;
 }

 /* OWL SVG (reusable inline) */
 .owl-svg {
   width: 48px;
   height: 48px;
   flex-shrink: 0;
 }

 /* NAVBAR SHELL */
 .velan-nav {
   background: #1560c8;
   display: flex;
   align-items: stretch;
   height: 100%;
   position: sticky;
   padding: 0px 0px;
   top: 0;
   z-index: 2000;
   overflow: visible;
 }

 /* ── Brand ── */
 .brand {
   display: flex;
   align-items: center;
   gap: 10px;
   padding: 0 28px 0 20px;
   flex-shrink: 0;
   text-decoration: none;
   z-index: 2;
 }

 .brand-name {
   font-size: 22px;
   font-weight: 700;
   color: #fff;
   letter-spacing: 3px;
   line-height: 1.1;
 }

 .brand-tagline {
   font-size: 8px;
   color: rgba(255, 255, 255, .72);
   letter-spacing: 1.2px;
   text-transform: uppercase;
 }

 /* ── Hamburger (mobile/tablet only) ── */
 .hamburger {
   display: none;
   align-items: center;
   justify-content: center;
   width: 48px;
   cursor: pointer;
   color: #fff;
   margin-left: auto;
   flex-shrink: 0;
   background: none;
   border: none;
   padding: 0 14px;
 }

 .hamburger svg {
   pointer-events: none;
 }

 /* ══════════════════════════════════════════════
       DESKTOP NAV LIST
    ══════════════════════════════════════════════ */
 .nav-list {
   display: flex;
   align-items: stretch;
   flex: 1;
   list-style: none;
 }

 .nav-item {
   position: static;
   display: flex;
   align-items: center;
 }

 /* Skewed white BG on hover/active */
 .nav-item::before {
   content: '';
   position: absolute;
   top: 0;
   bottom: 0;
   left: 0;
   right: 0;
   /* background: #fff; */
   transform: skewX(-14deg);
   opacity: 0;
   transition: opacity .18s ease;
   pointer-events: none;
   z-index: 0;
 }

 /* We need position:relative on each li for pseudo to work */
 .nav-list>.nav-item {
   position: relative;
 }

 .nav-item:hover::before {
   background-color: #fff;
   color: #1a2a4a;
 }

 .nav-list>.nav-item:hover::before,
 .nav-list>.nav-item.active::before {
   opacity: 1;
 }

 .mega-nav-link {
   position: relative;
   z-index: 1;
   display: flex;
   align-items: center;
   gap: 5px;
   padding: 30px 22px;
   height: 100%;
   font-size: 12px;
   font-weight: 600;
   color: rgba(255, 255, 255, .92);
   text-transform: uppercase;
   letter-spacing: 0.5px;
   white-space: nowrap;
   text-decoration: none;
   transition: color .18s;
   cursor: pointer;
   user-select: none;
 }

 .nav-list>.nav-item:hover>.mega-nav-link,
 .nav-list>.nav-item.active>.mega-nav-link {
   color: #1a2a4a;
   /* background-color: #fff; */
 }

 /* Dividers */
 .nav-list>.nav-item+.nav-item>.mega-nav-link::before {
   content: '';
   position: absolute;
   left: 0;
   top: 0%;
   height: 100%;
   width: 1px;
   background: rgba(255, 255, 255, .28);
   transition: opacity .18s;
   transform: skewX(-14deg);
 }

 .nav-list>.nav-item:hover>.mega-nav-link::before,
 .nav-list>.nav-item.active>.mega-nav-link::before,
 .nav-list>.nav-item:hover+.nav-item>.mega-nav-link::before {
   opacity: 0;
 }

 /* Caret */
 .caret {
   width: 10px;
   height: 10px;
   flex-shrink: 0;
   transition: transform .2s;
 }

 .nav-list>.nav-item:hover .caret {
   transform: rotate(180deg);
 }

 /* ══════════════════════════════════════════════
       MEGA MENU (desktop)
    ══════════════════════════════════════════════ */

 /* .mega-wrap {
   display: none;
   position: absolute;
   top: 100%;
   left: -126%;
   width: 67vw;
   background: #fff;
   box-shadow: 0 10px 40px rgba(0, 0, 0, .15);
   z-index: 1999;
 } */

 .mega-wrap {
   display: none;
   position: absolute;
   top: 100%;
   left: 52%;
   transform: translateX(-53%);
   width: 1110px;
   /* or 90vw */
   /* max-width: 95vw; */
   background: #fff;
   box-shadow: 0 10px 40px rgba(0, 0, 0, .15);
   z-index: 1999;
 }

 .mega-wrap.mega-wrap-ITservices {
   display: none;
   position: absolute;
   top: 100%;
   left: 48%;
   transform: translateX(-22%);
   width: 1150px;
   /* max-width: 90vw; */
   background: #fff;
   box-shadow: 0 10px 40px rgba(0, 0, 0, .15);
   z-index: 1999;
 }

 .nav-list>.nav-item:hover .mega-wrap {
   display: flex;
 }

 .mega-inner {
   display: flex;
   width: 100%;
   min-height: 360px;
 }

 /* Sidebar */
 .mega-sidebar {
   width: 255px;
   min-width: 255px;
   background: #fff;
   padding: 0px 0;
   border-right: 1px solid #dde5f0;
   flex-shrink: 0;
 }

 .si {
   padding: 13px 18px;
   cursor: pointer;
   border-bottom: 2px solid rgba(4, 121, 201, 0.1);
   transition: all .18s;
 }

 .si:hover,
 .si.active {
   background: rgba(4, 121, 201, 0.1);
   /* border-left-color: #1560c8; */
 }

 .si-title {
   font-size: 14px;
   font-weight: 600;
   color: #0065AA;
   display: flex;
   align-items: center;
   justify-content: space-between;
 }

 .si-sub {
   font-size: 12px;
   color: rgba(0, 0, 0, 0.5);
   margin-top: 2px;
 }

 /* Content */
 .mega-content {
   flex: 1;
   padding: 22px 28px;
   overflow: auto;
 }

 .panel {
   display: none;
 }

 .panel.active {
   display: block;
 }

 .panel-title {
   font-size: 17px;
   font-weight: 600;
   color: #1a2a4a;
   margin-bottom: 16px;
   padding-bottom: 10px;
   border-bottom: 2px solid #e8eef8;
 }

 .cards-row {
   display: flex;
   gap: 12px;
   /* flex-wrap: wrap; */
   overflow: auto;
   padding-bottom: 15px;
 }

 .scard {
   min-width: 148px;
   border-radius: 6px;
   overflow: hidden;
   cursor: pointer;
   position: relative;
   box-shadow: 0 2px 10px rgba(0, 0, 0, .12);
   transition: transform .2s, box-shadow .2s;
 }

 .scard:hover {
   transform: translateY(-4px);
   box-shadow: 0 8px 24px rgba(21, 96, 189, .25);
 }

 .scard-img {
   width: 100%;
   min-height: 150px !important;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 32px;
   max-width: 155px;
 }

 .scard-arrow {
   position: absolute;
   bottom: 8px;
   right: 8px;
   /* background: #1560c8; */
   border-radius: 50%;
   width: 26px;
   height: 26px;
   display: flex;
   align-items: center;
   justify-content: center;
 }

 .scard-arrow svg {
   width: 13px;
   height: 13px;
   fill: #fff;
 }

 .see-all {
   display: flex;
   align-items: center;
   justify-content: space-between;
   margin-top: 18px;
   padding: 12px 16px;
   background: #f4f7fb;
   border-left: 4px solid #0065AA;
   border-radius: 3px;
   text-decoration: none;
   font-size: 13px;
   font-weight: 600;
   color: #0065AA;
   transition: background .18s;
 }

 .see-all:hover {
   background: #e0ebff;
 }

 /* Simple dropdown */
 .simple-drop {
   display: none;
   position: absolute;
   top: 100%;
   background: #fff;
   min-width: 210px;
   box-shadow: 0 8px 28px rgba(0, 0, 0, .13);
   /* border-top: 3px solid #1560c8; */
   z-index: 1999;
   padding: 8px 0;
   border-radius: 0 0 6px 6px;
 }

 .nav-list>.nav-item:hover .simple-drop {
   display: block;
 }

 .simple-drop a {
   display: block;
   padding: 10px 18px;
   font-size: 11.5px;
   font-weight: 500;
   color: #1a2a4a;
   text-decoration: none;
   text-transform: uppercase;
   letter-spacing: .4px;
   transition: background .15s, color .15s;
 }

 .simple-drop a:hover {
   background: rgba(4, 121, 201, 0.1);
   color: #0065AA;
 }

 /* ══════════════════════════════════════════════
       MOBILE DRAWER
    ══════════════════════════════════════════════ */
 .mobile-drawer {
   display: none;
   position: fixed;
   top: 70px;
   left: 0;
   width: 100%;
   height: calc(100vh - 70px);
   background: #fff;
   z-index: 1998;
   overflow-y: auto;
   transform: translateX(-100%);
   transition: transform .28s ease;
 }

 .mobile-drawer.open {
   transform: translateX(0);
 }

 /* Mobile accordion items */
 .mob-item {
   border-bottom: 1px solid #e8eef5;
 }

 .mob-header {
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 15px 20px;
   font-size: 16px;
   font-weight: 600;
   color: #1a2a4a;
   text-transform: uppercase;
   letter-spacing: .5px;
   cursor: pointer;
   user-select: none;
   transition: background .15s;
   background-color: #fff;
 }

 .fs-14 {
   font-size: 14px;
 }

 .mob-header:hover {
   background: #f4f7fb;
 }

 .mob-header.active {
   color: #0065AA;
   background: #f0f5ff;
 }

 .mob-caret {
   width: 18px;
   height: 18px;
   flex-shrink: 0;
   transition: transform .22s;
   color: #0065AA;
 }

 .mob-header.active .mob-caret {
   transform: rotate(180deg);
 }

 .mob-body {
   display: none;
   background: #fafbff;
 }

 .mob-body.open {
   display: block;
 }

 /* Mobile simple links */
 .mob-body a {
   display: block;
   padding: 0px 0px;
   font-size: 12px;
   font-weight: 500;
   color: #0065AA;
   text-decoration: none;
   letter-spacing: .3px;
   border-bottom: 1px solid #eef1f8;
   transition: color .15s, background .15s;
 }

 .mob-body .mob-see-all {
   display: block;
   padding: 15px 20px;
   font-size: 12px;
   font-weight: 500;
   color: #0065AA;
   text-decoration: none;
   letter-spacing: .3px;
   border-bottom: 1px solid #eef1f8;
   transition: color .15s, background .15s;
 }

 .mob-body a:last-child {
   border-bottom: none;
 }

 .mob-body a:hover {
   color: #0065AA;
   background: rgba(4, 121, 201, 0.1);
 }

 /* Mobile mega accordion */
 .mob-mega-item {
   border-bottom: 1px solid #eef1f8;
 }

 .mob-mega-header {
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 12px 32px;
   font-size: 12px;
   font-weight: 600;
   color: #0065AA;
   cursor: pointer;
   user-select: none;
   transition: background .15s;
 }

 .mob-mega-header:hover {
   background: #e8f0ff;
 }

 .mob-mega-header.active {
   background: rgba(4, 121, 201, 0.1);
 }

 .mob-mega-sub {
   font-size: 10px;
   color: #6b7a99;
   font-weight: 400;
   margin-top: 1px;
 }

 .mob-mega-caret {
   width: 14px;
   height: 14px;
   flex-shrink: 0;
   transition: transform .2s;
 }

 .mob-mega-header.active .mob-mega-caret {
   transform: rotate(180deg);
 }

 .mob-mega-body {
   display: none;
   background: #f8faff;
   padding: 0 0 8px 0;
 }

 .mob-mega-body.open {
   display: block;
 }

 /* Mobile cards (horizontal scroll) */
 .mob-cards {
   display: flex;
   gap: 10px;
   overflow-x: auto;
   padding: 12px 20px 4px 42px;
   scrollbar-width: thin;
 }

 .mob-scard {
   min-width: 110px;
   width: 110px;
   border-radius: 6px;
   overflow: hidden;
   flex-shrink: 0;
   box-shadow: 0 2px 8px rgba(0, 0, 0, .1);
   position: relative;
 }

 .mob-scard-img {
   width: 100%;
   height: 100px;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 24px;
 }

 .mob-scard-arrow {
   position: absolute;
   bottom: 5px;
   right: 5px;
   background: #1560c8;
   border-radius: 50%;
   width: 20px;
   height: 20px;
   display: flex;
   align-items: center;
   justify-content: center;
 }

 .mob-scard-arrow svg {
   width: 10px;
   height: 10px;
   fill: #fff;
 }

 .mob-see-all {
   display: flex;
   align-items: center;
   justify-content: space-between;
   margin: 6px 20px 4px 42px;
   padding: 10px 14px;
   background: #eef3ff;
   border-left: 3px solid #0065AA;
   border-radius: 3px;
   text-decoration: none;
   font-size: 11.5px;
   font-weight: 600;
   color: #0065AA;
 }

 /* Mobile search bar */
 .mob-search {
   display: flex;
   align-items: center;
   gap: 10px;
   padding: 14px 20px;
   border-bottom: 1px solid #e8eef5;
   background: #f4f7fb;
 }

 .mob-header a {
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 0px 0px;
   font-size: 16px;
   font-weight: 600;
   color: #1a2a4a;
   text-transform: uppercase;
   letter-spacing: .5px;
   cursor: pointer;
   user-select: none;
   transition: background .15s;
   background-color: transparent;
 }

 .mob-search input {
   flex: 1;
   border: 1px solid #d0daf0;
   border-radius: 6px;
   padding: 9px 14px;
   font-size: 13px;
   font-family: 'Poppins', sans-serif;
   outline: none;
   color: #1a2a4a;
 }

 .mob-search input:focus {
   border-color: #0065AA;
 }

 /* Overlay */
 /* .drawer-overlay {
   display: none;
   position: fixed;
   inset: 0;
   background: rgba(0, 0, 0, .35);
   z-index: 1997;
 }

 .drawer-overlay.open {
   display: block;
 } */

 .s_card_caption {
   display: flex;
   position: absolute;
   align-items: center;
   top: 0;
   bottom: 0;
   left: 0;
   right: 0;
   justify-content: center;
   background-color: #00000094;
   color: #fff;
   margin-bottom: 0px;
   padding: 0px 5px;
   font-weight: 500;
   text-align: center;
 }


 #ni-managed .si-title a {
   color: #0065AA;
 }

 /* RESPONSIVE BREAKPOINTS */

 /* Tablet: <= 1100px */

 @media screen and (max-width: 1199px) {

   .nav-list,
   .nav-search {
     display: none;
   }

   .hamburger {
     display: flex;
   }

   .mobile-drawer {
     display: block;
   }
 }

 /* Mobile: <= 640px */

 @media (max-width: 1199px) {
   .brand-name {
     font-size: 18px;
     letter-spacing: 2px;
   }

   .owl-svg {
     width: 40px;
     height: 40px;
   }

   .velan-nav {
     height: 60px;
   }

   .mobile-drawer {
     top: 60px;
     height: calc(100vh - 60px);
   }

   .mega-wrap,
   .simple-drop {
     top: 60px;
   }

   .mob-body .mob-a-small {
     padding: 15px 24px !important;
   }
 }

 @media screen and (max-width: 991px) {
   .copy-bg .header-top-mail a {
     justify-content: center;
   }
 }

 @media screen and (max-width: 767px) {
   .copy-bg .soc-icons {
     justify-content: center !important;
   }
 }

 @media screen and (min-width: 1200px) and (max-width: 1399px) {
   .mega-nav-link {
     padding: 30px 15px !important;
   }
 }