:root {
  --bg-dark: #0b1814;
      --brand-green: #13d790;
      --brand-green-2: #24e0b0;
      --pill-stroke: rgba(255,255,255,.8);
      --cta: #27c06b;
      --cta-hover: #1ba85a;
      --brand: #12a060;
  --mint: #D0FEE4;           /* card background */
  --mint-stroke: #cfeadd;    /* card border */
  --circle: #18b872;

  --panel: #427D56;
  --panel-dark: #28523E;
  --body-bg: #ffffff;
  --ring: rgba(255,255,255,.18);
  --stat-blue: #C7EAFC;
  /* --stat-mint: #C1FEE3; */
  --stat-sand: #F5EEC1;

  --nav-green: #1f5b46;   /* active green */
  --nav-text:  #0e3c2d; 
   --green: #12a060;
  --hub-green: #19c27b;
  --ring-2: rgba(25,194,123,.35);

  --cap-green: #19c27b;
  --cap-green-dark: #136e4e;
  --panel-border: #37C76D;
  --panel-bg: #012A2E96;

  --card-border: rgba(255,255,255,.18);
  --text-soft: #8BFFB6;
  --alert-red: #e34d45;
  --alert-red-bg: rgba(227,77,69,.12);

  --brand-2:#059669;
  --border:#cfe6db;
  --shadow:0 14px 28px rgba(0,0,0,.12);


  --card-bg: #28523E;
  --card-border-2: #CEFADD;
  --dot: #19c27b;
  --track: #A7F3D0;
  --fill: #059669;

   --green-2:#062919;
  --green-bright:#16b674;
  --card-stroke:#194430;

  --mint-2:#e9fbf2;
  --border-2:#dfe7e3;
  --shadow-2:0 14px 28px rgba(0,0,0,.10);
  --blue:#eaf1ff;
  --sand:#fff1dc;
  --green-3:#19c27b;
}
/* Top navbar */
body,
html {
  margin: 0;
  padding: 0;
  height: 100%;
  font-family: "Milligram-Regular-trial", sans-serif;
  color: #000 !important;
}
body {
  overflow-x: hidden;
  /* zoom: 80%; */
}
@font-face {
  font-family: "Milligram-Regular-trial";
  src: url('/assets/fonts/Milligram-Regular-trial.ttf') format('ttf');
}
@font-face {
  font-family: "Milligram-Medium-trial";
  src: url('/assets/fonts/Milligram-Medium-trial.ttf') format('ttf');
}

@media (min-width:992px) and (max-width:1366px) {
  body{
    zoom:80%;
  }
}
/* @font-face {
  font-family: AlteHaasGrotesk;
  src: url("/assets/fonts/GraphikCompact-Regular-Trial.otf") format("opentype");
  font-weight: normal;
  font-style: normal;
} */
/* @font-face {
  font-family: AlteHaasGrotesk;
  src: url("/assets/fonts/GraphikCompact-Bold-Trial.otf") format("opentype");
  font-weight: bold;
  font-style: normal;
} */

h2 {
  font-size: 45px !important;
  font-weight: 400 !important;
  line-height: 53px !important;
}
p,
a,
div {
  font-size: 18px !important;
  font-family: "Milligram-Medium-trial", sans-serif !important;
}
h1,h2,h3,h4,h5,h6{
  font-family: "CooperBTLight", sans-serif !important;
}
section {
  overflow: unset !important;
}
p {
  font-weight: 400 !important;
}
@media (min-width: 1200px) {
  div.container,
  section.container {
    max-width: 1140px !important;
  }
  #header.header_area.fixed-top.sticky.header-scrolled
    .nav-header
    .nav-brand
    img {
    width: 240px !important;
  }
}
/* Default transparent background */
.header_area {
  transition: background-color 0.3s ease;
  background: transparent;
}

/* Sticky state after scroll */
.header_area.sticky {
  background: #021940; /* your background color */
}

.header_area.fixed-top,
.fixed-top.topnav_bg {
  background: transparent !important;
}
@media (min-width: 1200px) {
  header.fixed-top img.img_show {
    width: 240px !important;
  }
}
header#header.header-scrolled {
  /* background: linear-gradient(
          to right,
          #03401b,
          #1a995b,
          #056a4a
        ) !important; */
  background-color: #0c3426 !important;
  color: #fff !important;
  border-bottom: unset !important;
}
header#header.header-scrolled ul.nav-menu  > li > a {
  color: #ffffff !important;
}
/* #header.header-scrolled .nav-menus-wrapper .nav-menu li a{
 
        color: #fff !important;
} */
.nav_style {
  display: none;
}
.top_bavbar {
  justify-content: end !important;
}
.top_bavbar a:after {
  border: 1px solid #fff !important;
}
.nav-menu > li > a > i,
.nav-menu > li > a > [class*="ion-"] {
  font-size: 14px;
  text-align: left;
}
.nav-menu > li > a {
  position: relative;
  display: inline-block;
  padding-bottom: 4px; /* space for the underline */
  text-decoration: none;
  color: inherit; /* keep text color */
}
.nav-menu > li > a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 3px; /* underline thickness */
  width: 0;
  background: linear-gradient(90deg, rgb(22 113 6), rgb(12 191 36)) !important;
  border-radius: 2px;
  transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.nav-menu > li > a:hover::after {
  width: 100%;
}
/* Base styles for submenu / megamenu links */
.nav-dropdown li a,
.megamenu-list li a {
  position: relative;
  display: block;
  padding: 8px 15px;
  color: inherit;
  text-decoration: none;
  z-index: 1; /* make sure text is above the pseudo-element */
  overflow: hidden; /* hide the overflow of the background animation */
}

li ul.nav-submenu li a:hover {
  color: #fff !important;
}
/* Background sweep effect */
.nav-dropdown li a::before,
.megamenu-list li a::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 0; /* start invisible */
  background: linear-gradient(90deg, rgb(22 113 6), rgb(12 191 36)) !important;
  z-index: -1; /* behind the text */
  transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* On hover - expand background from left to right */
