/* Perf/CLS/accessibility fixes - keep visuals identical */

/* Language selector: avoid FontAwesome caret (late webfont load causes CLS). */
ul.right-side-head li.lang{ position: relative; }
ul.right-side-head li.lang::before{
  content:'' !important;
  position:absolute;
  top:50%;
  right:8px;
  width:0;
  height:0;
  border-left:4px solid transparent;
  border-right:4px solid transparent;
  border-top:6px solid #000;
  transform: translateY(-30%);
  pointer-events:none;
}

/* Keep selector width stable so font swap doesn't change layout. */
ul.right-side-head li.lang select#languageSelector{
  min-width: 110px;
  height: 32px;
  line-height: 32px;
  box-sizing: border-box;
  padding-right: 22px !important;
}

/* Visually-hidden utility (used for hidden LCP img / labels if needed). */
.bsit-visually-hidden{
  position:absolute !important;
  width:1px !important;
  height:1px !important;
  padding:0 !important;
  margin:-1px !important;
  overflow:hidden !important;
  clip:rect(0,0,0,0) !important;
  white-space:nowrap !important;
  border:0 !important;
}

/* Keep back-to-top above cookie consent banners (matches WhatsApp/tawk behavior) */
.to-top{
  /* Never use max-z here. It breaks page-transition + modals stacking. */
  z-index: var(--bsit-z-float, 2147482000) !important;
  bottom: calc(24px + var(--bsit-cookie-offset, 0px)) !important;
}

/* --------------------------------------------------------------------------
   Global z-index stacking (duplicated here so it loads early, site-wide)
   -------------------------------------------------------------------------- */
:root{
  --bsit-z-modal: 2147483600;
  --bsit-z-backdrop: 2147483500;
  --bsit-z-float: 2147482000;
  --bsit-z-cookie: 2147481500;
  --bsit-z-chat: 2147481400;
  --bsit-z-transition: 2147483640;
}

/* Page transition overlay must sit above every floating widget */
.bsit-page-transition{ z-index: var(--bsit-z-transition) !important; }

/* Strong override: never paint solid background behind the honeycomb curtain */
html body #bsitPageTransition.bsit-page-transition{
  background: transparent !important;
  }


/* During page transitions, hide all floating widgets to avoid visual leaks */
html.bsit-pt-lock .to-top,
html.bsit-pt-lock #bsitInternshipFloat,
html.bsit-pt-lock .wa-float,
html.bsit-pt-lock .cc-banner,
html.bsit-pt-lock .cc-modal-backdrop,
html.bsit-pt-lock .cc-reopen,
html.bsit-pt-lock #tawkchat-container,
html.bsit-pt-lock #tawkchat-container iframe,
html.bsit-pt-lock .tawk-min-container,
html.bsit-pt-lock .tawk-button,
html.bsit-pt-lock .tawk-chat-bubble,
html.bsit-pt-lock .tawk-to,
html.bsit-pt-lock .tawk-widget{
  display:none !important;
  opacity:0 !important;
  visibility:hidden !important;
  pointer-events:none !important;
}


/* Video testimonial tiles (Owl Carousel + lightbox trigger) */
.bsit-video-tile{
  display:block;
  border-radius:18px;
  overflow:hidden;
  background:#fff;
  box-shadow:0 18px 28px rgba(0,0,0,.12);
  text-decoration:none !important;
}
.bsit-video-thumb{
  position:relative;
  width:100%;
  padding-top:56.25%;
  background-size:cover;
  background-position:center;
}
.bsit-video-thumb:after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.25) 100%);
}
.bsit-video-thumb .bsit-play{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  width:74px;
  height:74px;
  border-radius:50%;
  background:rgba(255,255,255,.92);
  box-shadow:0 10px 18px rgba(0,0,0,.25);
  z-index:2;
  display:flex;
  align-items:center;
  justify-content:center;
  pointer-events:none;
}
.bsit-video-thumb .bsit-play:before{
  content:"";
  width:0;
  height:0;
  margin-left:4px; /* optical centering */
  border-top:12px solid transparent;
  border-bottom:12px solid transparent;
  border-left:18px solid #111;
}
.bsit-video-tile:hover .bsit-play{
  transform:translate(-50%,-50%) scale(1.05);
}
.bsit-video-meta{
  padding:16px 18px 18px;
}
.bsit-video-meta h4{
  margin:0 0 6px;
  font-size:18px;
  font-weight:700;
}
.bsit-video-meta p{
  margin:0;
  opacity:.75;
}

/* Ensure Owl items stay visible even if init is delayed */
.owl-carousel-video{ display:block; }
.owl-carousel-video .item{ padding:12px 6px; }

/* 404 stat-card links */
.hero-stats a.stat-card{
  text-decoration:none !important;
  color:inherit;
  display:block;
}
.hero-stats a.stat-card:focus{
  outline:2px solid rgba(255,204,107,.7);
  outline-offset:4px;
  border-radius:14px;
}



/* Testimonials page: horizontal scroll for video testimonials (no visible scrollbar) */
.bsit-video-scroll.bsit-hscroll{
  display:flex;
  gap:24px;
  overflow-x:auto;
  overflow-y:hidden;
  padding: 12px 6px 26px; /* allow smooth shadow without clipping */
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
}
.bsit-video-scroll.bsit-hscroll .item{
  flex: 0 0 360px;
  scroll-snap-align:start;
}
@media (max-width: 991px){
  .bsit-video-scroll.bsit-hscroll .item{ flex-basis: 300px; }
}
@media (max-width: 575px){
  .bsit-video-scroll.bsit-hscroll{
    gap:16px;
    padding: 10px 4px 22px;
  }
  .bsit-video-scroll.bsit-hscroll .item{ flex-basis: 260px; }
}

