/* =========================================
   SITE-WIDE CONTENT WIDTH
   Keeps every page's content inside a 1280px
   canvas, matching the Figma design frame.
========================================= */
.container-fluid,
.container,
.custom-container {
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
}


.video-animation-section {
   margin: 0 auto;
    width: 1220px;}
/* =========================================
   CAROUSEL MOUSE-DRAG CURSOR
   Paired with assets/js/wheel-carousel.js
========================================= */
.carousel-draggable {
  cursor: grab;
  user-select: none;
}

.card-carousel-dots .dot-item {
    font-size: 0px !important;
    padding: 0px !important;
}


.carousel-draggable.carousel-dragging {
  cursor: grabbing;
}

.hero-logo-slider {
    position: relative;
    width: 100%;
    max-width: 510px !important;
}
.hero-logo-slider .kb-video-card{
      height: 313px !important;
}
/* =========================================
   SHARED SITE HEADER / NAVIGATION
   Used on every page via header.php
========================================= */

.site-header-sticky {
  position: sticky;
  top: 0;
  z-index: 1000;
  background-color: transparent;
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

.site-header-sticky.is-scrolled {
    background-color: #f3f2ee;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    border-bottom: 1px solid #dfbcbc;
}

/* =========================================
   HEADER TOP BAR
   Logo + Phone + Email + Social. Collapses
   away once the page scrolls past the top so
   only the nav bar stays sticky.
========================================= */
.header-top-bar {
  overflow: hidden;
  max-height: 64px;
  opacity: 1;
  border-bottom: 1px solid rgba(var(--bt-accent-rgb, 234, 51, 45), 0.15);
  transition: max-height 0.35s ease, opacity 0.25s ease, border-color 0.35s ease;
}

.site-header-sticky.is-scrolled .header-top-bar {
  max-height: 0;
  opacity: 0;
  border-color: transparent;
}

.header-top-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: nowrap !important;
  gap: 20px;
  padding: 10px 16px;
}

.header-top-contact {
  display: flex;
  align-items: center;
  margin-left: 28px;
  margin-right: auto;
}

