/* .top-bar .inner {right: 0;} */
.header-in { position:sticky; min-height: var(--body-margin); height: auto;}
/* .top-bar .nCount {right: -16px;border-radius: 50%;font-size: 9px;padding: 0px 7px;line-height: 24px;}
.top-bar .h-list > li {margin-right: 30px;} */
.login-links li{margin-right: 40px;}
.login-links li:last-child{margin-right: 0;}
.login-links li a.signup-btn {display: inline-block;background-color: var(--primary-color);border-radius: 30px;font-size: 13px;color: #fff;padding: 13px 24px;border: 0;transition: .3s;}
.login-links li a.signup-btn:hover {background-color: #0154b5;}

.header-login {
  padding: 0 65px;
  background-color: #fff;
}
.header-login .navbar {
  padding: 16px 0;
}
.pf-img{
  height: 40px;
  width: 40px;
}

/* Header Search */
.header-search-form-wrapper {position: absolute;right: 0;top:50%;transform: translateY(-50%);}

/* .hide-ul-items:before {
  content: '';
  width: 100%;
  margin: 0;
  padding: 0;
  background-color: #000;
  opacity: 0.8;
} */
/*
 .search-bx-open {
  width: 480px!important;
  max-width: 480px!important;
  transition: all .5s;
} */

.gsearch{
  background-color: #fff;
  position: absolute;
  width: 100%;
  border-radius: 0 0 7px 7px;
  box-shadow: 0 11px 15px rgba(0, 0, 0, 0.1);
  top: 61px;
}
.lis {
  list-style: none;
  /* margin-left: 14px;
  padding: 0; */
  padding: 0 10px 0 10px;
}

.lis li {
  font-weight: 600;
  color: rgba(54, 69, 79, .8);
  margin-bottom: 4px;
  font-size: 15px;
  cursor: pointer;
}
.lis li:hover{background-color: var(--sk-primary, #1866ee); color: #fff;}

.g-cross{
  width: 20px;
  height: 20px;
  display: block;
  border-radius: 50%;
  background-color: #666;
  text-align: center;
  line-height: 23px;
  font-size: 12px;
  color: #fff;
  margin: -4px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
/* .g-cross:hover{background-color: #666;color: #fff;} */
.v-all{
  font-weight: 600;
  color: rgba(54, 69, 79, .8);
  margin-bottom: 4px;
  font-size: 16px;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
}
.srch-img{
  height: 40px;
  width: 40px;
  border-radius: 50%;
  border: 2px solid #d1cece;
}

/** Search Dropdown **/
/* .gsearch{background-color: #f1f1f1;}
.gsearch ul.lis{max-height: 320px;overflow: auto;} */
.gsearch ul.lis li{font-size: 14px;font-weight: 400;color: #000;padding: 5px;margin: 0;border-radius: 4px;margin-bottom:2px;position: relative;padding-left: 55px;min-height: 50px;padding-top: 13px;}
.gsearch ul.lis li:hover{background-color: #e5e5e5;}
.gsearch li .img-con{position: absolute;left: 5px;top: 5px;}
.gsearch .v-all{background-color: var(--primary-color);margin: 0;padding: 10px;border-radius: 0 0 5px 5px;color: #fff;font-size: 14px;border: 0;}

.profile-element .dropdown-menu{width: 300px;padding: 12px 18px;border-radius: 0 0 7px 7px;box-shadow: 0 11px 15px rgba(0, 0, 0, 0.1);border: 0;top: 14px !important;}
.dropdown-user{font-size: 14px;color:#153D77;font-weight: 500;}
.dropdown-user-mail{font-size: 14px;color:var(--sk-muted)}
.dropdown-user-nick{display: inline-block;background-color: #E7F0FD;padding: 2px 8px;border-radius: 30px;border: 1px solid #B6D1FA;font-size: 12px;color: #136AEF;}
.dropdown-user-wrapper .complete{display: inline-block;font-size: 14px;font-weight: 500;color: #136AEF;}
.profile-element .dropdown-menu li{margin-bottom: 12px;}
.profile-element .dropdown-menu li:last-child{margin-bottom: 0;}
.profile-element .dropdown-item{position: relative;display: block;font-size: 16px;color:#0C2241;border: 1px solid #fff;border-radius: 6px;padding: 9px 20px 9px 44px;transition: .3s;}
.profile-element .dropdown-item .dd-img{position: absolute;left: 12px;top: 9px;width: 24px;height: 24px;background-repeat: no-repeat;background-position: top;transition: .3s;}
.profile-element .dropdown-item:hover, .profile-element .active .dropdown-item{background-color: #E7F0FD;color: #136AEF;border-color: #B6D1FA;}
.profile-element .dropdown-item:hover .dd-img, .profile-element .active .dropdown-item .dd-img{background-position: bottom;}
.dropdown-divider{border-top: 1px solid #E2E8F0;}

/* .rotating {
  position: relative;
}
.rotating:after {
	content: '';
	position: absolute;
	width: 100%;
	height: 100%;
	border-radius: 50%;
  padding: 16px;
	top: -11px;
	left: -11px;
	border: 5px solid blue;
	z-index: 1;
}

.rotating {
	box-shadow: 0 0 0 0 transparent;
	transition: box-shadow 0.2s;
}

.rotating:after {
	animation: spin 10s linear infinite;
}

@keyframes  spin {
	from {
		transform: rotate(0deg);
	}
	to {
		transform: rotate(360deg);
	}
} */

@keyframes spin {
  from {transform: translate(-50%, -50%) rotate(0);}
  to   {transform: translate(-50%, -50%) rotate(360deg);}
}
.rotating-border {
  overflow: hidden;
  padding: 0.3rem;
  border-radius: 100%;
  display: inline-block;
  transition: .3s;
}

.rotating-border:before {
  content: '';
  display: block;
  background: conic-gradient(#153D77, #1866EE, #FF6016, #FFB916, white);
  padding: 1rem;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border-radius: 100%;
  z-index: -2;
  animation: spin 5s linear infinite;
}
.rotating-border:after{
  content: '';
  position: absolute;
  inset: .12rem;
  background: white;
  z-index: -1;
  border-radius: calc(100% - 0.5rem);
}

@media(max-width:1650px){
  .hide-ul-items {
    visibility: hidden;
    opacity: 0;
    transition: all .2s;
  }
}


/* ---------- End .rotating-border ---------- */

.searchModal .modal-body{min-height: 300px;}

/** Mobile menu **/
.offcanvas-body{padding: 10px 0;}
.offcanvas-header{position: relative;background-color: #efefef;}
.menu-profile{display: flex;flex-direction: column;justify-content: center;position: relative;max-width: calc(100% - 80px);padding-left: 70px;min-height: 60px;padding-right: 10px;}
.menu-profile .img-con{position: absolute;left: 0;top: 0;}
.offcanvas-header h4{font-size: 16px;}
.menu-profile p{font-size: 14px;color: #595c73;}
.offcanvas-header .open-submenu{margin-left: auto;font-size: 20px;width: 30px; height: 30px;line-height: 30px;text-align: center;background-color: #ddd;border-radius: 4px;color: #fff;}
.offcanvas-header .btn-close{background-color: #fff;opacity: 1;border-radius: 50%;font-size: 12px;height: 20px; width: 20px;margin: 0;margin-left: 15px;}

.offcanvas-body .mobile-menu{border-bottom: 1px solid #d2d2d2;margin-bottom: 15px;}
.offcanvas-body .mobile-menu:last-child{border-bottom: 0;margin-bottom: 0;}
.mobile-menu h5{padding: 0 15px;margin-bottom: 10px;}
.mobile-menu ul{list-style: none;margin: 0;padding: 0;}
.mobile-menu ul li{width: 100%;margin-bottom: 5px;}
.mobile-menu ul li a{display: block;padding: 5px 15px;font-size: 16px;color: #000;}

/* ── Design System v2: nav active state + role CTA ──────────────────────── */
.navbar-nav .nav-link.active {
  color: var(--sk-primary) !important;
  font-weight: 600;
}
.sk-header-cta {
  align-items: center;
  gap: 6px;
  height: 40px;
  padding: 0 18px;
  margin-right: 22px;
  border-radius: var(--sk-radius-pill);
  background: var(--sk-primary);
  color: #fff !important;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  transition: background .15s ease, transform .12s ease;
  box-shadow: 0 6px 16px -6px color-mix(in srgb, var(--sk-primary) 65%, transparent);
}
.sk-header-cta:hover { background: var(--sk-primary-press); color: #fff !important; }
.sk-header-cta:active { transform: translateY(1px); }
.sk-header-cta .plus { font-size: 18px; line-height: 1; font-weight: 400; }

.offcanvas.offcanvas-end{left: 0;right: auto;transform: translateX(-100%);}
/* ── Signed-in nav: prevent wrapping + Discover dropdown ─────────────────── */
.navbar-nav .nav-link { white-space: nowrap; }
.sk-nav-drop-toggle { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; }
.sk-nav-drop-toggle .sk-icn { transition: transform .15s ease; }
.sk-nav-dropdown.show .sk-nav-drop-toggle .sk-icn { transform: rotate(180deg); }
/* We render our own chevron SVG — suppress Bootstrap's default ::after caret
   so the toggle doesn't show a second (double) arrow. */
.sk-nav-drop-toggle.dropdown-toggle::after,
.sk-nav-drop-toggle::after { display: none !important; }
.sk-nav-menu {
  padding: 8px; border: 1px solid var(--sk-line); border-radius: var(--sk-radius-sm);
  box-shadow: var(--sk-shadow-md); min-width: 190px; margin-top: 6px;
}
.sk-nav-menu .dropdown-item {
  border-radius: 8px; padding: 9px 12px; font-size: 14px; font-weight: 500; color: var(--sk-body);
}
.sk-nav-menu .dropdown-item:hover { background: var(--sk-primary-soft); color: var(--sk-primary); }
.sk-nav-menu .dropdown-item.active { background: var(--sk-primary-soft); color: var(--sk-primary); font-weight: 600; }

/* Accessible tap targets for the header icon actions (search/notifications).
   The bare <a> wrapping a 20px icon was ~8-20px — well under the 44px guideline. */
.h-list li a {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 42px; min-height: 42px; border-radius: 10px;
  /* Uniform icon tint so search / network / chat / bell all match (they were a
     mix of baked-colour PNGs and currentColor SVGs). */
  color: var(--sk-body, #41506c);
  transition: color .15s ease, background .15s ease;
}
.h-list li a:hover { background: rgba(21, 61, 119, 0.06); color: var(--sk-primary, #1866ee); }

/* ── Header-right: compact, vertically-centered icon row ─────────────────── */
.header-right { display: flex; align-items: center; }
.h-list {
  display: flex; align-items: center; gap: 2px;
  margin: 0; padding: 0; list-style: none;
}
.h-list li { display: flex; align-items: center; margin: 0; }
/* Anchor the unread-count badge to each icon button. */
.h-list li a { position: relative; }
.h-list li a .nCount {
  position: absolute; top: 4px; right: 4px;
  min-width: 16px; height: 16px; padding: 0 4px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 9px; font-weight: 700; line-height: 1; color: #fff;
  background: var(--sk-accent, #ff6016); border-radius: 999px;
  border: 1.5px solid #fff;
}
/* Compact spacing before the avatar (was ms-5 = 48px). */
.profile-element.ms-5 { margin-left: 10px !important; display: flex; align-items: center; }
.profile-element .pf-img { display: block; object-fit: cover; }

/* Post-a-requirement CTA inside the profile dropdown (org-only). */
.profile-element .dropdown-item.dd-cta {
  padding-left: 20px; color: var(--sk-primary); font-weight: 600;
  background: var(--sk-primary-soft); border-color: transparent;
}
.profile-element .dropdown-item.dd-cta:hover { background: var(--sk-primary); color: #fff; }
.profile-element .dropdown-item.dd-cta .dd-plus {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; margin-right: 10px; border-radius: 6px;
  background: var(--sk-primary); color: #fff; font-size: 15px; line-height: 1;
}
.profile-element .dropdown-item.dd-cta:hover .dd-plus { background: #fff; color: var(--sk-primary); }

/* ── Bulletproof header-right alignment (overrides above) ────────────────── */
.header-right,
.header-right .h-list,
.header-right .h-list li,
.header-right .profile-element { display: flex; align-items: center; }

.h-list li a {
  width: 40px; height: 40px; min-width: 40px; min-height: 40px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center; line-height: 0;
}
/* Force every utility icon to the same box so none sits high/low. */
.h-list li a svg { display: block; width: 20px; height: 20px; }

/* Avatar menu: same height as the icons, no stray Bootstrap caret below it. */
.profile-element.ms-5 { margin-left: 8px !important; }
.profile-element > a,
.profile-element .dropdown-toggle { display: inline-flex; align-items: center; line-height: 0; }
.profile-element .dropdown-toggle::after,
.profile-element > a::after { display: none !important; }
.profile-element .pf-img {
  width: 40px; height: 40px; border-radius: 50%; object-fit: cover;
  border: 1px solid var(--sk-line, #e2e9f3);
}

/* ── Beat the global (ViewEncapsulation.None) rules ──────────────────────────
   styles.css sets `header .h-list > li > a{display:block}` (higher specificity
   than a plain .h-list li a), which killed the flex centering and left the icon
   pinned to the top of its 40px box. Re-assert flex centering with a stronger
   selector so the icons sit dead-centre and line up with the avatar/tabs. */
.header-wrap { align-items: center; }
.header-right .h-list > li > a {
  display: inline-flex !important; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 10px; line-height: 0; padding: 0;
}
.header-right .h-list > li > a svg { display: block; width: 20px; height: 20px; }
.header-right .h-list { gap: 4px; }
.header-right .h-list .nCount {
  right: 2px; top: 2px; left: auto;
  width: 16px; height: 16px; min-width: 16px; line-height: 16px;
  font-size: 9px; border: 1.5px solid #fff; background: var(--sk-accent, #ff6016);
}

/* ── Inline (LinkedIn-style) header search dropdown ─────────────────────── */
.hdr-search-wrap { position: relative; }
.hdr-search-wrap .hdr-msg.active { color: var(--sk-primary); }
.hdr-search-dropdown {
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  width: min(560px, calc(100vw - 32px));
  background: var(--sk-surface, #fff);
  border: 1px solid var(--sk-line);
  border-radius: 14px;
  box-shadow: 0 16px 44px rgba(16, 32, 63, .18);
  z-index: 1200;
  overflow: hidden;
}
.hdr-search-dropdown .sm-inline { max-height: min(72vh, 620px); overflow-y: auto; }
.hdr-search-dropdown .sm-search { position: sticky; top: 0; background: var(--sk-surface, #fff); z-index: 1; }
@media (max-width: 575px) {
  .hdr-search-dropdown { position: fixed; top: 64px; left: 16px; right: 16px; width: auto; }
}