.bsit-hide-scrollbar{
  scrollbar-width:none; /* Firefox */
}
.bsit-hide-scrollbar::-webkit-scrollbar{ display:none; }

/* Ensure play icon is perfectly centered on video tiles */
.bsit-video-thumb{
  position:relative;
}
.bsit-play{
  position:absolute;
  top:50%;
  left:50%;
  right:auto;
  bottom:auto;
  inset:auto;
  margin:0;
  transform:translate(-50%,-50%);
}

/* Homepage (Why choose us) video: ensure play button renders correctly even if minified CSS misses it */
.wcus-video .bsit-video-trigger{ position:relative; }
.wcus-video .bsit-play{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  width:92px;
  height:92px;
  border-radius:999px;
  background:#ffffff;
  display:grid;
  place-items:center;
  box-shadow:0 15px 40px rgba(0,0,0,.25), inset 0 0 0 8px rgba(239,180,5,.4);
}
.wcus-video .bsit-play::before{
  content:"";
  width:0;
  height:0;
  border-left:24px solid #cd7a00;
  border-top:14px solid transparent;
  border-bottom:14px solid transparent;
  margin-left:6px;
}

/* Smooth shadow for video tiles without harsh edges/clipping */
.bsit-video-tile{
  box-shadow: 0 18px 45px rgba(0,0,0,.12);
}


.bsit-hscroll{ cursor: grab; }
.bsit-hscroll.is-dragging{ cursor: grabbing; }


/* Video testimonial nav arrows (top-right) */
.bsit-testimonials-videos{ position: relative; }
.bsit-testimonials-videos .owl-nav{
  position:absolute;
  right: 0;
  top: -64px;
  display:flex;
  gap:0;
  z-index:5;
}
.bsit-testimonials-videos .owl-nav button{
  width:56px;
  height:44px;
  background:#fff;
  border:1px solid rgba(0,0,0,.12);
  color:#111;
  font-size:28px;
  line-height:1;
  padding:0;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 10px 30px rgba(0,0,0,.10);
}
.bsit-testimonials-videos .owl-nav button:hover{
  transform: translateY(-1px);
}
.bsit-testimonials-videos .owl-nav button.owl-prev{
  border-top-left-radius:16px;
  border-bottom-left-radius:16px;
}
.bsit-testimonials-videos .owl-nav button.owl-next{
  border-top-right-radius:16px;
  border-bottom-right-radius:16px;
  border-left:0;
}
.bsit-testimonials-videos .owl-nav [class*='owl-']{ margin:0 !important; }

/* Ensure play icon stays centered on thumbnails (avoid clipping) */
.bsit-video-thumb{ position:relative; }
.bsit-video-thumb .bsit-play,
.bsit-video-thumb .play-icon,
.bsit-video-thumb .video-play{
  position:absolute;
  top:50%;
  left:50%;
  right:auto;
  bottom:auto;
  transform:translate(-50%,-50%);
}



/* =========================================================
   TESTIMONIALS: Owl nav fixes (mobile overlap + clean icons)
   ========================================================= */

/* Ensure owl nav is visible even though base css hides it */
.bsit-testimonials-videos .owl-nav,
.bsit-testimonials-text .owl-nav{
  display: flex !important;
}

/* Remove default owl span text so it doesn't overlap / look like 'X' */
.bsit-testimonials-videos .owl-nav button span,
.bsit-testimonials-text .owl-nav button span{
  display:none !important;
}
.bsit-testimonials-videos .owl-nav button,
.bsit-testimonials-text .owl-nav button{
  font-size:0 !important;
  line-height:0 !important;
}

/* Video nav: keep at top-right on desktop, but avoid overlapping heading text on mobile */
@media (max-width: 767.98px){
  .bsit-testimonials-videos .content-heading{
    padding-right: 140px; /* space for arrows */
  }
  .bsit-testimonials-videos .owl-nav{
    top: 16px !important;
    right: 15px !important;
  }
}

/* Written testimonials nav: consistent arrows + positioning like homepage */
.bsit-testimonials-text .outer-wrap-testimonial{ position: relative; }
.bsit-testimonials-text .owl-nav{
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  transform: translateY(-50%);
  justify-content: space-between;
  padding: 0 10px;
  z-index: 5;
  pointer-events: none; /* allow clicks only on buttons */
}
.bsit-testimonials-text .owl-nav button{
  pointer-events: auto;
  width: 54px;
  height: 54px;
  border-radius: 16px;
  border: 0;
  background: transparent;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 20px 20px;
  box-shadow: none;
  opacity: .9;
}
.bsit-testimonials-text .owl-nav button.owl-prev{
  background-image: url(../images/owl-left.svg);
}
.bsit-testimonials-text .owl-nav button.owl-next{
  background-image: url(../images/owl-right.svg);
}
.bsit-testimonials-text .owl-nav button:hover{
  opacity: 1;
  transform: translateY(-1px);
}

/* On small screens hide written arrows to avoid overlap (swipe/drag works) */
@media (max-width: 767.98px){
  .bsit-testimonials-text .owl-nav{ display:none !important; }
  .bsit-testimonials-videos .owl-nav{ display:flex !important; }
}

/* Prevent "floating" circle icons from bleeding outside the section (homepage choose-us list) */
.outer-wrap-choose-us .left-area .circle-wrap{ margin-left: 0 !important; }
.outer-wrap-choose-us .right-area{ padding-left: 24px !important; }