.header-top-item {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 16px;
  color: #4d4d4d;
  font-family: var(--bt-body-font, 'Plus Jakarta Sans', sans-serif);
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0.1px;
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.2s ease, transform 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.header-top-item:first-child {
  padding-left: 0;
}

.header-top-item:not(:first-child) {
  border-left: 1px solid rgba(0, 0, 0, 0.12);
}

.header-top-item::after {
  content: "";
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 0;
  height: 1.5px;
  background-color: var(--bt-accent, #ea332d);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.25s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.header-top-item:first-child::after {
  left: 0;
}

.header-top-item i {
  color: var(--bt-accent, #ea332d);
  font-size: 1rem;
}

.header-top-item:hover {
  color: #111111;
  transform: translateY(-1px);
}

.header-top-item:hover::after {
  transform: scaleX(1);
}

.header-top-social {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.header-social-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.1);
  color: #4d4d4d;
  font-size: 0.78rem;
  text-decoration: none;
  flex-shrink: 0;
  transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s cubic-bezier(0.25, 0.8, 0.25, 1), border-color 0.2s ease;
}

.header-social-icon:hover {
  background-color: var(--bt-accent, #ea332d);
  border-color: var(--bt-accent, #ea332d);
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 6px 14px rgba(var(--bt-accent-rgb, 234, 51, 45), 0.35);
}

/* =========================================
   HEADER BOTTOM BAR
   Navigation only
========================================= */
.header-nav-row {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap !important;
  padding: 12px 16px;
  transition: padding 0.35s ease;
}

.site-header-sticky.is-scrolled .header-nav-row {
  padding: 8px 16px;
}
.kb-slider-item img {
    border-radius: 15px;}
/* Logo */
.logo-wrapper {
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

.brand-logo {
  max-height: 44px;
  width: auto;
  object-fit: contain;
  flex-shrink: 0;
  transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.logo-wrapper:hover .brand-logo {
  transform: scale(1.06);
}

/* Nav (Joined Pill Look) */
.custom-nav {
  display: flex;
  align-items: center;
  font-size: 0.82rem;
  flex-wrap: nowrap !important;
  white-space: nowrap;
  flex-shrink: 0;
}

.nav-pill-group {
  background-color: #2c2c2c;
  border-radius: 30px;
  z-index: 2;
  gap: 1px;
  padding: 8px 16px;
  flex-wrap: nowrap !important;
}

.contact-pill-btn {
  background-color: #2c2c2c;
  color: #ffffff;
  border-radius: 30px;
  padding: 8px 25px 8px 25px; /* Extra left padding for seamless overlap */
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 500;
  margin-left: -12px; /* Overlaps with left pill group */
  z-index: 1;
  transition: background-color 0.25s ease, transform 0.25s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 0.25s ease;
  white-space: nowrap;
  flex-shrink: 0;
}
body.hero-section {
    background-color: #f3f2ee !important;}

.contact-pill-btn:hover {
  background-color: #111111;
  color: #ffffff;
  transform: translateY(-3px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

.contact-pill-btn:active {
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.nav-item-link {
  color: #fff;
  text-decoration: none;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 21px;
  transition: color 0.25s ease, transform 0.25s cubic-bezier(0.25, 0.8, 0.25, 1);
  white-space: nowrap;
}

.nav-item-link.active,
.nav-item-link:hover {
  color: #ffffff;
}

.nav-item-link:hover {
  transform: translateY(-2px);
}

.nav-item-link:active {
  transform: translateY(0);
}

/* Red Dot Indicator */
.red-dot {
    width: 8px !important;
    height: 8px  !important;
    background-color: var(--bt-accent, #ea332d);
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
    box-sizing: border-box;
    position: relative;
    top: -1px;
    left: -3px;
    transition: transform 0.25s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 0.25s ease;
}
.white-pill-overlay {
    background-color: #ffffffe0 !important;}
.nav-item-link:hover .red-dot,
.contact-pill-btn:hover .red-dot {
  transform: scale(1.3);
  box-shadow: 0 0 8px rgba(var(--bt-accent-rgb, 234, 51, 45), 0.7);
}

.nav-item-link.active .red-dot {
  outline: 2px solid var(--bt-accent, #ea332d);
  outline-offset: 2px;
  background-color: transparent;
}

/* Categories Nav Dropdown */
.nav-item-dropdown {
  position: relative;
}

.nav-item-link.dropdown-toggle::after {
  vertical-align: 1px;
  transition: transform 0.25s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.nav-item-link.dropdown-toggle[aria-expanded="true"]::after {
  transform: rotate(180deg);
}

.nav-dropdown-menu {
  background-color: #ffffff;
  border: none;
  border-radius: 18px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.18);
  padding: 10px;
  margin-top: 14px !important;
  min-width: 240px;
}

/* Invisible bridge so hovering across the gap between the pill and the
   menu doesn't drop out of :hover and close the menu mid-transit. */
.nav-dropdown-menu::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -14px;
  height: 14px;
}

@media (min-width: 992px) {
  /* Child combinator (>), not descendant: the submenu flyout also carries
     the .nav-dropdown-menu class (for shared background/shadow/padding), so
     a plain descendant selector here would force-open every nested submenu
     the instant "Categories" is hovered, regardless of which one (if any)
     is actually being pointed at. */
  .nav-item-dropdown:hover > .nav-dropdown-menu,
  .nav-item-dropdown.nav-hover-open > .nav-dropdown-menu {
    display: block;
    animation: navDropdownFadeIn 0.15s ease;
  }

  .nav-item-dropdown:hover .nav-item-link.dropdown-toggle::after {
    transform: rotate(180deg);
  }
}

@keyframes navDropdownFadeIn {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.nav-dropdown-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 12px;
  color: #333333;
  font-weight: 500;
  font-size: 0.9rem;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.nav-dropdown-item i {
  width: 16px;
  text-align: center;
  color: var(--bt-accent, #ea332d);
  font-size: 0.8rem;
}

.nav-dropdown-item:hover,
.nav-dropdown-item:focus {
  background-color: #f3f2ee;
  color: #111111;
}

.nav-dropdown-menu .dropdown-divider {
  margin: 6px 4px;
  border-color: #eeeeee;
}

/* Nested submenu (e.g. Categories > Website Experience > Custom HTML) */
.dropdown-submenu {
  position: relative;
}

.nav-dropdown-submenu-menu {
  display: none;
  position: absolute;
  top: -10px;
  left: 100%;
  margin: 0 0 0 -2px !important;
}

.nav-dropdown-submenu-caret {
  margin-left: auto;
  font-size: 0.65rem;
  color: #bbbbbb;
}

@media (min-width: 992px) {
  .dropdown-submenu:hover > .nav-dropdown-submenu-menu,
  .dropdown-submenu.nav-hover-open > .nav-dropdown-submenu-menu {
    display: block;
    animation: navDropdownFadeIn 0.15s ease;
  }
}

/* =========================================
   MOBILE HAMBURGER TOGGLE
========================================= */
.nav-toggler {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 42px;
  height: 42px;
  background-color: #2c2c2c;
  border: none;
  border-radius: 50%;
  flex-shrink: 0;
  cursor: pointer;
  transition: background-color 0.25s ease, transform 0.25s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.nav-toggler:hover {
  background-color: #111111;
  transform: translateY(-2px);
}

.nav-toggler-bar {
  display: block;
  width: 18px;
  height: 2px;
  border-radius: 2px;
  background-color: #ffffff;
  transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), opacity 0.2s ease;
}

.nav-toggler[aria-expanded="true"] .nav-toggler-bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.nav-toggler[aria-expanded="true"] .nav-toggler-bar:nth-child(2) {
  opacity: 0;
}

.nav-toggler[aria-expanded="true"] .nav-toggler-bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* Responsive */
@media (min-width: 992px) {
  /* Force the nav to stay visible on desktop regardless of Bootstrap's collapse state */
  .custom-nav.collapse {
    display: flex !important;
  }
}

/* Tighten the top bar before the full mobile layout kicks in — with
   WhatsApp + all 7 social links, the row is too wide to fit laptop-size
   viewports (~1000-1300px) without this, and it can't wrap. */
@media (max-width: 1300px) {
  .header-top-inner {
    gap: 12px;
  }

  .header-top-contact {
    margin-left: 12px;
  }

  .header-top-item {
    padding: 4px 10px;
    font-size: 0.78rem;
  }

  .header-top-social {
    gap: 6px;
  }

  .header-social-icon {
    width: 27px;
    height: 27px;
    font-size: 0.72rem;
  }
}

@media (max-width: 991px) {
  .nav-toggler {
    display: flex;
    margin-left: 12px;
  }

  .brand-logo {
    max-height: 32px;
  }

  /* One line on mobile: logo on the left, WhatsApp + menu grouped
     together on the right (not clinging to the logo). Drop the contact
     text, the email icon, and the social row so nothing else competes
     for space in that single row. */
  .header-top-item span {
    display: none;
  }

  .header-top-contact {
    margin-left: auto;
    margin-right: 0;
  }

  .header-top-contact .header-top-item:nth-child(3) {
    display: none;
  }

  .header-top-social {
    display: none;
  }

  /* The bottom bar now only holds the nav dropdown panel (opened via the
     toggler up in the top bar), so it should take no visible space of
     its own while closed. Overriding the scrolled/compact rule too since
     it's more specific and would otherwise win. */
  .header-nav-row,
  .site-header-sticky.is-scrolled .header-nav-row {
    padding: 0;
  }

  /* The top bar now carries the menu button, so it must stay visible
     (not collapse away) once the page is scrolled. */
  .site-header-sticky.is-scrolled .header-top-bar {
    max-height: 64px;
    opacity: 1;
    border-color: rgba(var(--bt-accent-rgb, 234, 51, 45), 0.15);
  }

  /* Nav becomes a dropdown card under the header when opened */
  .custom-nav {
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    right: 0;
    z-index: 50;
    flex-direction: column;
    align-items: stretch !important;
    gap: 12px;
    background-color: #ffffff;
    border-radius: 20px;
    padding: 16px;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.18);
    font-size: 0.85rem;
  }

  .nav-pill-group {
    flex-direction: column;
    align-items: stretch !important;
    background-color: transparent;
    padding: 0;
    gap: 4px;
  }

  .nav-item-link {
    padding: 12px 14px;
    border-radius: 14px;
    background-color: #f3f2ee;
    color: #2c2c2c;
    gap: 8px;
    width: 100%;
    justify-items: left;
  }

  .nav-item-link:hover,
  .nav-item-link.active {
    transform: none;
    background-color: #2c2c2c;
    color: #ffffff;
  }

  .contact-pill-btn {
    margin-left: 0;
    justify-content: center;
    padding: 12px 15px;
    border-radius: 14px;
  }

  .red-dot {
    width: 6px;
    height: 6px;
  }

  .nav-item-link.dropdown-toggle {
    justify-content: left;
  }

  .nav-dropdown-menu {
    position: static !important;
    inset: auto !important;
    transform: none !important;
    box-shadow: none;
    background-color: transparent;
    border-radius: 0;
    padding: 4px 0 4px 10px;
    margin: 2px 0 0 !important;
    border-left: 2px solid rgba(var(--bt-accent-rgb, 234, 51, 45), 0.25);
  }

  .nav-dropdown-item {
    color: #555555;
    background-color: transparent;
    padding: 10px 12px;
  }

  .nav-dropdown-item:hover {
    background-color: #f3f2ee;
  }

  .nav-dropdown-menu .dropdown-divider {
    border-color: rgba(0, 0, 0, 0.08);
  }

  .nav-dropdown-submenu-menu {
    display: block !important;
    position: static !important;
    padding-left: 12px;
  }

  .nav-dropdown-submenu-caret {
    display: none;
  }
}

/* Shared search box (website-portfolio.php, case-studies/digital-360 niche
   tabs, and the brand-identity gallery pages) — lives here instead of
   case-studies.css since header.css loads on every page, including the
   gallery pages that don't pull in case-studies.css. */
.wp-search-wrap {
  position: relative;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
}

.wp-search-icon {
  position: absolute;
  top: 50%;
  left: 20px;
  transform: translateY(-50%);
  color: #999999;
  font-size: 0.9rem;
  pointer-events: none;
}

.wp-search-input {
  width: 100%;
  background-color: #ffffff;
  border: 1px solid #e2dfd6;
  border-radius: 50px;
  padding: 13px 20px 13px 46px;
  font-size: 0.95rem;
  font-family: 'Plus Jakarta Sans', sans-serif;
  color: #111111;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.wp-search-input::placeholder {
  color: #999999;
}

.wp-search-input:focus {
  outline: none;
  border-color: #ea332d;
  box-shadow: 0 0 0 4px rgba(234, 51, 45, 0.14);
}

.wp-no-results {
  text-align: center;
  color: #777777;
  font-size: 0.95rem;
  padding: 40px 0;
}

@media (max-width: 576px) {
  .header-top-inner,
  .header-nav-row {
    padding: 8px 10px;
    gap: 8px;
  }

  /* Keep tap-to-call/WhatsApp, drop email/social entirely at phone width */
  .header-top-item:nth-child(3) {
    display: none;
  }

  body{
    overflow-x: hidden;
  }
  .brand-logo {
    max-height: 35px;
  }

  .nav-toggler {
    width: 38px;
    height: 38px;
  }

  .nav-item-link.active .red-dot {
    outline-width: 1.5px;
    outline-offset: 1px;
  }
}