/* =========================================================
   DATICS - SECONDARY NAVBAR
   Same Design Language as Main Navbar
========================================================= */

.sub-navbar {
  position: fixed;

  top: 125px;
  left: 0;

  width: 100%;

  z-index: 9990;

  transition: 0.35s ease;

}


/* =========================================================
   MAIN FLOATING CONTAINER
========================================================= */

.sub-nav-container {
  position: relative;

  width: min(95%, 1600px);

  min-height: 68px;

  margin: auto;

  padding: 0 22px;

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 8px;

  /* border-radius: 22px; */
  border-bottom-right-radius: 22px;
  border-bottom-left-radius: 22px;



  /* background: rgba(255, 255, 255, 0.88); */

  backdrop-filter: blur(25px);

  -webkit-backdrop-filter: blur(25px);

  border: 1px solid rgba(255, 255, 255, 0.65);

  /* box-shadow:
    0 15px 40px rgba(15, 23, 42, 0.06),
    0 5px 15px rgba(15, 23, 42, 0.025); */

  transition: 0.35s ease;
}


/* =========================================================
   TOP GRADIENT LIGHT
========================================================= */

.sub-nav-container::before {
  content: "";

  position: absolute;

  top: 0;
  left: 8%;

  width: 84%;

  height: 1px;

  background: linear-gradient(
    90deg,
    transparent,
    rgba(37, 99, 235, 0.18),
    rgba(124, 58, 237, 0.18),
    transparent
  );

  pointer-events: none;
}


/* =========================================================
   SCROLLED STATE
========================================================= */

.sub-navbar.scrolled .sub-nav-container {
  width: min(92%, 1320px);

  background: rgba(255, 255, 255, 0.96);
/* 
  box-shadow:
    0 20px 50px rgba(0, 0, 0, 0.08); */
}


/* =========================================================
   ITEM
========================================================= */

.sub-nav-item {
  position: relative;

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 9px;

  min-height: 48px;

  padding: 0 18px;

  border-radius: 14px;

  color: #1e293b;

  text-decoration: none;

  font-size: 14px;

  font-weight: 500;

  white-space: nowrap;

  transition:
    color 0.3s ease,
    background 0.3s ease,
    transform 0.3s ease;
}


/* =========================================================
   ICON
========================================================= */

.sub-nav-icon {
  width: 30px;

  height: 30px;

  display: flex;

  align-items: center;

  justify-content: center;

  flex-shrink: 0;

  border-radius: 10px;

  background: #f3f6ff;

  color: #64748b;

  font-size: 14px;

  transition:
    background 0.3s ease,
    color 0.3s ease,
    transform 0.3s ease,
    box-shadow 0.3s ease;
}


/* =========================================================
   TEXT
========================================================= */

.sub-nav-text {
  line-height: 1;

  transition: 0.3s ease;
}


/* =========================================================
   HOVER
========================================================= */

.sub-nav-item:hover {
  color: #2563eb;

  background: #f8fbff;

  transform: translateY(-2px);
}


.sub-nav-item:hover .sub-nav-icon {
  color: #2563eb;

  background:
    linear-gradient(
      135deg,
      #eff6ff,
      #f5f3ff
    );

  transform: translateY(-1px) scale(1.05);
}


/* =========================================================
   ACTIVE
========================================================= */

.sub-nav-item.active {
  color: #2563eb;

  background:
    linear-gradient(
      135deg,
      rgba(239, 246, 255, 0.9),
      rgba(245, 243, 255, 0.9)
    );
}


/* =========================================================
   ACTIVE ICON
========================================================= */

.sub-nav-item.active .sub-nav-icon {
  color: #ffffff;

  background:
    linear-gradient(
      135deg,
      #2563eb,
      #7c3aed
    );

  box-shadow:
    0 10px 22px rgba(37, 99, 235, 0.22);

  transform: scale(1.02);
}