/* --- BSIT FIX: Bootstrap 4 backdrops with Bootstrap 3 CSS (Insights modals) --- */
.modal-backdrop.show{
  opacity: .5 !important;
}
.modal-backdrop.fade.show{
  opacity: .5 !important;
}
/* Ensure Bootstrap 4 'show' modals render with legacy CSS loaded */
.modal.show{
  display: block;
}

/* --- BSIT FIX: Force visible dark overlay for ALL modal systems (Insights popups) --- */
.modal-backdrop,
.modal-backdrop.in,
.modal-backdrop.show{
  background: #000 !important;
  opacity: 0.65 !important;
}
/* Keep the backdrop ABOVE any section-level z-index values, but BELOW the modal */
.modal-backdrop{ z-index: var(--bsit-z-backdrop, 2147483500) !important; }
.modal,
.modal.in,
.modal.show{ z-index: var(--bsit-z-modal, 2147483600) !important; }

/*
  BSIT FIX: Some media popups (e.g., Design Mockups on Insights) can open without
  a visible Bootstrap backdrop in certain environments. To guarantee a consistent
  dimmed background (matching other popups), we apply an overlay directly to the
  media modal container.

  This is scoped to `.bsit-media-modal` so normal Bootstrap modals keep using the
  standard `.modal-backdrop`.
*/
/* Apply the same guaranteed dim overlay for Insights popups: Design, Blog, Case Study */
.bsit-media-modal.modal.show,
.bsit-media-modal.modal.in,
.bsit-case-modal.modal.show,
.bsit-case-modal.modal.in,
.bsit-blog-modal.modal.show,
.bsit-blog-modal.modal.in{
  background: rgba(0,0,0,.65) !important;
}

/* Keep the dialog interactive and above the overlay */
.bsit-media-modal .modal-dialog,
.bsit-case-modal .modal-dialog,
.bsit-blog-modal .modal-dialog{
  position: relative;
  z-index: 1;
}

/* =========================
   BSIT PWA: Install Modal (responsive)
   ========================= */
.bsit-pwa-modal .modal-dialog{ max-width: 520px; }

.bsit-pwa-modal .modal-content{
  border-radius: 14px;
  overflow: hidden;
  /* iOS Safari can be finicky with position:sticky inside modals.
     Use a flex layout so the footer (buttons) is always visible. */
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 24px);
}

.bsit-pwa-modal .modal-header{
  border-bottom: 1px solid rgba(0,0,0,.08);
}

.bsit-pwa-modal .modal-footer{
  border-top: 1px solid rgba(0,0,0,.08);
  position: static !important;
  box-shadow: none !important;
  flex: 0 0 auto;
}

.bsit-pwa-modal .modal-body{
  /* Override global modal padding that can create big empty gaps */
  padding-bottom: 16px !important;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  flex: 1 1 auto;
}

/* Make "Not now" visible on the white modal background */
.bsit-pwa-modal .btn-bsit-secondary{
  border-color: rgba(0,0,0,.25) !important;
  color: #222 !important;
}
.bsit-pwa-modal .btn-bsit-secondary:hover{
  background: rgba(0,0,0,.06) !important;
}

.bsit-pwa-modal .modal-title{ font-weight: 700; }

.bsit-pwa-modal .bsit-pwa-benefits{
  /* Use custom bullets to avoid clipping across browsers */
  margin: 10px 0 0;
  padding-left: 0 !important;
  list-style: none !important;
}

.bsit-pwa-modal .bsit-pwa-benefits li{
  margin-bottom: 6px;
  position: relative;
  padding-left: 18px;
}

.bsit-pwa-modal .bsit-pwa-benefits li::before{
  content: "\2022";
  position: absolute;
  left: 0;
  top: 0;
  line-height: 1.4;
}

@media (max-width: 575.98px){
  .bsit-pwa-modal .modal-dialog{ margin: 12px; }

  .bsit-pwa-modal .modal-body{ padding-bottom: 12px !important; }

  .bsit-pwa-modal .modal-footer{
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-top: 10px;
    padding-bottom: 14px;
  }

  .bsit-pwa-modal .modal-footer .btn{ width: 100%; }

  /* Hide "Not now" on small screens to keep modal compact (X button is available) */
  .bsit-pwa-modal .modal-footer .btn-bsit-secondary{ display: none !important; }
}

/* --- BSIT Social SVG icons --- */
.social-icon li a, .bsit-social-list a { display: inline-flex; align-items: center; justify-content: center; }
.social-icon { flex-wrap: wrap; gap: 12px; }
.social-icon li { padding-right: 0 !important; }
.social-icon .bsit-social-svg { width: 18px; height: 18px; display: block; }
.bsit-social-list .bsit-social-svg { width: 16px; height: 16px; display: block; }
@media (max-width: 575.98px){
  .lower-footer .social-icon{ justify-content: center; }
}

/* --- BSIT: Testimonials page nav arrows (avoid double/overlapped glyphs) ---
   Some browsers/fonts can render an extra text glyph inside Owl nav buttons.
   We force the button text to be visually suppressed so only the background SVG shows. */
body.testimonial-page .testimonial-sec .owl-carousel .owl-nav button.owl-prev,
body.testimonial-page .testimonial-sec .owl-carousel .owl-nav button.owl-next{
  font-size: 0 !important;
  line-height: 0 !important;
  color: transparent !important;
  text-shadow: none !important;
  text-indent: -9999px;
  overflow: hidden;
  background-position: center !important;
  background-color: transparent !important;
}
body.testimonial-page .testimonial-sec .owl-carousel .owl-nav button.owl-prev::before,
body.testimonial-page .testimonial-sec .owl-carousel .owl-nav button.owl-next::before,
body.testimonial-page .testimonial-sec .owl-carousel .owl-nav button.owl-prev::after,
body.testimonial-page .testimonial-sec .owl-carousel .owl-nav button.owl-next::after{
  content: none !important;
}

