/*--------------- header css ----------------------*/
:root {
 --tl-navy: #0b1a3b;
 --tl-navy-2: #0f2350;
 --tl-blue: #2f5ce0;
 --tl-blue-light: #eef2ff;
 --tl-text: #1a1d29;
 --tl-text-muted: #6b7280;
 --tl-border: #edeef2;
 --tl-icon-bg: #eef1ff;
 --tl-icon-color: #4f5fe0;
 --tl-orange: #ff7a3d;
 --tl-pink: #ff3d7f;
 --tl-radius: 14px;
 --tl-header-h: 64px;
 --tl-mega-top: 125px;
}


.tl-header {
 top: 50px;
 left: 0;
 right: 0;
 z-index: 1000;
 background: rgba(255, 255, 255, .96);
 box-shadow: 0 1px 1px rgba(15, 35, 80, .08);
 backdrop-filter: blur(12px);
 position: absolute;
}

 .tl-header.tl-scrolled {
 position: fixed;
 top: 0;
 z-index: 99;
 background: linear-gradient(180deg, #F1F8FF 0%, #FFFFFF 100%);
 box-shadow: 0px 1px 1px 0px #FFCB8E80;
 }

.tl-navbar-inner {
 max-width: 1320px;
 margin: 0 auto;
 display: flex;
 align-items: center;
 gap: 90px;
 padding-left: 0.7rem;
 padding-right: 0.7rem;
}

.tl-mega-banner {
 max-width: 1345px;
 min-height: 81px;
 display: flex;
 align-items: center;
 justify-content: space-between;
 padding: 9px 30px;
 gap: 10px;
 border-radius: 24px;
 background: #081E69;
 text-decoration: none;
 margin: 10px auto 10px auto;
 text-align: center;
}

.tl-brand {
 display: flex;
 align-items: center;
 gap: 8px;
 flex: 0 0 auto;
 text-decoration: none;
}

.tl-brand-text {
 font-size: 19px;
 font-weight: 700;
 color: #12213f;
 letter-spacing: -.2px;
}

.tl-brand-logo {
 height: 40px;
 width: auto;
 display: block;
}

.tl-nav {
 flex: 1 1 auto;
 min-width: 0;
}

.tl-nav-list {
 list-style: none;
 margin: 0;
 padding: 0;
 display: flex;
 align-items: center;
 gap: 8px;
 justify-content: center;
 flex-wrap: nowrap;
}

.tl-nav-item {
 position: relative;
}

.tl-nav-link {
 border: 0;
 background: transparent;
 font-family: inherit;
 white-space: nowrap;
 display: flex;
 align-items: center;
 gap: 4px;
 padding: 20px 12px;
 font-size: 18px;
 font-weight: 400;
 color: #343A40;
 text-decoration: none;
 border-radius: 8px;
 transition: color .15s ease;
}

 .tl-nav-link:hover, .tl-nav-link.active, .tl-nav-item.tl-open .tl-nav-link {
 color: var(--tl-blue);
 }

.tl-chevron {
 font-size: 15px;
 transition: transform .2s ease;
}

.tl-nav-item.tl-open .tl-chevron,
.tl-nav-item.tl-open .tl-nav-link img {
 transform: rotate(180deg);
}

.tl-actions {
 display: flex;
 align-items: center;
 gap: 22px;
 flex: 0 0 auto;
}

.tl-support-link {
 display: flex;
 align-items: center;
 gap: 6px;
 font-size: 15px;
 font-weight: 400;
 color: #343A40;
 text-decoration: none;
 white-space: nowrap;
}

 .tl-support-link:hover {
 color: var(--tl-blue);
 }

 .tl-support-link i {
 font-size: 17px;
 }

.tl-mega-cards img {
 max-width: 100%;
}
/* ===== MEGA MENU - SAME MARKUP FOR EVERY BREAKPOINT =====
 Desktop (>=1200px): fixed full-width dropdown, opened on hover/click.
 Tablet/Mobile (<1200px): becomes a static accordion panel inside the
 same sliding <nav>, opened by tapping "Solutions". No separate HTML. */
.tl-mega {
 position: fixed;
 top: var(--tl-mega-top);
 left: 0;
 right: 0;
 z-index: 1001;
 background: #fff;
 border-top: 1px solid var(--tl-border);
 box-shadow: 0 24px 48px rgba(15,20,50,.14);
 opacity: 0;
 visibility: hidden;
 pointer-events: none;
 transform: translateY(-8px);
 transition: opacity .2s ease,transform .2s ease,visibility .2s;
 overflow-y: auto;
}

.tl-nav-item.tl-open .tl-mega {
 opacity: 1;
 visibility: visible;
 pointer-events: auto;
 transform: translateY(0);
}

.tl-mega-inner {
 max-width: 1380px;
 margin: 0 auto;
 padding: 15px 24px 0px;
 display: grid;
 grid-template-columns: 1.55fr 1fr 1fr;
 gap: 24px;
}

.tl-mega-label {
 display: block;
 font-size: 19px;
 font-weight: 600;
 font-family: 'Plus Jakarta Sans', sans-serif;
 color: #343A40;
 margin-bottom: 10px;
}

.tl-modules-grid {
 display: grid;
 grid-template-columns: 1fr 1fr;
 gap: 20px;
}

.tl-module-item {
 display: flex;
 align-items: center;
 gap: 10px;
 padding: 5px 7px;
 border-radius: 10px;
 border: 1px solid #ECF4FF;
 font-size: 14px;
 font-weight: 600;
 color: #000000;
 text-decoration: none;
 transition: background-color .15s ease, color .15s ease;
 font-family: 'Plus Jakarta Sans', sans-serif;
}

 .tl-module-item:hover, .tl-module-item.active {
 color: #1E40AF;
 box-shadow: 0px 4px 7px 0px #1E40AF14;
 }

.tl-module-icon {
 flex: 0 0 auto;
 width: 38px;
 height: 38px;
 display: flex;
 align-items: center;
 justify-content: center;
 border-radius: 9px;
 background: var(--tl-icon-bg);
 color: var(--tl-icon-color);
 font-size: 17px;
}

.tl-module-item:hover .tl-module-icon, .tl-module-item.active .tl-module-icon {
 background: #fff;
}

.tl-module-icon img {
 max-width: 100%;
}

.tl-mega-dark {
 padding: 8px 18px;
 color: #fff;
 width: 100%;
 max-width: 396px;
 border-left: 1px solid rgb(232 232 232);
}

.tl-dark-section h4 {
 margin: 0 0 10px;
 font-size: 15px;
 font-weight: 600;
 letter-spacing: .04em;
 text-transform: uppercase;
 color: #343A40;
 display: flex;
 align-items: center;
 gap: 15px;
 font-family: 'Plus Jakarta Sans', sans-serif;
 width: 100%;
 max-width: 360px;
}

.tl-dark-item {
 display: flex;
 align-items: center;
 justify-content: space-between;
 padding: 7px 10px;
 border-radius: 9px;
 font-size: 13px;
 font-weight: 500;
 color: #343A40;
 text-decoration: none;
 line-height: 20px;
 font-family: 'Plus Jakarta Sans', sans-serif;
}

 .tl-dark-item span {
 color: #343A40;
 font-size: 20px;
 }

 .tl-dark-item:hover {
 background: #F5F5F5;
 color: #1E40AF;
 }

 .tl-dark-item:hover span {
 color: #1E40AF;
 }


.tl-dark-divider {
 height: 1px;
 background: #d7d7d7;
 margin: 10px 0;
}

.tl-mega-cards {
 display: flex;
 flex-direction: column;
 gap: 7px;
 min-width: 0;
}

.tl-card {
 position: relative;
 display: block;
 border-radius: var(--tl-radius);
 overflow: hidden;
 text-decoration: none;
}

.tl-explore-mock {
 padding: 14px;
}

 .tl-explore-mock img {
 max-width: 100%;
 display: block;
 }

.tl-card-btn {
 position: absolute;
 left: 14px;
 right: 14px;
 bottom: 14px;
 display: inline-flex;
 align-items: center;
 justify-content: space-between;
 gap: 6px;
 background: #1E40AF;
 color: #FFFFFF;
 font-size: 12px;
 font-weight: 500;
 padding: 9px 20px;
 border-radius: 999px;
}

 .tl-card-btn:hover {
 color: #FFFFFF;
 }


.solhrsamvaadlogo {
 width: 154px;
 height: 60px;
 flex-shrink: 0;
 margin-left: 20px;
}

.tl-banner-btn {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 gap: 12px;
 width: 250px;
 height: 52px;
 padding: 14px 30px;
 border-radius: 52px;
 background: #fff;
 color: #2E2E2E;
 font-size: 16px;
 font-weight: 600;
 text-decoration: none;
 transition: .3s;
 flex-shrink: 0;
}

 .tl-banner-btn:hover {
 background: #000;
 color: #fff;
 }

 .tl-banner-btn svg {
 flex-shrink: 0;
 }

.tl-banner-text {
 flex: 1 1 auto;
 font-size: 21px;
 color: #FFFFFF;
 font-weight: 600;
 margin-left: 20px;
 line-height: 32px;
 font-family: 'Plus Jakarta Sans', sans-serif;
}

/* ===== Burger ===== */
.tl-burger {
 display: none;
 flex-direction: column;
 gap: 5px;
 cursor: pointer;
 padding: 6px;
 z-index: 1002;
}

.tl-burger-line {
 width: 22px;
 height: 2px;
 background: #1a1d29;
 border-radius: 2px;
 transition: transform .2s ease, opacity .2s ease;
}

.tl-burger.tl-open .tl-burger-line:nth-child(1) {
 transform: translateY(7px) rotate(45deg);
}

.tl-burger.tl-open .tl-burger-line:nth-child(2) {
 opacity: 0;
}

.tl-burger.tl-open .tl-burger-line:nth-child(3) {
 transform: translateY(-7px) rotate(-45deg);
}

/* dim backdrop, shared by nav on tablet/mobile */
tl-mega-cards
.tl-nav-overlay {
 display: none;
 position: fixed;
 inset: 0;
 background: rgba(10,14,30,.45);
 z-index: 1000;
 opacity: 0;
 transition: opacity .25s ease;
}

.tl-nav-overlay.tl-open {
 display: block;
 opacity: 1;
}

.tl-card-explore {
 padding: 0;
 width: 100%;
 max-width: 100%;
 background: #F8F7F8;
 border: 1px solid #E9E9E9;
}

.tl-explore-mock h4 {
 color: #000;
 font-size: 18px;
}

.tl-explore-mock p {
 color: #000;
 font-size: 14px;
}

/* ===== Sub-accordion: Modules / Products / Industries inside Solutions panel (mobile/tablet only) ===== */
.tl-accordion-arrow {
 display: none;
 flex-shrink: 0;
}

.tl-demo-btn {
 display: inline-flex;
 align-items: center;
 gap: 8px;
 padding: 12px 30px 12px;
 background: #000;
 color: #fff;
 border: 1px solid #000;
 text-decoration: none;
 border-radius: 50px;
 transition: all 0.3s ease;
 font-size: 16px;
 font-weight: 500;
}



 .tl-demo-btn:hover {
 background: #fff;
 color: #000 !important;
 border-color: #000;
 text-decoration: none;
 }

 .tl-demo-btn:hover svg {
 stroke: #000;
 }

.tl-dark-section h4 span {
 display: flex;
 align-items: center;
 column-gap: 10px;
}
@media (max-width:1399px) {
 .tl-navbar-inner {max-width: 1140px;}

}

@media (max-width:1300px) {
 .tl-nav-link{padding:5px 10px;}
 .tl-demo-btn{padding: 6px 18px 6px; font-size:14px;}
 .tl-navbar-inner {gap: 10px;padding: 10px 15px;}
}
@media (max-width:1199px) {
 .tl-navbar-inner {
 max-width: 960px;
 }
 .tl-mega-banner {
 display: none;
 }

 .solutions-link {
 display: none;
 }

 .tl-accordion-head {
 display: flex;
 align-items: center;
 justify-content: space-between;
 cursor: pointer;
 margin: 0;
 font-size: 16px;
 }

 .tl-mega-label.tl-accordion-head {
 padding: 12px 20px;
 border-bottom: 1px solid var(--tl-border);
 }

 .tl-dark-section h4.tl-accordion-head {
 padding: 12px 20px;
 border-bottom: 1px solid var(--tl-border);
 margin-bottom: 0;
 text-transform: capitalize;
 }

 .tl-accordion-arrow {
 display: inline-block;
 width: 16px;
 height: 16px;
 background: url(../images/headerdownarrowsol.svg) no-repeat center / contain;
 transition: transform .2s ease;
 }

 .tl-accordion-item.tl-sub-open > .tl-accordion-head .tl-accordion-arrow {
 transform: rotate(180deg);
 }

 .tl-accordion-body {
 display: none;
 padding: 10px 6px 14px;
 }

 .tl-accordion-item.tl-sub-open > .tl-accordion-body {
 display: block;
 }

 .tl-modules-grid.tl-accordion-body {
 grid-template-columns: 1fr;
 }
}

/* =========================================================
 RESPONSIVE - same DOM, different layout only
 >=1200px : desktop nav row + fixed-position mega dropdown
 <1200px : nav becomes an off-canvas panel; mega menu
 becomes a static, in-panel accordion section
 ========================================================= */
@media (max-width:1199px) {
 .tl-module-item {
 margin-top: 10px;
 }

 .tl-module-item:first-child {
 margin-top: 0;
 }

 .tl-header {
 background: #fff;
 top: 46px;
 }

 .tl-scrolled .tl-nav.tl-open {
 top: 59px;
 }

 .tl-navbar-inner {
 gap: 16px;
 padding: 10px 16px;
 }

 .tl-burger {
 display: flex;
 }

 .tl-nav {
 display: none;
 position: fixed !important;
 top: 0;
 right: 0;
 width: 86%;
 max-width: 360px;
 background: #fff;
 z-index: 1001;
 overflow-y: auto;
 transition: transform .28s ease;
 transform: translateX(0%);
 box-shadow: -12px 0 30px rgba(15,20,50,.14);
 padding-top: 16px;
 border-radius: 5px;
 }

 .tl-nav.tl-open {
 display: block;
 right: 5px !important;
 top: 105px;
 padding: 0px;
 overflow: visible;
 }

 .tl-accordion-head img {
 display: none;
 }

 .tl-nav-list {
 flex-direction: column;
 align-items: stretch;
 justify-content: flex-start;
 gap: 0;
 padding: 0px 0px 0px;
 max-height: 550px;
 min-height: 550px;
 }

 .tl-nav.tl-open:before {
 content: "";
 position: absolute;
 top: -39px;
 right: 11px;
 border: 20px solid transparent;
 border-bottom-color: #E0F2FF;
 }

 .tl-nav.tl-open:after {
 content: "";
 position: absolute;
 top: -31px;
 right: 15px;
 border: 16px solid transparent;
 border-bottom-color: #fff;
 z-index: 11;
 }

 .tl-nav-item {
 width: 100%;
 }

 .tl-nav-link {
 width: 100%;
 justify-content: space-between;
 padding: 12px 20px !important;
 font-size: 16px;
 border-bottom: 1px solid var(--tl-border);
 font-weight: 500;
 color: #363c42;
 border-radius: 0px;
 }

 /* mega menu -> shows directly inside the panel, no tap needed */
 .tl-mega {
 position: static;
 display: block;
 opacity: 1;
 visibility: visible;
 pointer-events: auto;
 transform: none;
 box-shadow: none;
 border-top: none;
 max-height: none;
 overflow: visible;
 background: #fff;
 border-radius: 12px;
 margin: 0px 0 0px;
 }

 /* "Solutions" is now just a static section label on mobile - not a click-to-open toggle */
 #tlSolutions .tl-nav-link {
 pointer-events: none;
 cursor: default;
 font-weight: 600;
 border-bottom: none;
 padding-bottom: 4px;
 }

 #tlSolutions .tl-nav-link img {
 display: none;
 }

 .tl-module-icon {
 width: 25px;
 height: 25px;
 }

 .tl-mega-inner {
 grid-template-columns: 1fr;
 gap: 0px;
 padding: 0px;
 }

 .tl-modules-grid {
 grid-template-columns: 1fr;
 gap: 10px;
 }

 .tl-mega-dark {
 max-width: 100%;
 border: none;
 padding: 0px;
 }

 .tl-dark-divider {
 display: none;
 }

 .tl-mega-cards {
 display: none;
 }

 .tl-mega-cards img {
 max-width: 100%;
 }

 .tl-mega-banner {
 flex-direction: column;
 text-align: center;
 padding: 16px;
 margin: 8px 10px 12px;
 }

 .tl-banner-text {
 margin-left: 0;
 font-size: 16px;
 line-height: 22px;
 }

 .tl-banner-btn {
 width: 100%;
 }

 /* actions row now lives inside the sliding nav panel too - same elements,
 just re-flowed at this breakpoint */
 .tl-actions {
 position: static;
 align-items: stretch;
 gap: 10px;
 margin-left: auto;
 }

 .tl-support-link {
 display: none;
 }

 .tl-demo-btn {
 justify-content: center;
 }
}