/* =========================================================
   ACTIVE / HOVER UNDERLINE
   Matches Main Navbar
========================================================= */

.sub-nav-item::after {
  content: "";

  position: absolute;

  left: 50%;

  bottom: 5px;

  width: 0;

  height: 3px;

  transform: translateX(-50%);

  border-radius: 50px;

  background:
    linear-gradient(
      90deg,
      #2563eb,
      #7c3aed
    );

  transition: 0.35s ease;
}


/* Hover */

.sub-nav-item:hover::after {
  width: 55%;
}


/* Active */

.sub-nav-item.active::after {
  width: 65%;
}


/* =========================================================
   LARGE DESKTOP
========================================================= */

@media (min-width: 1400px) {

  .sub-nav-container {
    gap: 10px;

    padding: 0 28px;
  }

  .sub-nav-item {
    padding: 0 21px;

    font-size: 15px;
  }

  .sub-nav-icon {
    width: 31px;

    height: 31px;
  }
}


/* =========================================================
   LAPTOP
========================================================= */

@media (max-width: 1200px) {

  .sub-nav-container {
    gap: 4px;

    padding: 0 16px;
  }

  .sub-nav-item {
    padding: 0 13px;

    font-size: 13px;

    gap: 7px;
  }

  .sub-nav-icon {
    width: 28px;

    height: 28px;

    font-size: 13px;
  }
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 992px) {

  .sub-navbar {
    top: 118px;
  }

  .sub-nav-container {
    width: min(95%, 1600px);

    min-height: 64px;

    justify-content: flex-start;

    overflow-x: auto;

    padding: 7px 14px;

    gap: 7px;

    scrollbar-width: none;

    -ms-overflow-style: none;
  }

  .sub-nav-container::-webkit-scrollbar {
    display: none;
  }

  .sub-nav-item {
    flex-shrink: 0;

    min-height: 46px;

    padding: 0 14px;

    border-radius: 13px;
  }

  .sub-nav-item::after {
    bottom: 4px;
  }
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 768px) {

  .sub-navbar {
    top: 102px;
  }

  .sub-nav-container {
    width: 94%;

    min-height: 58px;

    padding: 5px 8px;

    gap: 5px;

    border-radius: 17px;
  }

  .sub-nav-item {
    min-height: 43px;

    padding: 0 12px;

    gap: 7px;

    border-radius: 11px;

    font-size: 13px;
  }

  .sub-nav-icon {
    width: 27px;

    height: 27px;

    border-radius: 8px;

    font-size: 12px;
  }

  .sub-nav-item::after {
    bottom: 3px;
  }

  .sub-nav-item:hover::after {
    width: 45%;
  }

  .sub-nav-item.active::after {
    width: 55%;
  }
}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 480px) {

  .sub-navbar {
    top: 96px;
  }

  .sub-nav-container {
    width: 94%;

    min-height: 54px;

    padding: 5px 7px;


    margin-top: 26px;
     border-bottom-right-radius: 22px;
  border-bottom-left-radius: 22px;
  border-top-right-radius: 0px;
  border-top-left-radius: 0px;
  }

  .sub-nav-item {
    min-height: 40px;

    padding: 0 10px;

    gap: 6px;

    font-size: 12px;
  }

  .sub-nav-icon {
    width: 25px;

    height: 25px;

    font-size: 11px;
  }
}


/* =========================================================
   VERY SMALL DEVICES
========================================================= */

@media (max-width: 360px) {

  .sub-nav-container {
    width: 94%;

    padding-left: 6px;

    padding-right: 6px;

      border-bottom-right-radius: 22px;
  border-bottom-left-radius: 22px;
  border-top-right-radius: 0px;
  border-top-left-radius: 0px;
  }

  .sub-nav-item {
    padding: 0 9px;

    font-size: 11.5px;
  }

  .sub-nav-icon {
    width: 24px;

    height: 24px;
  }
}