/* --------------------------------------------------------------------------
   BSIT V18: Page transition (honeycomb + bees, stable across browsers)
   - Fixes broken CSS parsing from previous versions (unclosed comments/keyframes)
   - Honeycomb curtain is the ONLY background (no solid yellow panels)
   - Bees appear ONLY after honeycomb reaches full-screen
   - Exit uses the exact reverse of entry
   -------------------------------------------------------------------------- */

:root{
  --bsit-pt-duration: 2300ms;
  --bsit-pt-ease: cubic-bezier(0.65, 0, 0.35, 1);
}

/* Overlay container */
html body #bsitPageTransition.bsit-page-transition{
  background: transparent !important;
}

.bsit-page-transition{
  position: fixed !important;
  inset: 0 !important;
  z-index: var(--bsit-z-transition, 2147483640) !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  padding: calc(env(safe-area-inset-top, 0px) + 16px) 16px calc(env(safe-area-inset-bottom, 0px) + 16px) !important;

  opacity: 0;
  visibility: hidden;
  pointer-events: none;

  overflow: hidden !important;

  transform: translate3d(0,0,0) !important;
  -webkit-transform: translate3d(0,0,0) !important;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* Ensure mobile isn't disabled by any legacy rules */
@media (max-width: 767.98px){
  html body .bsit-page-transition{ display:flex !important; }
}

/* Prevent any legacy keyframes on the container */
.bsit-page-transition.bsit-leave,
.bsit-page-transition.bsit-enter{
  animation: none !important;
  background: transparent !important;
}

.bsit-page-transition.is-active{
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* Honeycomb curtain */
.bsit-page-transition .bsit-pt-curtain{
  position: absolute;
  inset: 0;
  z-index: 1;

  background-color: #ffe345 !important;
  background-image: url("data:image/svg+xml;utf8,<svg version='1.1' viewBox='0 0 183.2 300' xmlns='http://www.w3.org/2000/svg' width='183.2' height='300'><g fill='none' stroke-width='10' stroke='%23ffcd12' opacity='0.55'><g transform='translate(5 5)'><path d='M 43.3 0 86.6 25 86.6 75 43.3 100 0 75 0 25 z'></path><g transform='translate(86.6 0)'><path d='M 43.3 0 86.6 25 86.6 75 43.3 100 0 75 0 25 z'></path></g><g transform='translate(43.3 75)'><path d='M 43.3 0 86.6 25 86.6 75 43.3 100 0 75 0 25 z'></path></g><g transform='translate(0 150)'><path d='M 43.3 0 86.6 25 86.6 75 43.3 100 0 75 0 25 z'></path><g transform='translate(86.6 0)'><path d='M 43.3 0 86.6 25 86.6 75 43.3 100 0 75 0 25 z'></path></g><g transform='translate(43.3 75)'><path d='M 43.3 0 86.6 25 86.6 75 43.3 100 0 75 0 25 z'></path></g></g></g></g></svg>") !important;
  background-repeat: repeat !important;
  background-size: 183.2px 300px !important;

  transform-origin: 50% 50%;
  transform: translate3d(0,0,0) scale3d(1,0.02,1);
  -webkit-transform: translate3d(0,0,0) scale3d(1,0.02,1);

  will-change: transform, clip-path;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* Bees stage */
.bsit-page-transition .bsit-pt-stage{
  position: relative;
  z-index: 2;
  width: min(86vmin, 420px);
  max-width: 420px;

  display: flex;
  align-items: center;
  justify-content: center;

  transform: translate3d(0,0,0);
  -webkit-transform: translate3d(0,0,0);

  opacity: 0; /* default hidden; animated per state */
  will-change: opacity;
}

/*
  Keep the bees loader visible until the transition fully exits.
  - During LEAVE: stage visibility is controlled by bsitStageIn (bees appear only
    after the honeycomb covers the full screen).
  - During ENTER + the pre-enter hold: keep bees visible (no mid-hide), and let
    them disappear only when the overlay is removed (is-active removed).
*/
/* Keep the bees visible during the full-screen hold ONLY.
   As soon as the honeycomb starts compressing (ENTER), allow stage to fade out. */
.bsit-page-transition.is-active:not(.bsit-leave):not(.bsit-enter) .bsit-pt-stage{
  opacity: 1 !important;
  animation: none !important;
}

@media (max-width: 575.98px){
  .bsit-page-transition .bsit-pt-stage{ width: min(92vmin, 360px); }
}

.bsit-page-transition .bsit-pt-loader{
  width: clamp(240px, 50vmin, 460px);
  aspect-ratio: 1 / 1;
  position: relative;
}

.bsit-page-transition .bsit-pt-orbit{
  position: absolute;
  inset: 0;
  animation: bsitBeeOrbit 5s infinite reverse cubic-bezier(0.35, 0.55, 0.65, 0.45);
  animation-delay: -2.5s; /* reduce "restarting" feel after navigation */
  transform-origin: 50% 50%;
  will-change: transform;
}

.bsit-page-transition .bsit-pt-bee-wrap{
  position: absolute;
  inset: 0;
  display: block;
}

.bsit-page-transition .bsit-pt-bee-wrap img,
.bsit-page-transition .bsit-pt-bee-wrap svg{
  position: absolute;
  left: 50%;
  top: 6%;
  width: clamp(92px, 16vmin, 190px);
  height: auto;
  transform: translate3d(-50%,0,0);
  -webkit-transform: translate3d(-50%,0,0);
  filter: drop-shadow(0 6px 12px rgba(0,0,0,0.16));
  image-rendering: -webkit-optimize-contrast;
}

/* SVG bee: keep crisp + ensure it never clips wings */
.bsit-page-transition .bsit-pt-bee-wrap svg{
  overflow: visible;
  pointer-events: none;
}

.bsit-page-transition .bsit-pt-bee-wrap.b2{ transform: rotate(120deg); }
.bsit-page-transition .bsit-pt-bee-wrap.b3{ transform: rotate(240deg); }

@keyframes bsitBeeOrbit{
  0%{ transform: rotate(0deg); }
  33%{ transform: rotate(120deg); }
  67%{ transform: rotate(240deg); }
  100%{ transform: rotate(360deg); }
}

/* Curtain animation (fallback: transform scale) */
@keyframes bsitCurtainMorph{
  0%, 12% { transform: translate3d(0,0,0) scale3d(1,0.02,1); }
  26%, 40%{ transform: translate3d(0,0,0) scale3d(0.2,0.02,1); }
  62%     { transform: translate3d(0,0,0) scale3d(0.2,1,1); }
  74%, 100%{ transform: translate3d(0,0,0) scale3d(1,1,1); }
}

/* Preferred (no-flicker): clip-path morph keeps honeycomb crisp */
@keyframes bsitCurtainMorphClip{
  0%, 12%{
    clip-path: inset(49% 0 49% 0);
    -webkit-clip-path: inset(49% 0 49% 0);
  }
  26%, 40%{
    clip-path: inset(49% 40% 49% 40%);
    -webkit-clip-path: inset(49% 40% 49% 40%);
  }
  62%{
    clip-path: inset(0 40% 0 40%);
    -webkit-clip-path: inset(0 40% 0 40%);
  }
  74%, 100%{
    clip-path: inset(0 0 0 0);
    -webkit-clip-path: inset(0 0 0 0);
  }
}

/* Apply animations */
.bsit-page-transition.bsit-leave .bsit-pt-curtain{
  animation: bsitCurtainMorph var(--bsit-pt-duration) var(--bsit-pt-ease) both;
}
.bsit-page-transition.bsit-enter .bsit-pt-curtain{
  animation: bsitCurtainMorph var(--bsit-pt-duration) var(--bsit-pt-ease) reverse both;
}

@supports ((clip-path: inset(0 0 0 0)) or (-webkit-clip-path: inset(0 0 0 0))) {
  .bsit-page-transition .bsit-pt-curtain{
    transform: none !important;
    -webkit-transform: none !important;
  }
  .bsit-page-transition.bsit-leave .bsit-pt-curtain{
    animation-name: bsitCurtainMorphClip;
  }
  .bsit-page-transition.bsit-enter .bsit-pt-curtain{
    animation-name: bsitCurtainMorphClip;
    animation-direction: reverse;
  }
}

/* Bees appear ONLY when honeycomb is fully covering */
.bsit-page-transition.bsit-leave .bsit-pt-stage{
  animation: bsitStageIn var(--bsit-pt-duration) ease-out both;
}
@keyframes bsitStageIn{
  0%, 73% { opacity: 0; }
  78%, 100%{ opacity: 1; }
}

.bsit-page-transition.bsit-enter .bsit-pt-stage{
  animation: bsitStageOut var(--bsit-pt-duration) ease-out both;
}
@keyframes bsitStageOut{
  /* Bees disappear smoothly right when the honeycomb starts compressing */
  0%, 4% { opacity: 1; }
  10%, 100% { opacity: 0; }
}

/* Preload cover: prevents flashes while new page loads */
html.bsit-pt-preload .bsit-page-transition{
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: none !important;
}
html.bsit-pt-preload .bsit-page-transition .bsit-pt-stage{
  opacity: 1 !important;
}

html.bsit-pt-preload .bsit-page-transition .bsit-pt-curtain{
  /* Force full-screen cover on initial load (prevents "thin line" bug) */
  transform: translate3d(0,0,0) scale3d(1,1,1) !important;
  -webkit-transform: translate3d(0,0,0) scale3d(1,1,1) !important;

  clip-path: inset(0 0 0 0);
  -webkit-clip-path: inset(0 0 0 0);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .bsit-page-transition{ display:none !important; }
}


/* ===== Home Hero Bee Animation (Honeycomb visual) ===== */
/* Matches the exact figure positioning seen in DevTools (inspect screenshot). */
.banner-back_img .hero-bee-figure{
  position: absolute;
  width: 48%;
  right: 130px;
  top: 38%;
  transform: translateY(-50%);
  z-index: 1;
  pointer-events: none;
  margin: 0;
  overflow: visible;
}

.banner-back_img .hero-bee-svg{
  width: 100%;
  height: auto;
  display: block;
  overflow: visible;
}

/* Honeycomb PNG: no drop shadow (per requirement). */
.banner-back_img .hero-honeycomb-img{
  opacity: 1;
  filter: none !important;
}

/* Labels */
.banner-back_img .hero-cell-label{
  font-size: 26px;
  font-weight: 800;
  fill: rgba(0,0,0,0.88);
  stroke: rgba(255,255,255,0.55);
  stroke-width: 4px;
  paint-order: stroke;
  text-anchor: middle;
  dominant-baseline: middle;
}

/* Trails (dotted / animated) */
.banner-back_img .hero-bee-trail{
  stroke: rgba(255, 255, 255, 0.22);
  stroke-width: 3.5;
  fill: none;
  stroke-linecap: round;
  stroke-dasharray: 10 18;
  animation: bsitHeroDash 3s linear infinite;
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.22));
}
.banner-back_img .hero-bee-trail2{
  stroke: rgba(240, 184, 5, 0.18);
  stroke-width: 6;
  fill: none;
  stroke-linecap: round;
  stroke-dasharray: 1 20;
  animation: bsitHeroDash 2.2s linear infinite reverse;
}
@keyframes bsitHeroDash{
  to { stroke-dashoffset: -240; }
}

/* Bees */
.banner-back_img .hero-bee{
  filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.22));
}