.nav-dropdown li a:hover::before,
.megamenu-list li a:hover::before {
  width: 100%;
}

/* Optional: smooth reverse on mouse out (already handled by transition) */
#header.header-scrolled img.img_show {
  display: block !important;
  width: 240px !important;
}
.navigation {
  display: flex !important;
  justify-content: space-between;
}

.megamenu-panel .megamenu-list > li > a:hover {
  color: #fff !important;
}

.megamenu-lists .megamenu-list > li.megamenu-list-title > a:hover {
  color: #fff !important;
}

@media (min-width: 1025px) {
  .navigation.navigation-portrait .nav-menus-wrapper .nav-menu li a {
    /* padding: 12px 15px 12px 26px !important; */
  }
}
@media (min-width: 992px) and (max-width: 1200px) {
  .navigation.navigation-portrait .nav-menus-wrapper .nav-menu li a {
    /* padding: 12px 15px 12px 26px !important; */
  }
}
@media (min-width: 1025px) and (max-width: 1200px) {
  #header.header-scrolled {
    height: 120px !important;
  }
  .nav-toggle:before {
    background-color: #000 !important;
    box-shadow: 0 0.5em 0 0 #000, 0 1em 0 0 #000 !important;
  }
}
@media (min-width: 320px) and (max-width: 576px) {
  header#header.header-scrolled {
    height: 120px !important;
  }
}
@media (min-width: 992px) {
  header.fixed-top .nav-menu > li > a {
    padding: 40px 10px !important;
  }
  #header.header-scrolled .nav-menus-wrapper .nav-menu .main-menu-list > a {
    color: #fff !important;
  }
  .nav-menus-wrapper .nav-menu li a {
    font-size: 16px !important;
  }
  .fixed-top.topnav_bg a {
    font-size: 16px !important;
  }
}

/* Menu end */

/* Background image on parent wrapper */
.hero-wrapper {
  background: url("/assets/img/time-banner-bg-compress.png") no-repeat center center;
  background-size: cover;
  color: white;
  overflow: hidden;
}

.hero-section {
  display: flex;
  flex-direction: column;
  min-height: 520px;
  padding-top: 50px;
  padding-bottom: 50px;
  justify-content: center;
}

.hero-content {
  position: relative;
  z-index: 1; /* above overlay */
  text-align: center;
  max-width: 980px;
  margin: 0 auto;
  padding: 0 20px;
  color: #fff;
}


/* Banner section start */
.gradient-btn:not(:hover) {
    animation: zoomOut 0.6s forwards;
}
.gradient-btn:hover {
    animation: zoomIn 0.6s forwards;
    box-shadow: 0 25px 50px -12px rgb(34 197 94 / 25%);
}
.gradient-btn {
    background: linear-gradient(90deg, rgb(22 163 74), #059669);
    color: #fff !important;
    padding: 20px 40px !important;
    border-radius: 12px;
    font-weight: 700 !important;
    text-decoration: none;
    transform: scale(1);
}
.gradient-btn:hover {
    animation: zoomIn 0.6s forwards;
    box-shadow: 0 25px 50px -12px rgb(34 197 94 / 25%);
}

@keyframes zoomIn {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(1.05);
  }
}