@media (min-width:1200px) {
 .tl-nav-overlay {
 display: none !important;
 }
}

/* Laptop / smaller desktop: keep mega menu but tighten layout */
@media (max-width:1400px) and (min-width:1200px) {
 .tl-mega-inner {
 grid-template-columns: 1.2fr 1fr 1fr;
 gap: 16px;
 padding: 15px 16px 0;
 }

 .tl-mega-dark {
 max-width: 340px;
 }

 .tl-mega-banner {
 max-width: 1164px;
 }
}

@media (max-width:991px) {
 .announcement-bar{padding-top:5px !important; padding-bottom:5px !important;}
 .announcement-text{font-size: 12px !important;}
 .tl-demo-btn svg {display: none;}
 .tl-navbar-inner {max-width: 720px;}
}

@media (max-width:767px) {
.announcement-text {font-size: 11px !important;}
.tl-brand-logo { width: 117px; }
.tl-nav.tl-open{top:93px;}
}
@media (max-width:600px) {
 .tl-modules-grid {
 grid-template-columns: 1fr;
 }
}

.tl-page-demo {
 max-width: 1280px;
 margin: 0 auto;
 padding: 60px 24px;
 color: var(--tl-text-muted);
 font-size: 14px;
}

/*mega menu end menu */

.announcement-bar {
 width: 100%;
 min-height: 44px;
 background: #0F72EE;
 padding-top: 12px;
 padding-right: 28px;
 padding-bottom: 12px;
 padding-left: 28px;
 display: flex;
 align-items: center;
 justify-content: center;
 flex-wrap: wrap;
 opacity: 1;
}

 .announcement-bar .content-wrap {
 display: flex;
 align-items: center;
 justify-content: center;
 gap: 8px;
 }