/* Keep the hero bee anchored to the junction (SVG handles positioning).
   Apply ONLY a gentle float/pulse via CSS so there is no load-time jump. */
.banner-back_img #heroBeeC{
  transform-origin: 50% 50%;
  transform-box: fill-box;
  will-change: transform;
  /* Subtle zoom in/out + float (smooth, “buzzing” feel) */
  animation: bsitHeroBeeHover 1800ms ease-in-out infinite alternate;
}
@keyframes bsitHeroBeeHover{
  from{ transform: translate3d(0,0,0) scale(1); }
  to  { transform: translate3d(0,-8px,0) scale(1.045); }
}
@media (prefers-reduced-motion: reduce){
  .banner-back_img #heroBeeC{ animation: none !important; }
}

/* Make bee wings darker so they stay visible on white areas */
.banner-back_img .hero-bee-wing{
  fill: rgba(255, 255, 255, 0.78);
  stroke: rgba(240, 184, 5, 0.95);
  stroke-width: 1.6px;
  paint-order: stroke fill;
  filter: drop-shadow(0 4px 10px rgba(240, 184, 5, 0.18)) drop-shadow(0 4px 10px rgba(0, 0, 0, 0.12));
  transform-box: fill-box;
  will-change: transform, opacity;
}
.banner-back_img .hero-bee-wing--l{
  transform-origin: 85% 55%;
  animation: bsitWingFlapL 150ms ease-in-out infinite alternate;
}
.banner-back_img .hero-bee-wing--r{
  transform-origin: 15% 55%;
  animation: bsitWingFlapR 150ms ease-in-out infinite alternate;
  animation-delay: 75ms;
}
@keyframes bsitWingFlapL{
  from { transform: rotate(18deg) scaleY(0.95); opacity: 0.70; }
  to   { transform: rotate(-18deg) scaleY(1.05); opacity: 0.98; }
}
@keyframes bsitWingFlapR{
  from { transform: rotate(-18deg) scaleY(0.95); opacity: 0.70; }
  to   { transform: rotate(18deg) scaleY(1.05); opacity: 0.98; }
}