@keyframes zoomOut {
  from {
    transform: scale(1.05);
  }
  to {
    transform: scale(1);
  }
}
/* Hero wrapper with diagonal line pattern */
    .time-hero{
      position: relative;
      min-height: 72vh;
      display: grid;
      place-items: center;
      color: #fff;
      text-align: center;
      padding: 80px 0;
      background:
        radial-gradient(120% 140% at 10% 0%, rgba(38,180,130,.25), rgba(11,24,20,.96) 50%),
        repeating-linear-gradient(160deg, rgba(46,240,165,.12) 0 2px, rgba(0,0,0,0) 2px 20px),
        linear-gradient(180deg, #081510, var(--bg-dark) 60%, #0a1a15);
    }
    .time-hero .container{ max-width: 980px; }

    /* Outlined pill at top */
    .hero-pill{
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 13px 18px;
      border-radius: 999px;
      border: 2px solid var(--pill-stroke);
      background: rgba(0,0,0,.25);
      backdrop-filter: blur(2px);
      font-weight: 700;
      color: #eafff7;
    }

    /* Gradient headline */
    .hero-title{
      font-weight: 400;
      line-height: 1.15;
      margin: 18px 0 10px;
      letter-spacing: .3px;
    }
    .gradient-green{
      background: linear-gradient(90deg, #7bf2a1, var(--brand-green) 55%, var(--brand-green-2));
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
    }

    /* Subhead */
    .hero-sub{
      color: #9EEAC2;
      max-width: 860px;
      margin: 0 auto 18px;
    }

    /* CTA */
    .btn-cta{
      background: var(--cta);
      border: none;
      color: #062015;
      font-weight: 800;
      padding: .9rem 1.3rem;
      border-radius: .75rem;
      box-shadow: 0 14px 28px rgba(0,0,0,.25), inset 0 -2px 0 rgba(0,0,0,.2);
      transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease;
    }
    .btn-cta:hover{ background: var(--cta-hover); transform: translateY(-2px); box-shadow: 0 18px 36px rgba(0,0,0,.28); }
    .btn-cta:active{ transform: translateY(0); }

    /* Typographic scaling */
    @media (min-width: 992px){
      .hero-title{ font-size: 60px; }
    }
    @media (max-width: 991.98px){
      .hero-title{ font-size: 2.2rem; }
    }
    @media (prefers-reduced-motion: reduce){
      .btn-cta{ transition: none; }
    }



/* Banner section end */

/* stop guessing start */

/* soft section background */
.stop-time-section{
  background: linear-gradient(180deg, #DFFFF0 0%, #ffffff 70%);
}
.stop-time-section h2{
  color: #0C3426;
}

/* Card */
.time-card{
  background: var(--mint);
  border: 1.5px solid var(--mint-stroke);
  border-radius: 16px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-shadow: 0 2px 0 rgba(0,0,0,.04);
  transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s cubic-bezier(.2,.8,.2,1), border-color .25s ease;
}
.time-card:hover{
  transform: translateY(-6px);
  box-shadow: 0 18px 36px rgba(0,0,0,.12), 0 6px 12px rgba(0,0,0,.06);
  border-color: #bfe1d2;
}
.time-card p{ color:#2f413a; line-height:1.55; }

/* Green circle icon (images stay equal size) */
.time-icon{
  width: 56px; height: 56px;
  /* border-radius: 50%; */
  /* background: var(--circle); */
  display: inline-flex; align-items: center; justify-content: center;
  /* box-shadow: 0 10px 22px rgba(0,0,0,.15), inset 0 -2px 0 rgba(0,0,0,.08); */
}
.time-icon img{
  width: 48px; height: 48px;
  object-fit: contain;
  /* filter: brightness(0) invert(1);  */
}

/* Goal pill */
.goal-pill{
  background: linear-gradient(90deg, #17A55A, #102A02);
  color:#fff;
  padding: 14px 18px;
  border-radius: 18px;
  box-shadow: 0 16px 32px rgba(0,0,0,.18);
  max-width: 720px;
}

/* Responsive tweaks */
@media (min-width: 992px){
  .time-card{ padding: 18px; }
}
@media (prefers-reduced-motion: reduce){
  .time-card{ transition: none; }
}

/* stop guessing end */


/* Built for role start */


/* Section background (dark with subtle pattern) */
.roles-section{
  background:url(/assets/img/Built-for-each-role-bg-compress.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

.roles-section .tab-content .tab-pane{
padding: 0px;
background-color: unset;
}

.roles-section .nav-pills{
background-color: #ffffff;
}

.roles-section .role-tabs{
  background: #fff;
  border-radius: 10px;
  padding: 6px;
  border: 1px solid rgba(0,0,0,.12);
  box-shadow: 0 10px 22px rgba(0,0,0,.18);
  gap: 6px;                     /* tighter spacing between pills */
}

/* Center the group and make the white rounded container */
.navtabs{ display: flex; justify-content: center; }

/* Nav pills with icons */
.roles-section .role-tabs .nav-link{
 background: transparent !important;
  color: var(--nav-text) !important;
  border: 0 !important;
  border-radius: 10px;
  padding: 8px 14px;
  font-weight: 700;
  display: inline-flex; align-items: center; gap: 8px;
  transition: background-color .2s ease, transform .2s ease, box-shadow .2s ease, color .2s ease;
}
.roles-section .role-tabs .nav-link:hover{
  background: rgba(0,0,0,.04);
  transform: translateY(-1px);
}
/* Active pill = green background + white text */
.roles-section .role-tabs .nav-link.active{
  background: var(--nav-green) !important;
  color: #fff !important;
  box-shadow: inset 0 -2px 0 rgba(0,0,0,.15);
}
.roles-section .role-tabs .nav-link.active .role-tab-icon{
  filter: brightness(0) invert(1); /* make icon white */
}


/* Drivers pane — green container with map vibe */
.drivers-box{
  position: relative;
  min-height: 520px;
  border-radius: 16px;
  border: 1.5px solid #cfe6db;
  background:url('/assets/img/drivers-box-bg-compress.png'); /* optional pattern */
  background-size: cover;
  background-position: center;
  overflow: hidden;
  padding: 25px;
  box-shadow: 0 12px 28px rgba(0,0,0,.08) inset;
}

/* Truck icon centered at the top */
.driver-truck{
  position: absolute; top: 24px; left: 50%; transform: translateX(-50%);
}
.truck-icon{
  width: 96px; height: 96px; border-radius: 20px;
  background: #20BE59;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid rgba(255,255,255,.55);
  /* box-shadow: 0 8px 24px rgba(0,0,0,.18); */
}
.truck-icon img{ width: 80px; height: 80px; object-fit: contain;}

/* Vertical timeline */
.route-line{
  position: absolute;
  top: 140px;                     /* starts below the truck */
  bottom: 24px;
  left: 50%;
  width: 6px;
  transform: translateX(-50%);
  background: #20BE59;
  border-radius: 999px;
  box-shadow: 0 0 0 4px rgba(18,160,96,.12);
}

/* Nodes placed along the line using --pos percentage */
.route-node{
  position: absolute;
  left: 50%;
  top: var(--pos);
  transform: translate(-50%, -50%);
  width: 18px; height: 18px; border-radius: 50%;
  background: #A7FFC7;
  box-shadow: 0 0 0 4px rgb(32 190 89), inset 0 0 0 3px #20BE59;
  z-index: 2;
}

/* Step cards (left/right of the line) */
.step{
  position: absolute;
  top: var(--pos);
  transform: translateY(-50%);
  width: min(360px, 42%);
  z-index: 2;
}
.step-left  { left: 80px; }
.step-right { right: 80px; }

.step-card{
  display: flex; gap: 12px; align-items: flex-start;
  flex-direction: column;
  background: linear-gradient(180deg, #EFFCF3, #DFFCE8);
  border: 1px solid #e3efe9;
  border-radius: 14px;
  padding: 14px 16px;
  box-shadow: 0 14px 24px rgba(0,0,0,.10);
}
.step-card p{ color:#204137; line-height: 1.5; margin:0; }

/* Icon in each step */
.step-icon{
  width: 44px; height: 44px; border-radius: 10px;
  background: #20BE59;
  display: inline-flex; align-items: center; justify-content: center;
  /* box-shadow: 0 8px 18px rgba(0,0,0,.15), inset 0 -2px 0 rgba(0,0,0,.08); */
  flex: 0 0 44px;
}
.step-icon img{
  width: 22px; height: 22px; object-fit: contain; filter: brightness(0) invert(1);
}

/* Responsive: stack on mobile, hide the vertical line for clarity */
@media (max-width: 767.98px){
  .drivers-box{ padding: 14px; min-height: auto; }
  .driver-truck{ position: static; transform: none; display: flex; justify-content: center; margin-bottom: 10px; }
  .route-line, .route-node{ display: none; }
  .step{ position: static; width: 100%; transform: none; margin-bottom: 10px; }
}
@media (min-width: 768px) and (max-width:1199px){
.drivers-box .step-left{
left:40px !important;
}
.drivers-box .step{
  width: min(360px, 30%);
}
.drivers-box .step-right{
right:40px !important;
}
}

/* Field Sales Reps cards */
.reps-grid > [class*="col-"]{ display: flex; } /* equal height columns */

.rep-card{
  background: #DAFFE8;                       /* soft mint like your mock */
  border: 1.5px solid #cfe6db;
  border-radius: 16px;
  padding: 30px;
  box-shadow: 0 10px 24px rgba(0,0,0,.10);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
  height: 100%;                               /* equal height tiles */
  color: #0e2f25;
  transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s cubic-bezier(.2,.8,.2,1);
}
.rep-card:hover{
  transform: translateY(-4px);
  box-shadow: 0 18px 36px rgba(0,0,0,.14);
}


.rep-icon{
  width: 56px; height: 56px;
  border-radius: 12px;
  background: linear-gradient(180deg, #20BE59, #18A94C);                        /* green box behind icon */
  display: inline-flex; align-items: center; justify-content: center;
  /* box-shadow: 0 10px 22px rgba(0,0,0,.15), inset 0 -2px 0 rgba(0,0,0,.08); */
}
.rep-icon img{
  width: 35px; height: 35px; object-fit: contain;
  /* filter: brightness(0) invert(1);            */
}

.rep-card p{
  line-height: 1.55;
  margin: 0;
  color: #000000;
}

/* Slightly larger padding on lg+ */
@media (min-width: 992px){
  .rep-card{ padding: 30px; }
}

/* Icons: dark on inactive, white on active */
.roles-section .role-tabs .nav-link .role-tab-icon{
  width: 20px; height: 20px; object-fit: contain;
  filter: none;
}
/* Optional: small white badge behind the active icon (like your mock) */
/* .roles-section .role-tabs .nav-link.active .role-tab-icon{
  padding: 3px;
  border-radius: 8px;
  background: rgba(255,255,255,.15);
} */

/* Role card */
.role-card{
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 14px 30px rgba(0,0,0,.24);
  background: transparent;
}
.role-head{
  background: var(--panel);
  color: #fff;
  padding: 20px;
  display: flex; align-items: center; gap: 10px;
  border-bottom: 1px solid rgba(255,255,255,.18);
}
.role-head h6{
  font-size: 20px;
}
.head-icon{
  width: 60px; height: 60px; border-radius: 50%;
  background: var(--panel-dark);
  border: 1px solid #CEFADD;
  display: inline-flex; align-items: center; justify-content: center;
}
.head-icon img{
  width: 32px; height: 32px; object-fit: contain; filter: brightness(0) invert(1);
}

.role-body{
  background: var(--body-bg);
  padding: 20px;
}
.role-body p{
  font-size: 20px !important;
}

/* Stats */
.stats-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}
.stat{
  border-radius: 10px;
  padding: 12px;
  text-align: center;
  font-weight: 800;
  line-height: 1.1;
  /* box-shadow: inset 0 -2px 0 rgba(0,0,0,.06); */
}
.stat .stat-val{ font-size: 1.05rem; }
.stat .stat-sub{ font-size: .8rem; font-weight: 600; opacity: .85; }

.stat-val i{
font-size: 14px;
}

.stat-blue{ background: var(--stat-blue); }
.stat-mint{ background: linear-gradient(90deg, #C1FEE3, #DFFEE6); }
.stat-sand{ background: var(--stat-sand); }

.stat-blue div{
  color: #065A87;
}
.stat-mint div{
  color: #0B662E;
}
.stat-sand div{
  color: #524C25;
}

/* Layout on md+ */
@media (min-width: 768px){
  .stats-grid{ grid-template-columns: repeat(3, 1fr); }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .role-tabs .nav-link{ transition: none; }
}


/* Built for role end */

/* Attendance your way start */
.attendance-section h2{
color: #0C3426;
}
/* Layout grid: 3x3 with center hub on md+ */
.hub-grid{
  position: relative;
  display: grid;
  gap: 24px;
  grid-template-columns: 1fr;     /* mobile */
}
@media (min-width: 768px){
  .hub-grid{
    grid-template-columns: 1fr 220px 1fr;
    grid-template-rows: 1fr 220px 1fr;
    min-height: 640px;                  /* creates equal room for top/bottom tiles */
    align-items: stretch;
  }
  /* Make each corner card fill its grid cell */
  .hub-grid .att-card{ height: 100%; }
}

/* Corner placement (md+) */
@media (min-width: 768px){
  .hub-grid .tl{ grid-column: 1; grid-row: 1; }
  .hub-grid .tr{ grid-column: 3; grid-row: 1; }
  .hub-grid .bl{ grid-column: 1; grid-row: 3; }
  .hub-grid .br{ grid-column: 3; grid-row: 3; }
}

/* Center hub */
.hub-center{
  display: none;                  /* hidden on mobile */
}
@media (min-width: 768px){
  .hub-center{
    display: grid;
    place-items: center;
    grid-column: 2; grid-row: 2;
    z-index: 2;
  }
}
/* .hub-inner{
  width: 150px; height: 150px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #37e79b, #19c27b 70%, #11a25e 100%);
  color: #fff; text-align: center; font-weight: 800;
  display: grid; place-items: center;
  box-shadow: 0 18px 36px rgba(0,0,0,.25),
              0 0 24px rgba(25,194,123,.45) inset,
              0 0 24px rgba(25,194,123,.35);
  position: relative;
} */
/* .hub-inner::after{
  content:""; position:absolute; inset:-10px;
  border-radius: 50%;
  border: 4px solid var(--ring-2);
} */
.hub-inner img{
width: 100%;
}

/* Dotted connectors (md+) */
.hub-lines{ display: none; }
@media (min-width: 768px){
  .hub-lines{
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    z-index: 1; pointer-events: none;
    display: block;
  }
  .hub-lines .dash{
    stroke: #19c27b;
        stroke-width: 0.5px;
        stroke-dasharray: 0.5 1.5;
        stroke-linecap: round;
        opacity: .85;
  }
  /* Make sure cards sit above lines and below the hub */
  .hub-grid .att-card{ position: relative; z-index: 2; }
  .hub-center{ z-index: 3; }
}

/* Cards */
.att-card{
  background: #fff;
  border-radius: 18px;
  padding: 16px;
  box-shadow: 0 12px 26px rgba(0,0,0,.08);
  display: flex; flex-direction: column; gap: 10px;
  min-height: 260px;
}
.att-title{ font-weight: 800; margin: 0; font-size: 22px !important; }

/* Icon box */
.att-icon{
  width: 56px; height: 56px; border-radius: 12px;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 10px 22px rgba(0,0,0,.12);margin-bottom: 20px;
}
.att-icon img{ width: 35px; height: 35px; object-fit: contain; filter: brightness(0) invert(1); }

/* Bulleted points (colored circular dots) */
.att-points{ list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.att-points li{
  position: relative; padding-left: 16px; line-height: 1.45; color: #000000;
}
.att-points li::before{
  content:""; position:absolute; left:0; top:.55em;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--bullet, #12a060);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--bullet), transparent 70%);
}

/* Color themes per card */
.att-blue  { --bullet:#3fa7f7; background: linear-gradient(300deg,#C5F4FF,#EDF5FF); }
.att-blue  .att-icon{ background:linear-gradient(180deg, #387FF4, #2969ED); }

.att-mint  { --bullet:#18b872; background: linear-gradient(180deg,#EFFCF3,#DFFCE8); }
.att-mint  .att-icon{ background:linear-gradient(180deg, #20BE59, #18A94C); }

.att-peach { --bullet:#d69c2f; background: linear-gradient(180deg,#FFF7EC,#FEEED7); }
.att-peach .att-icon{ background:linear-gradient(180deg, #948038, #705C17); }

.att-violet{ --bullet:#a076f5; background: linear-gradient(180deg,#FAF4FE,#F2E8FE); }
.att-violet .att-icon{ background:linear-gradient(180deg, #A651F5, #9537EB); }

/* Goal banner */
.goal-banner{
  background: linear-gradient(180deg,#20BE59,#18A94C);
  border:1px solid #CEFADD;
  color:#fff;
  padding: 25px;
  border-radius: 14px;
  box-shadow: 0px 4px 11.6px 12px #9AECB9;
  max-width: 760px;
}

/* Responsive spacing */
@media (min-width: 992px){
  .att-card{ padding: 25px; }
}

/* Attendance your way end */


/* plan capacity start */

/* Section with background image + tint */
.capacity-section{
  background: #ffffff;
}
.capacity-section .capacity-container{
  background: url(/assets/img/Plan-capacity-with-real-mumbers-bg-compress.jpg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  border-radius: 25px;
  max-width: 1100px;
  margin: 0 auto;
  padding: 30px;
}

/* Panel */
.cap-panel{
  border-radius: 20px;
  border: 1.5px solid var(--panel-border);
  background: var(--panel-bg);
  backdrop-filter: blur(3px);
  padding: 16px;
  color: #fff;
}

/* Top area */
.cap-title{ font-weight: 800; font-size: 1.05rem; }
.cap-sub{ color: var(--text-soft); margin-top: 2px; }
.cap-kpi .value{ font-weight: 900; font-size: 1.6rem; line-height: 1; }
.cap-kpi .label{ font-size: .85rem; opacity: .9; }

/* Green divider */
.cap-divider{
  height: 1px; width: 100%;
  background: #37C76D;
  border-radius: 999px;
  margin: 12px 0 14px;
}

/* Cards grid */
.cap-cards{
  display: grid; gap: 12px;
  grid-template-columns: 1fr;         /* mobile */
}
@media (min-width: 768px){
  .cap-cards{ grid-template-columns: repeat(3, 1fr); }
}

/* Card */
.cap-card{
  border: 1.2px solid var(--card-border);
  border-radius: 16px;
  padding: 14px;
  background: rgba(0,0,0,.18);
  min-height: 150px;
  display: flex; flex-direction: column; gap: 10px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.04);
}
.cap-card p{ color: var(--text-soft); }

/* Card head */
.cap-card-head{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
}
.cap-icon{
  width: 44px; height: 44px; border-radius: 10px;
  background: transparent;
  border: 1px solid #37C76D;
  display:inline-flex; align-items:center; justify-content:center;
}
.cap-icon img{ width: 22px; height: 22px; }

.mini-kpi .value{ font-weight: 800; }
.mini-kpi .label{ font-size: .8rem; opacity: .9; }

/* Red alert */
.cap-alert{
  border-radius: 16px;
  border: 1.5px solid #FF0000;
  background: #ED06162B;
  color: #fff;
  padding: 12px 14px;
  box-shadow: 0 14px 30px rgba(0,0,0,.22);
}
.alert-icon{
  width: 44px; height: 44px; border-radius: 10px;
  display:inline-flex; align-items:center; justify-content:center;
  background: #ED06162B;
  border: 1px solid #FF0000;
}
.alert-icon img{ width: 22px; height: 22px;}
.alert-title{ font-weight: 800; margin-bottom: 2px; }

/* Spacing on larger screens */
@media (min-width: 992px){
  .cap-panel{ padding: 18px; }
  .cap-card{ padding: 16px; min-height: 170px; }
}

/* Accessibility: respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .cap-panel{ backdrop-filter: none; }
}

/* plan capacity end */


/* For employees start */


.text-brand{ color: var(--brand-2); }

/* Section background (optional soft wash) */
.smart-leave-section{
  background: linear-gradient(0deg, rgba(223, 255, 240, 0.36), rgba(223, 255, 240, 0.36));

}
.smart-leave-section h4{
  color: #1C4B39;
font-size: 30px;
}
.smart-leave-section h2{
color: #0B3020;
}

/* Planner image frame */
.planner-frame{
  /* border: 1.5px solid #b7e6d1; */
  /* border-radius: 16px; */
  overflow: hidden;
  /* box-shadow: var(--shadow); */
  /* background:#fff; */
  position: relative;
}
.planner-frame img{ display:block; width:70%; height:auto; }

.frame-label{
  position: absolute; top: 10px; left: 12px;
  background: rgba(255,255,255,.9);
  border: 1px solid #b7e6d1;
  color:#0f4d36;
  font-weight:700; font-size:.95rem;
  border-radius: 10px; padding: 6px 10px;
}

/* Overlay card (on right, over image) */
.suggest-card{
  position: absolute;
  right: -10px;                 /* slight overhang on desktop */
  bottom: 10%;
  width: min(360px, 88%);
  background: #EDFDF3;          /* soft mint */
  border: 1.5px solid #2FC998;
  border-radius: 12px;
  box-shadow: 0 14px 28px rgba(0,0,0,.12);
  padding: 30px;
 display: flex;
    flex-direction: column;
    gap: 25px;
}
.visual-wrap{
  margin-bottom: 100px !important;
}
/* Header: icon-in-box + title */
.sugg-head{
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 10px;
}
.sugg-head h6{
font-size: 18px !important;
}
.sugg-icon{
  width: 32px; height: 32px; border-radius: 8px;
  background: #D0FAE4;
  /* border: 1px solid #cfeee0; */
  display: inline-flex; align-items: center; justify-content: center;
}
.sugg-icon img{ width: 18px; height: 18px; object-fit: contain; }

/* Items */
.sugg-item{
  display: grid;
  grid-template-columns: auto 1fr auto;  /* icon | title | number */
  align-items: center;
  gap: 10px;
  background: #F8FEFC;
  /* border: 1px solid #e9f2ed; */
  border-radius: 12px;
  padding: 18px 12px;
  margin-bottom: 8px;
}
.item-ico{
  width: 28px; height: 28px; border-radius: 8px;
  /* background: #f5fbf8; */
  /* border: 1px solid #e4efe9; */
  display: inline-flex; align-items: center; justify-content: center;
}
.item-ico img{ width: 16px; height: 16px; object-fit: contain; }

.item-title{ font-weight: 700; color: #000000; }
.item-count{ font-weight: 800; color: #0A6149; }

/* Note block */
.sugg-note{
  background: #ffffff;
  /* border: 1px solid #e6ece9; */
  border-radius: 14px;
  padding: 12px;
  color: #000000;
  line-height: 1.45;
}

/* Responsive: stack under the image on small screens */
@media (max-width: 991.98px){
  .suggest-card{ position: static; width: 100%; margin-top: 10px; }
}
@media (max-width: 991.98px){
  .planner-frame img{ width: 100%; }
}

.suggest-head h6{ color:#0c3b2d; }
.suggest-head .bolt{
  width: 28px; height: 28px; border-radius: 8px;
  background: #e7f7f0; display:inline-flex; align-items:center; justify-content:center;
  border:1px solid #cfeee0;
}

/* list with counts */
.suggest-list{
  list-style:none; margin: 10px 0 8px; padding: 0; display: grid; gap: 8px;
}
.suggest-list li{
  display:flex; justify-content:space-between; align-items:center;
  border:1px solid #e9f2ed; border-radius:10px; padding: 10px 12px; background:#f9fdfb;
}
.suggest-list .name{ font-weight:700; color:#0f4d36; }
.badge-soft{
  background:#e7f6ee; border:1px solid #cfe6db; color:#0f4d36;
  padding:4px 10px; border-radius:999px; font-weight:800;
}
.suggest-note{
  margin-top: 8px; font-size:.92rem; color:#2c3f38; background:#f5fbf8;
  border:1px dashed #d4efe3; border-radius:10px; padding:10px 12px;
}

/* Responsive: make overlay stack below on small screens */
@media (max-width: 991.98px){
  .suggest-card{ position: static; width: 100%; margin-top: 10px; }
}

/* Bottom three cards (equal height) */
.info-card{
  border: 1.5px solid var(--border);
  border-radius: 16px;
  padding: 16px;
  background:#fff;
  box-shadow: var(--shadow);
  display:flex; flex-direction:column;
}
.info-blue{  background: #C7EAFC; }
.info-mint{  background: #D7FEE5; }
.info-sand{  background: #FFFADA; }
.info-blue h5, .info-blue p{
color: #0F3346;
}
.info-mint h5, .info-mint p{
color: #0E4A24;
}
.info-sand h5, .info-sand p{
color: #60571F;
}
@media (min-width: 992px){
  .suggest-card{ right: -16px; bottom: -12%; padding: 30px; }
  .info-card{ padding: 18px; }
}

/* For employees start */



/* Dark gradient backdrop */
.managers-section{
  background: linear-gradient(0deg, rgba(223, 255, 240, 0.36), rgba(223, 255, 240, 0.36));

}
.managers-section .managers-container{
max-width: 1100px;
background:linear-gradient(90deg, #022213, #2B6450);
margin: 0 auto;
border-radius: 25px;
padding: 30px;
}
/* Card */
.m-card{
  color:#ffffff;
  background: var(--card-bg);
  border: 1.4px solid var(--card-border-2);
  border-radius: 16px;
  padding: 16px;
  display:flex; flex-direction:column;
  min-height: 260px;             /* equal height base; grows if content needs */
  /* box-shadow: 0 8px 22px rgba(0,0,0,.25) inset; */
}

/* Header row: icon left, green dot right */
.m-top{ display:flex; align-items:center; justify-content:space-between; margin-bottom: 8px; }
.m-icon{
  width: 56px; height: 56px; border-radius: 12px;
  display:inline-flex; align-items:center; justify-content:center;
  /* background: rgba(255,255,255,.08); */
  /* border: 1px solid rgba(255,255,255,.25); */
}
.m-icon img{ width: 35px; height: 35px; object-fit: contain;}

.m-dot{
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--dot);
  box-shadow: 0 0 0 4px rgba(25,194,123,.18);
}

/* Title, description */
.m-title{ font-weight: 800; margin: 2px 0 6px; }
.m-desc{ color: rgba(255,255,255,.85); margin: 0 0 10px; line-height: 1.5; }

/* Progress row at the bottom */
.m-progress-row{ display:flex; align-items:center; gap: 10px; }
.m-progress{
  --val: 60%;
  flex: 1 1 auto;
  height: 8px;
  border-radius: 999px;
  background: var(--track);
  overflow: hidden;
  position: relative;
}
.m-progress .fill{
  position:absolute; left:0; top:0; bottom:0;
  width: var(--val);
  background: var(--fill);
  border-radius: inherit;
  transition: width .7s ease;
}
.m-state{ font-size: .9rem; color: #ffffff; }

/* Hover lift (optional) */
.m-card{ transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s cubic-bezier(.2,.8,.2,1); }
.m-card:hover{ transform: translateY(-4px); box-shadow: 0 18px 36px rgba(0,0,0,.18); }

/* Responsive padding tweaks */
@media (min-width: 992px){
  .m-card{ padding: 18px; min-height: 280px; }
}
@media (prefers-reduced-motion: reduce){
  .m-card, .m-progress .fill{ transition: none; }
}

/* For employees end */


/* Negotiate start */


/* soft gradient background like your screenshot */
.leave-facts-section{
  background: linear-gradient(180deg, #BFF3FE 0%, #ffffff 70%);
}


/* Equal-height slides */
#factsSwiper .swiper-slide{ height:auto; display:flex; }
.fact-card{
  background:transparent;
  border:1.5px solid var(--card-stroke);
  border-radius:16px;
  padding:16px;
  box-shadow:0 2px 0 rgba(0,0,0,.04);
  display:flex; flex-direction:column; align-items:center; gap:10px;
  height:100%;
  transition:transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s cubic-bezier(.2,.8,.2,1);
}
.fact-card:hover{ transform:translateY(-6px); box-shadow:0 18px 36px rgba(0,0,0,.12), 0 6px 12px rgba(0,0,0,.06); }

/* Icon inside green box */
.icon-box{
  width:56px; height:56px;
  border-radius:12px;
  background:var(--green-2);
  display:inline-flex; align-items:center; justify-content:center;
  box-shadow:0 10px 22px rgba(0,0,0,.15), inset 0 -2px 0 rgba(0,0,0,.08);
}
.icon-box img{ width:40px; height:40px; object-fit:contain;}

.fact-card p{ color:#2e4039; line-height:1.55; }

/* Swiper spacing */
#factsSwiper{ padding: 20px 0px; }


/* Negotiate end */


/* what this start */

/* Section background */
.scenarios-section{
  background: #C8FFD8;
}
.scenarios-section h2{
  color: #062919;
}

/* Common card */
.scenario-card{
  border-radius: 16px;
  background:#fff;
  border:1.5px solid var(--border);
  box-shadow: var(--shadow);
  padding: 16px;
  display:flex; flex-direction:column;
  gap: 15px;
}
.window-card{
  background-color: #E4F0FE;
}
/* Make both cards equal height */
.scenarios-section .row > [class*="col-"]{ display:flex; }
.scenario-card{ height:100%; }

/* Left card header */
.driver-card .driver-head{
  display:flex; align-items:center; gap:10px; margin-bottom:10px;
}
.driver-head h5{
margin-bottom: 10px !important;
}
.ico-square{
  width:60px; height:60px; border-radius:10px;
  background: linear-gradient(180deg,#3071F1,#1C418B);
  display:inline-flex; align-items:center; justify-content:center;
  box-shadow: 0 6px 16px rgba(0,0,0,.12);
}
.ico-square img{ width:auto; height:35px; filter:brightness(0) invert(1); }


/* Head row */
.ico-circle{
  width: 40px; height: 40px; border-radius: 50%;
  background: #0e7cc0;
  display:inline-flex; align-items:center; justify-content:center;
  box-shadow: 0 6px 16px rgba(0,0,0,.12);
}
.ico-olive{ background:#6b5a1f; }
.ico-circle img{ width: 22px; height: 22px; filter: brightness(0) invert(1); }

/* Time pill with small icon */
.time-pill{
  display:inline-flex; align-items:center; gap:6px;
  padding: 4px 10px; border-radius:999px; font-weight:600; font-size:.85rem;
}

.pill-blue{ background:linear-gradient(180deg, #3071F1, #1C418B); color:#fff; }
.pill-ico{ width:14px; height:14px; filter:brightness(0) invert(1); }


.time-pill .dot{
  width:8px; height:8px; border-radius:50%; background:#7bd3ff; display:inline-block;
}

/* Text card body */
.sc-text p{ color:#2f4039; line-height:1.55; }
/* Divider + text */
.sc-hr{ margin: 8px 0 10px; opacity:.18;color: #CDCDCD; }
.driver-card p{ color:#000000; line-height:1.55; }

/* Three highlights below */
.tf{
  /* background:#fff; border:1px solid #e3ebe7; border-radius:12px; */
  padding: 10px 8px; text-align:center;
}

.tf strong{ display:block; line-height:1;font-size: 20px; }
.tf small{ display:block; font-size:18px; opacity:.8; }
.c-green{ color:#15A249; }
.c-blue { color:#2463E9; }
.c-gold { color:#948038; }


/* Right card outer and window */
.window-card{ padding:12px; }
.outer-box{
  height:100%;
  background:#f7fbff;
  border:1.5px solid #dfe7f4;
  border-radius:14px;
  /* padding: 10px; */
}

/* Highlight mini-features */
.hl{
  background:#fff;
  border:1px solid var(--border);
  border-radius:12px;
  padding: 10px 8px;
  text-align:center;
}
.hl strong{ display:block; line-height:1; }
.hl span{ font-size:.8rem; opacity:.8; }
.hl-green strong{ color:#128b5b; }
.hl-blue  strong{ color:#0e7cc0; }
.hl-gold  strong{ color:#7b6a26; }

/* “App window” variant */
.sc-screen{ padding: 12px; }
.window{
  height:100%;
  background: transparent;
  /* border:1.5px solid #dfe7e3; */
  border-radius:12px;
  padding: 14px;
  display:flex; flex-direction:column; justify-content:space-between;
  gap: 30px;
}
.window.blue{
background-color: #98C9E1;
}
.window.gold{
background-color: #FFFADA;
}
.window.green{
background-color: #AEF6D2;
}
.window.purple{
background-color: #F5EBFC;
}
.sc-blue{ background: #dee9ff; border-color:#cbd9ff; }
.sc-sand{ background: #fff4e4; border-color:#f2e3c8; }

.win-dots{ display:flex; gap:6px; justify-content:flex-end; }
.win-dots span{ width:10px; height:10px; border-radius:50%; background:#37C76D; }
.win-dots span:nth-child(2){ background:#FBBF23; }
.win-dots span:nth-child(3){ background:#F22634; }

.win-center{
  display:flex; flex-direction:column; align-items:center; gap:8px;
}
.app-ico{
  width:70px; height:70px; border-radius:16px;
  background: linear-gradient(180deg,#3071F1,#1C418B);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 10px 24px rgba(0,0,0,.15);
}
.app-ico.gold, .time-pill.pill-gold, .ico-square.gold{
  background:linear-gradient(180deg, #F5EEC1, #4F3A05);
  color:#ffffff;
}
.app-ico.green, .time-pill.pill-green, .ico-square.green{
  background:linear-gradient(180deg, #33BC67, #04481E);
  color:#ffffff;
}
.app-ico.purple, .time-pill.pill-purple, .ico-square.purple{
  background:linear-gradient(180deg, #9E45F1, #3F1466);
  color:#ffffff;
}
.app-ico img{ width:auto; height:40px; filter:brightness(0) invert(1); }

/* Chips row */
.win-chips{ 
  /* centered row at the bottom of the window */
  margin: 0 auto 0;
  max-width: 560px;              /* adjust if you want wider/narrower */
  width: 100%;

  /* 3 equal columns */
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;

  /* ensure it sits at the bottom of the .window */
  align-self: center;
}
.win-chips .chip{
  height: 72px;                  /* equal height */
  border-radius: 14px;
  background: #fff;
  border: 1px solid #e3ebe7;
  box-shadow: 0 8px 18px rgba(0,0,0,.10);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;       /* centers text vertically */
  text-align: center;
  padding: 8px 10px;
}

.win-chips .chip strong{
  font-size: 1.05rem;
  line-height: 1;
  color: #0f2f48;                /* darker top line */
}
.window.blue .win-chips .chip:nth-child(2) strong{
  color: #2D6AE1;                /* darker top line */
}
.window.blue .win-chips .chip:nth-child(3) strong{
  color: #214DA4;                /* darker top line */
  font-weight: 700;
  font-size: 20px;
}
.win-chips .chip small{
  display: block;
  margin-top: 4px;
  font-size: .8rem;
  font-weight: 600;
  opacity: .85;
}


/* Responsive tweaks */
@media (min-width: 992px){
  .scenario-card{ padding: 18px; }
}
/* Responsive: if the column gets narrow, allow 2-per-row then 1-per-row */
@media (max-width: 520px){
  .win-chips{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 380px){
  .win-chips{ grid-template-columns: 1fr; max-width: 320px; }
}


/* what this end */


/* Cta start */

.quick-demo-cta{
  background: #fff;
}
.cta-title{
  font-weight: 800;
  color: #022213;          /* dark green-ish like your theme */
  letter-spacing: .2px;
  margin-bottom: 60px !important;
}

/* black CTA button */
.btn-cta-black{
  display: inline-block;
  background: #000000;
  color: #fff;
  border: none;
  border-radius: 10px;
  font-weight: 800;
padding: 20px;
  transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease;
}
.btn-cta-black:hover{
  background: #151515;
  transform: translateY(-2px) !important;
 box-shadow: 0 10px 24px rgba(0,0,0,.18), inset 0 -2px 0 rgba(255,255,255,.08);
 color: #d3d3d3

}
.btn-cta-black:active{ transform: translateY(0); }
.btn-cta-black:focus-visible{
  outline: 3px solid #7bf2a1; outline-offset: 2px;
}
/* Cta end */


/* Footer section */

.footer-section {
  background: #000;
  color: #fff;
  font-size: 1rem;
  border-top: 1px solid #333;
}

.footer-logo-img {
  height: 100px;
  max-width: 100%;
}

.footer-title {
  color: #7fff00;
  font-weight: 600;
  margin-bottom: 12px;
  font-size: 20px;
}

.footer-address {
  font-style: normal;
  color: #fff;
  line-height: 1.7;
  margin-bottom: 0;
  font-size: 18px;
}
.footer-address a {
  color: #ffffff;
}

.footer-links {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-links li {
  margin-bottom: 8px;
}

.footer-links a {
  color: #fff;
  text-decoration: none;
  transition: color 0.2s;
}

.footer-links a:hover {
  color: #0085cd;
}

.footer-social {
  margin-top: 10px;
}

.footer-social a {
  color: #fff;
  font-size: 1.5rem;
  margin-right: 10px;
  transition: color 0.2s;
  display: inline-block;
}
.footer-social a i {
  font-size: 25px;
}

.footer-social a:hover {
  color: #0085cd;
}

.footer-bg-logo-img {
  /* opacity: 0.08; */
  width: 60%;
  max-width: 220vw;
  height: auto;
  margin: 0 auto;
  display: block;
}

.footer-copyright {
  color: #fff;
  font-size: 18px;
  margin: 18px 0 0 0;
  letter-spacing: 0.01em;
  padding: 20px 0px;
}

@media (max-width: 767.98px) {
  .footer-logo-img {
    height: 40px;
  }
  .footer-bg-logo-img {
    width: 180px;
  }
  .footer-title {
    margin-top: 18px;
  }
}
.bg-dark-gray {
  background: url(/assets/img/Black-Background.png);
  padding: 20px 0px;
}

/* Footer section */