.badge-new {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 padding: 2px 12px;
 color: #fff;
 font-size: 12px;
 font-weight: 600;
 white-space: nowrap;
 letter-spacing: 0.3px;
 border: 2px solid transparent;
 border-radius: 20px;
 background: linear-gradient(#1967D2, #1967D2) padding-box, linear-gradient(270deg, #FBBE15 0%, #4CD4C8 100%) border-box;
}

.announcement-text {
 color: #FFFFFF;
 font-size: 16px;
 font-weight: 500;
 margin: 0;
 line-height: 24px;
 letter-spacing: 0%;
 text-align: center;
 font-family: 'Poppins', sans-serif;
}

 .announcement-text .highlight {
 font-weight: 500;
 }

.asterisk {
 color: #ff4d4f;
 font-weight: 700;
 margin-left: 2px;
}

/* Home header — Figma mobile reference 1503:31138. */
@media (min-width: 768px) {
 .tl-home-page .announcement-bar { display: none; }
 .tl-home-page .tl-header { top: 0; }
}

@media (max-width: 767px) {
 .tl-home-page .announcement-bar {
  min-height: 44px;
  padding: 9px 15px;
  background: linear-gradient(174deg, #0c5bbe 0%, #0f72ee 100%);
 }

 .tl-home-page .announcement-bar .content-wrap { gap: 8px; }

 .tl-home-page .announcement-bar .badge-new {
  min-width: 61px;
  min-height: 26px;
  padding: 5px 16px;
  border-radius: 60px;
  background: #0d64d1;
  border: 1px solid #fff;
  color: #fff;
  font: 500 13px/14px Poppins, Arial, sans-serif;
  letter-spacing: -.8px;
 }

 .tl-home-page .announcement-text {
  overflow: hidden;
  font: 500 13px/20px "Plus Jakarta Sans", Arial, sans-serif !important;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
 }

 .tl-home-page .tl-header { top: 44px; }

 .tl-home-page .tl-navbar-inner {
  min-height: 80px;
  padding: 18px 15px;
  gap: 0;
 }

 .tl-home-page .tl-brand-logo {
  width: 152px;
  height: 32px;
 }

 .tl-home-page .tl-actions {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-left: auto;
 }

 .tl-home-page .tl-actions .btn {
  display: inline-flex;
  width: 116px;
  align-items: center;
  justify-content: center;
  height: 44px;
  margin: 0;
  padding: 10px 22px;
  border: 0;
  border-radius: 52px;
  background: #030303;
  color: #fff;
  font: 500 12px/normal "Stack Sans Headline", "Plus Jakarta Sans", Arial, sans-serif;
 }

 .tl-home-page .tl-actions .btn i { display: none; }

 .tl-home-page .tl-burger {
  width: 42px;
  height: 42px;
  align-items: center;
  justify-content: center;
  gap: 5px;
  margin-left: 15px;
  padding: 8px;
  border-radius: 52px;
  background: #0f6ee6;
 }

 .tl-home-page .tl-burger-line {
  width: 20px;
  background: #fff;
 }

 .tl-home-page .tl-nav.tl-open { top: 124px; }
}