/* Keep the visual usable on smaller widths */
@media (max-width: 991px){
  .banner-back_img .hero-bee-figure{
    width: 72%;
    right: 18px;
    top: 46%;
  }
}
@media (max-width: 575px){
  .banner-back_img .hero-bee-figure{
    width: 92%;
    right: 0;
    left: 0;
    margin: 0 auto;
    top: 56%;
  }
}

/* Hide the hero honeycomb visual on mobile widths (requested).
   Visible on tablets/desktop, hidden on smaller phones. */
@media (max-width: 767.98px){
  .banner-back_img .hero-bee-figure{
    display: none !important;
  }
}


/* ============================
   Bee wing highlight + shared wing animation
   (nav logo, back-to-top, About Us, We Specialize)
   ============================ */

/* Darker yellow connector lines (We Specialize section + any flow lines using --line) */
.bee-animation{ --line: #b56600; }
/* Stronger lines + dots for better contrast */
.bee-animation .flow{ stroke-width: 3.2 !important; opacity: 0.95; }
.bee-animation .spark circle{ fill: var(--line) !important; opacity: 0.98; }
.bee-animation .node .bubble{ stroke: var(--line) !important; }


/* Darker / more visible trails inside the honeycomb maze */
.banner-back_img .hero-bee-trail{ stroke: rgba(205,122,0,0.82) !important; }
.banner-back_img .hero-bee-trail2{ stroke: rgba(205,122,0,0.56) !important; }

/* Unified wing look (hero + all inline bee SVGs)
   Natural bee wings: translucent white fill + soft grey outline */
.bsit-bee-wing,
.banner-back_img .hero-bee-wing{
  fill: rgba(255, 255, 255, 0.68) !important;
  stroke: rgba(150, 150, 150, 0.92) !important;
  stroke-width: 2.6px !important;
  vector-effect: non-scaling-stroke;
  paint-order: stroke fill;
  filter: drop-shadow(0 3px 8px rgba(0,0,0,0.14)) !important;
}

/* Make wings a bit bigger + keep them crisp */
.bsit-bee-wing{ transform-box: fill-box; will-change: transform, opacity; }

/* Apply the same flap to ALL bees (hero + other SVG bees) */
.bsit-bee-wing--l{ transform-origin: 85% 55%; animation: bsitWingFlapL 185ms ease-in-out infinite alternate; }
.bsit-bee-wing--r{ transform-origin: 15% 55%; animation: bsitWingFlapR 185ms ease-in-out infinite alternate; animation-delay: 92ms; }

/* Natural flap (less "cartoony" scaling, more like real wings) */
@keyframes bsitWingFlapL{
  from { transform: rotate(14deg) scale(1.10, 0.92); opacity: 0.62; }
  to   { transform: rotate(-14deg) scale(1.32, 1.08); opacity: 0.92; }
}
@keyframes bsitWingFlapR{
  from { transform: rotate(-14deg) scale(1.10, 0.92); opacity: 0.62; }
  to   { transform: rotate(14deg) scale(1.32, 1.08); opacity: 0.92; }
}

/* Reusable inline bee SVG sizing helpers */
.bsit-bee-mark{ display:block; width:100%; height:auto; overflow:visible; }

/* Navbar brand bee size (slightly smaller as requested) */
.navbar-brand .bsit-bee-mark{ width: 72px; height: auto; }

@media (max-width: 575.98px){
  .navbar-brand .bsit-bee-mark{ width: 60px; }
}

/* Ensure header brand never clips the bee (antenna) */
.navbar-brand{ overflow: visible !important; line-height: 0; }


/* ============================
   "We specialize in building brands..." right-side animation sizing
   Make the SVG diagram a bit bigger on desktop while keeping the same centered placement.
   Responsive behavior below lg stays unchanged.
   ============================ */

@media (min-width: 992px){
  /* Make the right-side "We specialize..." visual a bit bigger and nudge it to the right */
  .about-us .col-xl-6.col-lg-5{
    justify-content: flex-end !important;
  }

  .about-us .bee-animation{
    max-width: 1040px !important;
    transform: translateX(28px);
  }

  .about-us svg{
    max-width: 1080px !important;
    transform: scale(1.44) !important;
    transform-origin: center !important;
  }

  .about-us svg:hover{
    transform: scale(1.46) !important;
  }

  /* Keep the "We specialize" diagram steady on hover
     so the bee buzz feels identical to the Back-to-top button (no whole-SVG zoom). */
  .about-us .bee-animation > svg:hover{
    transform: scale(1.44) !important;
  }
}


/* Back-to-top bee size */
#toTop .bsit-bee-mark{ width: 34px; height: auto; }

/* Back-to-top: center the bee + keep the same float/buzz as the older IMG version */
.to-top{ display:flex; align-items:center; justify-content:center; overflow: visible; }
.to-top .bsit-bee-mark{
  position: relative;
  z-index: 2;
  will-change: transform, filter;
  transform-origin: 50% 60%;
  animation: bee-flight 4.6s ease-in-out infinite;
  filter: drop-shadow(0 2px 2px rgba(0,0,0,.15));
}
.to-top:hover .bsit-bee-mark,
.to-top:focus-visible .bsit-bee-mark{ animation: bee-buzz .55s linear infinite; }

/* About Us orbit center bee (motion like Back-to-top, hover buzz) */
.bsit-orbit__logo{ overflow: visible !important; }

/* Prevent generic .about-us svg scaling/hover-scaling from affecting the center bee */
.about-us .bsit-orbit__logo > svg.bsit-bee-mark{
  width: 100%;
  height: auto;
  display: block;
  max-width: none;
  aspect-ratio: auto;
  transform: none !important;
  transition: none !important;
  will-change: filter;
  filter: drop-shadow(0 2px 2px rgba(0,0,0,.12));
}

/* Idle flight on the inner <g> so it works even if the parent SVG has transforms */
.about-us .bsit-orbit__logo .bsit-bee{
  transform-box: fill-box;
  transform-origin: 50% 60%;
  will-change: transform;
  /* a bit more travel than the default bee-flight (back-to-top) */
  animation: bee-flight-about 4.6s ease-in-out infinite;
}

/* Slightly larger drift for About Us center bee */
@keyframes bee-flight-about{
  0%   { transform: translate(0, 0) rotate(0deg); }
  12%  { transform: translate(-5px,-10px) rotate(-5deg); }
  25%  { transform: translate(-10px, 0) rotate(-8deg); }
  37%  { transform: translate(-5px, 10px) rotate(-5deg); }
  50%  { transform: translate(0, 0) rotate(0deg); }
  62%  { transform: translate(5px,-10px) rotate(5deg); }
  75%  { transform: translate(10px, 0) rotate(8deg); }
  88%  { transform: translate(5px, 10px) rotate(5deg); }
  100% { transform: translate(0, 0) rotate(0deg); }
}

/* Hover/focus: same buzz as Back-to-top bee */
.about-us .bsit-orbit:hover .bsit-bee,
.about-us .bsit-orbit__logo:hover .bsit-bee,
.about-us .bsit-orbit__logo:focus-visible .bsit-bee{
  animation: bee-buzz .55s linear infinite;
}

/* "We Specialize" (homepage) center bee inside the ring
   Match Back-to-top exactly:
   - Idle: bee-flight
   - Hover: bee-buzz
   Important: hover trigger is the CENTER RING hit-area (stable), not the moving bee.
*/
.bee-animation svg .specialize-center{ cursor: pointer; }

/* Make the center ring a reliable hover target (fill is transparent but still "painted") */
.bee-animation svg .specialize-center > circle{ pointer-events: all; }

.bee-animation #specializeBeeWrap{
  pointer-events: none; /* hover is handled by the center ring hit-area */
  transform-box: fill-box;
  transform-origin: 50% 60%;
  will-change: transform, filter;
  animation: bee-flight 4.6s ease-in-out infinite;
  filter: drop-shadow(0 2px 2px rgba(0,0,0,.15));
}

/* Hover/focus: same buzz animation used by Back-to-top */
.bee-animation svg .specialize-center:hover #specializeBeeWrap,
.bee-animation svg .specialize-center:focus-within #specializeBeeWrap{
  animation: bee-buzz .55s linear infinite;
}


/* WHY CHOOSE US (homepage) – shift icon circles left to overlap the video (desktop only) */
@media (min-width: 992px){
  .why-choose-us .outer-wrap-choose-us{ left: -60px; } /* was -40px in style.css */
  .why-choose-us .left-area .circle-wrap{ margin-left: -25px; } /* was -17px in style.css */
}

/* ------------------------------
   Cal/Calendly CTA consistency
   ------------------------------ */

/* Generic button row spacing (quote forms, etc.) */
.form-actions{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  align-items:center;
}

/* Small helper for flex gaps (Bootstrap 4 doesn't have gap utilities) */
.bsit-flex-gap{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
}

/* Hide dropdown caret where we want a clean look */
.bsit-no-caret.dropdown-toggle::after,
.bsit-dd-toggle.dropdown-toggle::after{
  display:none !important;
}

/* Contact page: keep the two CTAs aligned + spaced */
.bsit-cta-group{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  justify-content:flex-end;
}

/* Contact page: meeting card CTA stack (Calendly + Cal ID) */
.meeting-ctas{
  display:flex;
  flex-direction:column;
  gap:10px;
  align-items:flex-end;
}

/* CTA rows in cards/sections */
.privacy-cta__actions{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  align-items:center;
}

@media (max-width: 767.98px){
  .bsit-cta-group{ justify-content:flex-start; }
  .meeting-ctas{ align-items:flex-start; }
}

/* Prefer reduced motion: stop wing flaps */
@media (prefers-reduced-motion: reduce){
  .bsit-bee-wing--l,
  .bsit-bee-wing--r,
  .banner-back_img .hero-bee-wing--l,
  .banner-back_img .hero-bee-wing--r{ animation: none !important; }

  /* Stop float motion too */
  .to-top .bsit-bee-mark,
  .about-us .bsit-orbit__logo .bsit-bee,
  .bee-animation #specializeBeeWrap,
  .bee-animation #specializeBeeMotion{ animation: none !important; }
}

/* ===============================
   BSIT: Elegant Call Dropdowns
   =============================== */

/* Consistent dropdown toggle (we use our own chevron icon) */
.bsit-dd-toggle{
  display:inline-flex;
  align-items:center;
  gap:8px;
}

.bsit-dd-icon{
  font-size: 12px;
  line-height: 1;
  opacity: .85;
  transform: translateY(1px);
  transition: transform .18s ease, opacity .18s ease;
}

/* Rotate icon when open (Bootstrap adds .show on the parent .dropdown) */
.dropdown.show .bsit-dd-icon{
  transform: translateY(1px) rotate(180deg);
  opacity: 1;
}

/* Dropdown UI */
.dropdown-menu.bsit-dd-menu{
  border-radius: 14px;
  padding: 8px;
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 14px 40px rgba(0,0,0,.18);
  min-width: 220px;
}

.dropdown-menu.bsit-dd-menu .dropdown-item{
  border-radius: 12px;
  padding: 10px 12px;
  font-weight: 700;
  color: #111;
  transition: background .15s ease, color .15s ease;
}

.dropdown-menu.bsit-dd-menu .dropdown-item:hover,
.dropdown-menu.bsit-dd-menu .dropdown-item:focus{
  background: rgba(239,180,5,.12);
  color: #111;
}

/* Hover-to-open (desktop only) */
@media (min-width: 992px){
  .bsit-hover-dd{ position: relative; }

  /* Override Bootstrap's display:none with a smoother reveal */
  .bsit-hover-dd > .dropdown-menu.bsit-dd-menu{
    display:block;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    pointer-events: none;
    transition: opacity .18s ease, transform .18s ease, visibility .18s ease;
  }

  .bsit-hover-dd:hover > .dropdown-menu.bsit-dd-menu,
  .bsit-hover-dd.show > .dropdown-menu.bsit-dd-menu{
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
  }

  .bsit-hover-dd:hover > .bsit-dd-toggle .bsit-dd-icon{
    transform: translateY(1px) rotate(180deg);
    opacity: 1;
  }
}

/* ===============================
   Contact: Strategy Session (Cal ID button match)
   =============================== */

body.contact-page .meeting-calid{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding: 12px 16px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.10);
  background: #efb405;
  color: #111 !important;
  font-weight: 800;
  text-decoration: none;
  box-shadow: 0 10px 24px rgba(0,0,0,.12);
  transition: transform .15s ease, box-shadow .15s ease;
}

body.contact-page .meeting-calid i{ color: inherit; }

body.contact-page .meeting-calid:hover{
  transform: translateY(-1px);
  box-shadow: 0 14px 32px rgba(0,0,0,.16);
}

/* ===============================
   Quote form: action button consistency + single row
   =============================== */

.services-page .quote-form .form-actions{
  gap: 10px;
}

.services-page .quote-form .form-actions .cstm-btn,
.services-page .quote-form .form-actions a.bsit-btn-outline{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 14px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Make secondary anchors look like the Submit button (gold outline) */
.services-page .quote-form .form-actions a.bsit-btn-outline{
  background: transparent;
  border: 2px solid #efb405;
  color: #efb405;
  text-decoration: none;
}

.services-page .quote-form .form-actions a.bsit-btn-outline:hover{
  background: #efb405;
  border-color: #efb405;
  color: #000;
}

@media (min-width: 992px){
  .services-page .quote-form .form-actions{
    flex-wrap: nowrap;
  }

  .services-page .quote-form .form-actions > *{
    flex: 1 1 0;
    min-width: 0;
  }
}

/* Prefer WhatsApp: ensure icon spacing */
.services-page .qcard-wapp .bsit-btn-outline{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: 10px;
}

/* Match sizing with .meeting-pill */
body.contact-page .meeting-calid{
  flex: 1;
  max-width: 180px;
  width: 100%;
  border: none;
}