/* ====================================================================================== */
/* 💡 FILE: assets/css/testimonial.css (FINAL VERSION WITH MANUAL CONTROLS)                */
/* ====================================================================================== */

/* ============================================================ */
/* SECTION: Breadcrumb Banner Styling (REBUILT & FIXED)         */
/* PURPOSE: Containerizes banner image with full visibility and responsiveness */
/* ============================================================ */

/* ============================================================ */
/* SECTION: Banner Content and Text Styling                     */
/* ============================================================ */
html[data-testimonial-page] .breadcumd__banner .breadcumd__wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: 1200px;
  position: relative;
  gap: 20px;
  flex-wrap: wrap;
  padding: 0 15px;
  z-index: 3; /* Above overlay */
}






html[data-testimonial-page] .breadcumd__banner .left__content {
  color: #ffffff !important;
  font-weight: 600;
  font-size: 2.5rem;
  text-shadow: 2px 2px 4px #ffffff;
}








html[data-testimonial-page] .breadcumd__banner .right__content {
  display: flex;
  align-items: center;
  list-style: none;
  padding: 0;
  margin: 0;
  gap: 10px;
  
}

html[data-testimonial-page] .breadcumd__banner .right__content li {
  font-size: 16px;
  font-weight: 600;
  text-transform: capitalize;
  color: #facc15 !important;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.7);
}

html[data-testimonial-page] .breadcumd__banner .right__content li a {
  color: #ffffff !important;
  text-decoration: none;
  transition: all 0.3s ease-in-out;
}

html[data-testimonial-page] .breadcumd__banner .right__content li a:hover {
  color: #facc15 !important;
}






/* ============================================================ */
/* SECTION: Breadcrumb Banner Styling                           */
/* PURPOSE: Applies the manual variables from above to the banner.*/
/* ============================================================ */
html[data-testimonial-page] .breadcumd__banner {
  background-image: url('../img/banner/testimonial/testimonial-banner.webp') !important;
  min-height: var(--home-banner-height, clamp(517.5px, 81vh, 922.5px)) !important;
  height: var(--home-banner-height, clamp(517.5px, 81vh, 922.5px)) !important;
  background-size: cover !important;
  background-attachment: scroll !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  position: relative !important;
}

/* PURPOSE: Applies a subtle dark overlay to the banner image for text readability. */
html[data-testimonial-page] .breadcumd__banner::before {
  display: none !important;
  content: none !important;
  opacity: 0 !important;
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: none !important;
}

/* PURPOSE: This is the container for the banner's text content. */
html[data-testimonial-page] .breadcumd__banner .breadcumd__wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: 1200px;
  position: relative;
  gap: 20px;
  flex-wrap: wrap;
}

/* ============================================================ */
/* SECTION: Banner Content and Text Styling                     */
/* ============================================================ */
html[data-testimonial-page] .breadcumd__banner .left__content {
  color: #ffffff;
  font-weight: 600;
  font-size: 2.5rem;
}

html[data-testimonial-page] .breadcumd__banner .right__content {
  display: flex;
  align-items: center;
  list-style: none;
  padding: 0;
  margin: 0;
  gap: 10px;
}

html[data-testimonial-page] .breadcumd__banner .right__content li {
  font-size: 16px;
  font-weight: 600;
  text-transform: capitalize;
  color: #facc15 !important;
}

html[data-testimonial-page] .breadcumd__banner .right__content li a {
  color: #ffffff !important;
  text-decoration: none;
  transition: all 0.3s ease-in-out;
}

html[data-testimonial-page] .breadcumd__banner .right__content li a:hover {
  color: #facc15 !important;
}

/* ====================================================================================== */
/* SECTION: Testimonial Section Container & Carousel                                      */
/* ====================================================================================== */
.testimonial__section {
  overflow: visible !important;
  padding-top: 170px !important;
  padding-bottom: 170px !important;
}

.carousel-viewport-wrapper {
  width: 100% !important;
  overflow-x: hidden !important;
  position: relative !important;
}

.testimonial-carousel {
  position: relative !important;
  -webkit-mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent) !important;
  mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent) !important;
}

.carousel-track {
  display: flex !important;
  gap: 20px !important;
  transition: transform 0.8s cubic-bezier(0.455, 0.03, 0.515, 0.955) !important;
}

.carousel-track .testi__inner {
  flex-shrink: 0 !important;
  width: 380px !important;
  height: 480px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  background-color: #ffffff !important;
  border-radius: 12px !important;
  box-sizing: border-box !important;
  padding: 85px !important;
  box-shadow: 0 5px 20px #49158e !important;
  transition: transform 0.3s ease, box-shadow 0.3s ease !important;
  position: relative;
  overflow: visible !important;
}

.carousel-track .testi__inner:hover {
  transform: translateY(-10px) scale(1.25) !important;
  box-shadow: 0 30px 60px #5b05a6f6 !important;
  z-index: 10 !important;
}

/* ============================================================ */
/* (The rest of your original CSS follows and is unchanged)     */
/* ============================================================ */
.testi__inner__thumb {
  width: 100px !important; height: 100px !important; flex-shrink: 0 !important; margin-bottom: 15px !important; transition: transform 0.3s ease !important;
}
.testi__inner__thumb img {
  width: 100% !important; height: 100% !important; object-fit: cover !important; border-radius: 50% !important; border: 3px solid #ffcc01 !important;
}
.testi__inner:hover .testi__inner__thumb {
  transform: scale(1.1) !important;
}
.testi__inner__content {
  width: 100% !important; text-align: left !important; display: flex !important; flex-direction: column !important; flex-grow: 1 !important; justify-content: space-between !important; overflow: visible !important;
}
.testi__inner__content p {
  font-size: 0.95rem !important; line-height: 1.6 !important; margin-bottom: 1rem !important; color: #333333 !important; flex-grow: 1 !important; overflow-y: auto !important;
}
.testi__inner__content h5 {
  text-align: center !important; font-size: 1.1rem !important; font-weight: 600 !important; margin: 0 !important; color: #000000 !important;
}
.testi__inner__content span {
  display: block !important; text-align: center !important; font-size: 0.9rem !important; color: #8800ff !important; margin-top: 4px !important;
}
.testimonial-rating {
  margin-top: 8px; text-align: center;
}
.testimonial-rating .fa-star {
  color: #FFD700 !important; margin: 0 2px !important;
}
.carousel-nav {
  position: absolute !important; top: 50% !important; transform: translateY(-50%) !important; z-index: 20 !important; background-color: rgba(0, 0, 0, 0.4) !important; color: #ffffff !important; border: 1px solid #FFD700 !important; border-radius: 50% !important; width: 50px !important; height: 50px !important; cursor: pointer !important; transition: background-color 0.3s ease, box-shadow 0.3s ease, opacity 0.3s ease !important; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3) !important; opacity: 0.4;
}
.carousel-viewport-wrapper:hover .carousel-nav {
  opacity: 1;
}
.carousel-nav:hover {
  background-color: #5b05a6cc !important;
}
.carousel-nav.prev { left: 15px !important; }
.carousel-nav.next { right: 15px !important; }
.carousel-nav:disabled {
  opacity: 0.2 !important; cursor: not-allowed !important;
}
#modal-overlay {
  display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.8); z-index: 1000;
}
#testimonial-modal {
  display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 60vw; max-width: 800px; min-width: 320px; height: 70vh; min-height: 400px; background-color: #ffffff; border-radius: 15px; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5); z-index: 1001; display: flex; flex-direction: column; overflow: hidden;
}
.modal-header {
  display: flex; justify-content: space-between; align-items: center; padding: 15px 25px; background-color: #f7f7f7; border-bottom: 1px solid #e0e0e0; flex-shrink: 0;
}
.modal-title { margin: 0; font-size: 1.25rem; color: #333; }
.modal-close-button {
  background: none; border: none; font-size: 2rem; font-weight: 300; line-height: 1; color: #888; cursor: pointer; padding: 0;
}
.modal-close-button:hover { color: #000; }
.modal-body {
  display: flex; flex-direction: row; padding: 25px; overflow-y: auto; flex-grow: 1;
}
.modal-thumb { flex-shrink: 0; margin-right: 25px; }
.modal-thumb img {
  width: 150px; height: 150px; border-radius: 50%; border: 4px solid #ffcc01; object-fit: cover;
}
.modal-content-details { text-align: left; }
.modal-content-details h4 { font-size: 1.8rem; margin-top: 0; margin-bottom: 5px; }
.modal-content-details p { color: #555; line-height: 1.7; }
#modal-location { font-style: italic; color: #777; margin-bottom: 15px; }
#modal-rating .fa-star { font-size: 1.2rem; }
@media (max-width: 768px) {
  .modal-body { flex-direction: column; align-items: center; text-align: center; }
  .modal-thumb { margin-right: 0; margin-bottom: 20px; }
  .modal-content-details { text-align: center; }
}
@media (max-width: 576px) {
  .carousel-track .testi__inner {
    width: 90% !important; height: auto !important; min-height: 450px !important;
  }
  .testimonial-carousel {
    -webkit-mask-image: linear-gradient(to right, transparent, black 2%, black 98%, transparent) !important; mask-image: linear-gradient(to right, transparent, black 2%, black 98%, transparent) !important;
  }
}

/* ====================================================================================== */
/* END OF BANNER / PAGE STYLES                                                           */
/* ====================================================================================== */

/* ========================================================================== */
/* TESTIMONIAL PAGE HEADER GLASS — ported from home-header-glass.css (2026-06-10)   */
/* Loads after preloader-kill + mobile-menu-critical on testimonial.html            */
/* ========================================================================== */
html[data-testimonial-page] .header-section,
html[data-testimonial-page] .header__top {
  visibility: visible !important;
  opacity: 1 !important;
}

html[data-testimonial-page] section.header__top,
html[data-testimonial-page] .header__top.topbar-v3 {
  display: block !important;
  z-index: 11990 !important;
  width: 100% !important;
  background-color: #ffffff !important;
}

html[data-testimonial-page] .header-section.header__one,
html[data-testimonial-page] .header-section.sticky-header.header__one {
  z-index: 12000 !important;
  background: #2c0e53 !important;
  background-color: #2c0e53 !important;
}

/* Supersede legacy global social pill rules above when topbar-v3 glass is active */
html[data-testimonial-page] .topbar-v3 .topbar-v3__social > li > a {
  width: var(--topbar-social-circle-size) !important;
  height: var(--topbar-social-circle-size) !important;
  border: none !important;
  color: inherit !important;
  background: transparent !important;
  transform: none !important;
}

/* testimonial.html — top header bar + main nav glass morphism (Discount reference pattern, Grenier purple/gold) */

html[data-testimonial-page] .header__top.topbar-v3 {
  --topbar-social-size: 28px;
  --topbar-social-gap: 5px;
  --topbar-social-center-index: 5;
  --topbar-social-youtube-offset: calc(
    (var(--topbar-social-center-index) - 1) * (var(--topbar-social-size) + var(--topbar-social-gap)) +
      var(--topbar-social-size) / 2
  );
  --topbar-flank-gap: clamp(16px, 2vw, 28px);
  position: relative;
  isolation: isolate;
  z-index: 2;
  overflow: visible !important;
  -webkit-backdrop-filter: blur(26px) saturate(1.28);
  backdrop-filter: blur(26px) saturate(1.28);
  box-shadow:
    0 42px 84px rgba(46, 12, 94, 0.24),
    0 20px 40px rgba(46, 12, 94, 0.16),
    0 8px 18px rgba(46, 12, 94, 0.1),
    inset 0 2px 0 rgba(255, 255, 255, 0.84),
    inset 0 -2px 4px rgba(46, 12, 94, 0.06);
}

/* Topbar band — 3D glass shelf (card-stack backplate) */
html[data-testimonial-page] .header__top.topbar-v3::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 0%, rgba(250, 204, 21, 0.1), transparent 58%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.72) 0%, rgba(255, 255, 255, 0.14) 46%, rgba(46, 12, 94, 0.05) 100%);
  pointer-events: none;
  z-index: 0;
}

html[data-testimonial-page] .header__top.topbar-v3::after {
  content: "";
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: -7px;
  height: 100%;
  background: linear-gradient(180deg, rgba(46, 12, 94, 0.06), rgba(46, 12, 94, 0.16));
  box-shadow: 0 24px 52px rgba(46, 12, 94, 0.26);
  transform: translateY(7px) scale(0.98);
  z-index: -1;
  pointer-events: none;
}

html[data-testimonial-page] .header__top.topbar-v3 .container {
  position: relative;
  z-index: 1;
}

html[data-testimonial-page] .topbar-v3 .topbar-v3__row,
html[data-testimonial-page] .topbar-v3 .topbar-v3__left,
html[data-testimonial-page] .topbar-v3 .topbar-v3__right,
html[data-testimonial-page] .topbar-v3 .topbar-v3__social {
  overflow: visible !important;
}

/*
 * Topbar layout — YouTube (5th icon) pinned to logo axis on desktop:
 * social row absolute at 50%; pills flank left/right of social cluster.
 * Overrides custom-functions.css space-between + flex-wrap that stacked pills under social.
 */
html[data-testimonial-page] .header__top.topbar-v3 .container,
html[data-testimonial-page] .header__top.topbar-v3 .topbar-v3__row,
html[data-testimonial-page] .header__top.topbar-v3 .header__wrapper.topbar-v3__row {
  overflow: visible !important;
}

html[data-testimonial-page] .header__top.topbar-v3 .header__wrapper.topbar-v3__row {
  flex-wrap: nowrap !important;
}

html[data-testimonial-page] .header__top .info.topbar-v3__left li,
html[data-testimonial-page] .header__top .info.topbar-v3__right li {
  margin-right: 0 !important;
}

@media (min-width: 981px) {
  html[data-testimonial-page] body .header__top.topbar-v3 .container {
    position: static !important;
  }

  html[data-testimonial-page] body .header__top.topbar-v3 .header__wrapper.topbar-v3__row {
    display: block !important;
    position: relative !important;
    width: 100% !important;
    min-height: 42px !important;
    padding-inline: clamp(12px, 2vw, 24px) !important;
    box-sizing: border-box !important;
  }

  html[data-testimonial-page] body .header__top.topbar-v3 .topbar-v3__social.social__icon {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(calc(-1 * var(--topbar-social-youtube-offset)), -50%) !important;
    display: inline-flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: center !important;
    width: max-content !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: var(--topbar-social-gap) !important;
    z-index: 8 !important;
  }

  html[data-testimonial-page] body .header__top.topbar-v3 .topbar-v3__left {
    position: absolute !important;
    right: calc(50% + var(--topbar-social-youtube-offset) + var(--topbar-flank-gap)) !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    display: inline-flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 14px !important;
    width: auto !important;
    max-width: calc(50% - var(--topbar-social-youtube-offset) - var(--topbar-flank-gap) - 12px) !important;
    min-width: 0 !important;
    margin: 0 !important;
    z-index: 4 !important;
  }

  html[data-testimonial-page] body .header__top.topbar-v3 .topbar-v3__right {
    position: absolute !important;
    left: calc(50% + var(--topbar-social-youtube-offset) + var(--topbar-flank-gap)) !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    display: inline-flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 14px !important;
    width: auto !important;
    max-width: calc(50% - var(--topbar-social-youtube-offset) - var(--topbar-flank-gap) - 12px) !important;
    min-width: 0 !important;
    margin: 0 !important;
    z-index: 4 !important;
  }

  html[data-testimonial-page] body .header__top.topbar-v3 .social__icon li {
    margin-right: 0 !important;
  }
}

@media (max-width: 980px) {
  html[data-testimonial-page] body .header__top.topbar-v3 .header__wrapper.topbar-v3__row {
    display: flex !important;
    flex-wrap: nowrap !important;
    min-height: 44px !important;
    justify-content: center !important;
  }

  html[data-testimonial-page] body .header__top.topbar-v3 .topbar-v3__social {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;
    flex-wrap: wrap !important;
    gap: clamp(6px, 1.4vw, 10px) !important;
    justify-content: center !important;
  }
}

/* Topbar info pills — prominent 3D pop-out (matches menu pill lift) */
html[data-testimonial-page] .topbar-v3 .topbar-v3__left li,
html[data-testimonial-page] .topbar-v3 .topbar-v3__right li {
  --topbar-pill-shadow: rgba(46, 12, 94, 0.34);
  --topbar-pill-mid: rgba(72, 27, 130, 0.24);
  position: relative !important;
  isolation: isolate;
  z-index: 1;
  display: inline-flex !important;
  align-items: center !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  overflow: visible !important;
  min-height: 34px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.78);
  background:
    radial-gradient(circle at 14% 0%, rgba(250, 204, 21, 0.18), transparent 44%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(248, 244, 255, 0.82));
  -webkit-backdrop-filter: blur(20px) saturate(1.18);
  backdrop-filter: blur(20px) saturate(1.18);
  box-shadow:
    0 40px 76px var(--topbar-pill-shadow),
    0 18px 36px var(--topbar-pill-mid),
    0 7px 16px rgba(46, 12, 94, 0.16),
    inset 0 2px 0 rgba(255, 255, 255, 0.94),
    inset 0 -2px 5px rgba(46, 12, 94, 0.1);
  transform: translateY(-4px);
  transition:
    transform 0.3s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.3s ease,
    border-color 0.3s ease;
}

html[data-testimonial-page] .topbar-v3 .topbar-v3__left li::after,
html[data-testimonial-page] .topbar-v3 .topbar-v3__right li::after {
  content: "";
  position: absolute;
  left: 5px;
  right: 5px;
  bottom: -5px;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(46, 12, 94, 0.1), rgba(46, 12, 94, 0.22));
  box-shadow: 0 20px 40px rgba(46, 12, 94, 0.32);
  transform: translateY(7px) scale(0.95);
  z-index: -1;
  pointer-events: none;
}

html[data-testimonial-page] .topbar-v3 .topbar-v3__left li::before,
html[data-testimonial-page] .topbar-v3 .topbar-v3__right li::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.55) 0%, transparent 48%, rgba(46, 12, 94, 0.05) 100%);
  pointer-events: none;
  z-index: 1;
}

html[data-testimonial-page] .topbar-v3 .topbar-v3__left li > *,
html[data-testimonial-page] .topbar-v3 .topbar-v3__right li > * {
  position: relative;
  z-index: 2;
}

html[data-testimonial-page] .topbar-v3 .topbar-v3__left li:hover,
html[data-testimonial-page] .topbar-v3 .topbar-v3__right li:hover {
  transform: translateY(-10px);
  border-color: rgba(250, 204, 21, 0.28);
  box-shadow:
    0 52px 92px rgba(46, 12, 94, 0.38),
    0 24px 46px rgba(72, 27, 130, 0.28),
    0 9px 20px rgba(46, 12, 94, 0.18),
    inset 0 2px 0 rgba(255, 255, 255, 0.98),
    inset 0 -2px 6px rgba(46, 12, 94, 0.12);
}

html[data-testimonial-page] .topbar-v3 .topbar-v3__left li:hover::after,
html[data-testimonial-page] .topbar-v3 .topbar-v3__right li:hover::after {
  transform: translateY(11px) scale(0.94);
  box-shadow: 0 24px 44px rgba(46, 12, 94, 0.32);
}

/* Social icon circles — prominent 3D pop-out (matches menu pill lift) */
html[data-testimonial-page] .topbar-v3 .topbar-v3__social > li {
  position: relative !important;
  isolation: isolate;
  z-index: 1;
  overflow: visible !important;
  border: 1px solid rgba(255, 255, 255, 0.78) !important;
  background:
    radial-gradient(circle at 30% 18%, rgba(250, 204, 21, 0.2), transparent 52%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(246, 242, 255, 0.86)) !important;
  -webkit-backdrop-filter: blur(20px) saturate(1.18);
  backdrop-filter: blur(20px) saturate(1.18);
  box-shadow:
    0 38px 72px rgba(46, 12, 94, 0.34),
    0 16px 32px rgba(72, 27, 130, 0.24),
    0 6px 14px rgba(46, 12, 94, 0.16),
    inset 0 2px 0 rgba(255, 255, 255, 0.94),
    inset 0 -2px 5px rgba(46, 12, 94, 0.1) !important;
  transform: translateY(-5px);
  transition:
    transform 0.3s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.3s ease,
    border-color 0.3s ease;
}

html[data-testimonial-page] .topbar-v3 .topbar-v3__social > li::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: linear-gradient(180deg, rgba(46, 12, 94, 0.1), rgba(46, 12, 94, 0.22));
  box-shadow: 0 18px 36px rgba(46, 12, 94, 0.32);
  transform: translateY(7px) scale(0.9);
  z-index: -1;
  pointer-events: none;
}

html[data-testimonial-page] .topbar-v3 .topbar-v3__social > li::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.65) 0%, transparent 50%, rgba(46, 12, 94, 0.06) 100%);
  pointer-events: none;
  z-index: 1;
}

html[data-testimonial-page] .topbar-v3 .topbar-v3__social > li > a {
  position: relative !important;
  z-index: 2 !important;
  background: transparent !important;
  box-shadow: none !important;
}

html[data-testimonial-page] .topbar-v3 .topbar-v3__social > li:hover {
  transform: translateY(-11px) scale(1.06);
  border-color: rgba(250, 204, 21, 0.3) !important;
  box-shadow:
    0 48px 86px rgba(46, 12, 94, 0.4),
    0 20px 40px rgba(72, 27, 130, 0.3),
    0 8px 18px rgba(46, 12, 94, 0.18),
    inset 0 2px 0 rgba(255, 255, 255, 0.98),
    inset 0 -2px 6px rgba(46, 12, 94, 0.12) !important;
}

html[data-testimonial-page] .topbar-v3 .topbar-v3__social > li:hover::after {
  transform: translateY(10px) scale(0.88);
  box-shadow: 0 20px 38px rgba(46, 12, 94, 0.34);
}

/*
 * Large straddle logo — 15% lower than sitewide 160% anchor (home only, non-sticky).
 * Sticky/minimized logo — snap to nav-bottom straddle so small logo stays in view on scroll.
 */
@media (min-width: 981px) {
  html[data-testimonial-page] body .header-section.header__one:not(.sticky-header) .straddle-logo {
    top: 175% !important;
    transform: translate(-50%, -50%) translateZ(0) !important;
  }

  html[data-testimonial-page] body .header-section.header__one .straddle-logo {
    transition: none !important;
  }

  html[data-testimonial-page] body .header-section.header__one .straddle-logo img {
    transition: none !important;
  }

  html[data-testimonial-page] body .header-section.sticky-header.header__one {
    overflow: visible !important;
  }

  html[data-testimonial-page] body .header-section.sticky-header.header__one .straddle-logo {
    top: 100% !important;
    transform: translate(-50%, -50%) translateZ(0) !important;
  }

  html[data-testimonial-page] body .header-section.sticky-header.header__one .straddle-logo img {
    height: 100px !important;
    max-height: 100px !important;
  }
}

/* Main nav band */
html[data-testimonial-page] .header-section.header__one {
  position: relative;
  isolation: isolate;
  padding: 12px 0 !important;
  -webkit-backdrop-filter: blur(24px) saturate(1.18);
  backdrop-filter: blur(24px) saturate(1.18);
  box-shadow:
    inset 0 -1px 0 rgba(250, 204, 21, 0.45),
    0 32px 72px rgba(46, 12, 94, 0.28),
    0 14px 30px rgba(46, 12, 94, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

html[data-testimonial-page] .header-section.header__one::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.08) 0%, transparent 38%, rgba(0, 0, 0, 0.06) 100%);
  pointer-events: none;
  z-index: 0;
}

html[data-testimonial-page] .header-section.header__one .container,
html[data-testimonial-page] .header-section.header__one .header-wrapper,
html[data-testimonial-page] .header-section.header__one .mega-shell {
  position: relative;
  z-index: 1;
}

/* Nav row — single line, straddle-logo gap on items 4/5 */
@media (min-width: 992px) {
  html[data-testimonial-page] .header-section .header-wrapper {
    flex-wrap: nowrap !important;
    align-items: center !important;
  }

  html[data-testimonial-page] .header-section .logo__menuadjust {
    flex-grow: 1 !important;
    justify-content: center !important;
    min-width: 0 !important;
  }

  html[data-testimonial-page] .header-section .main-menu {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  html[data-testimonial-page] .header-section .main-menu > li {
    flex: 0 0 auto !important;
    margin: 0 !important;
  }

  /* Towing Services (4) / Truck Repairs (5) — logo straddle gap */
  html[data-testimonial-page] .header-section .main-menu > li:nth-child(4) {
    margin-right: 180px !important;
    margin-left: 0 !important;
  }

  html[data-testimonial-page] .header-section .main-menu > li:nth-child(5) {
    margin-left: 180px !important;
    margin-right: 0 !important;
  }
}

/* Menu link glass pills — prominent 3D pop-out (card-stack pattern) */
html[data-testimonial-page] .header-section .main-menu > li {
  overflow: visible !important;
}

html[data-testimonial-page] .header-section .main-menu > li > a,
html[data-testimonial-page] .header-section .main-menu > li > .nav-item {
  --testimonial-menu-shadow: rgba(0, 0, 0, 0.34);
  --testimonial-menu-mid: rgba(23, 6, 47, 0.42);
  position: relative !important;
  isolation: isolate;
  z-index: 1;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px;
  min-height: 40px;
  padding: 8px 14px !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  overflow: visible !important;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background:
    radial-gradient(circle at 14% 0%, rgba(250, 204, 21, 0.16), transparent 44%),
    linear-gradient(
      180deg,
      rgba(62, 24, 112, 0.86),
      rgba(38, 12, 74, 0.92)
    );
  -webkit-backdrop-filter: blur(20px) saturate(1.18);
  backdrop-filter: blur(20px) saturate(1.18);
  box-shadow:
    0 34px 64px var(--testimonial-menu-shadow),
    0 16px 30px var(--testimonial-menu-mid),
    0 6px 14px rgba(46, 12, 94, 0.22),
    inset 0 2px 0 rgba(255, 255, 255, 0.24),
    inset 0 -2px 5px rgba(0, 0, 0, 0.2);
  transform: translateY(-4px);
  transition:
    transform 0.3s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.3s ease,
    background 0.3s ease,
    border-color 0.3s ease;
}

html[data-testimonial-page] .header-section .main-menu > li > a::after,
html[data-testimonial-page] .header-section .main-menu > li > .nav-item::after {
  content: "";
  position: absolute;
  left: 5px;
  right: 5px;
  bottom: -5px;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(23, 6, 47, 0.18), rgba(0, 0, 0, 0.3));
  box-shadow: 0 18px 36px rgba(0, 0, 0, 0.32);
  transform: translateY(7px) scale(0.95);
  z-index: -1;
  pointer-events: none;
}

html[data-testimonial-page] .header-section .main-menu > li > a i,
html[data-testimonial-page] .header-section .main-menu > li > .nav-item i {
  position: relative;
  z-index: 2;
  flex-shrink: 0 !important;
  margin-left: 0 !important;
}

@media (min-width: 992px) and (max-width: 1366px) {
  html[data-testimonial-page] .header-section .main-menu {
    gap: 4px !important;
  }

  html[data-testimonial-page] .header-section .main-menu > li > a,
  html[data-testimonial-page] .header-section .main-menu > li > .nav-item {
    padding: 8px 10px !important;
    font-size: 15px !important;
  }

  html[data-testimonial-page] .header-section .main-menu > li:nth-child(4) {
    margin-right: 150px !important;
  }

  html[data-testimonial-page] .header-section .main-menu > li:nth-child(5) {
    margin-left: 150px !important;
  }
}

html[data-testimonial-page] .header-section .main-menu > li > a:hover,
html[data-testimonial-page] .header-section .main-menu > li > .nav-item:hover,
html[data-testimonial-page] .header-section .main-menu > li > a:focus-visible,
html[data-testimonial-page] .header-section .main-menu > li > .nav-item:focus-visible {
  transform: translateY(-10px);
  background:
    radial-gradient(circle at 14% 0%, rgba(250, 204, 21, 0.22), transparent 44%),
    linear-gradient(
      180deg,
      rgba(72, 27, 130, 0.92),
      rgba(46, 12, 94, 0.96)
    );
  border-color: rgba(250, 204, 21, 0.32);
  box-shadow:
    0 46px 82px rgba(0, 0, 0, 0.38),
    0 22px 40px rgba(23, 6, 47, 0.44),
    0 8px 18px rgba(46, 12, 94, 0.26),
    inset 0 2px 0 rgba(255, 255, 255, 0.3),
    inset 0 -2px 6px rgba(0, 0, 0, 0.22);
}

html[data-testimonial-page] .header-section .main-menu > li > a:hover::after,
html[data-testimonial-page] .header-section .main-menu > li > .nav-item:hover::after {
  transform: translateY(11px) scale(0.94);
  box-shadow: 0 24px 44px rgba(0, 0, 0, 0.36);
}

/* Remove magnifying-glass search control from home header */
html[data-testimonial-page] .header-section .menu__components .search-icon,
html[data-testimonial-page] .header-section .menu__components .search-trigger {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/*
 * Hamburger — 3D glass pop-out (matches menu pills); loads AFTER mobile-menu.css.
 */
html[data-testimonial-page] .header-section .menu__components {
  overflow: visible !important;
}

/* Desktop drawer toggle (#openButton) — Font Awesome bars centered in circle */
@media (min-width: 981px) {
  html[data-testimonial-page] body .header-wrapper .menu__components #openButton.fa-bars {
    --testimonial-menu-shadow: rgba(0, 0, 0, 0.34);
    --testimonial-menu-mid: rgba(23, 6, 47, 0.42);
    position: relative !important;
    isolation: isolate;
    z-index: 1;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    max-width: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;
    padding: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    font-size: 26px !important;
    line-height: 1 !important;
    text-align: center !important;
    border-radius: 50% !important;
    overflow: visible !important;
    border: 1px solid rgba(255, 255, 255, 0.22) !important;
    background:
      radial-gradient(circle at 22% 12%, rgba(250, 204, 21, 0.16), transparent 48%),
      linear-gradient(
        180deg,
        rgba(62, 24, 112, 0.86),
        rgba(38, 12, 74, 0.92)
      ) !important;
    color: #ffffff !important;
    box-shadow:
      0 34px 64px var(--testimonial-menu-shadow),
      0 16px 30px var(--testimonial-menu-mid),
      0 6px 14px rgba(46, 12, 94, 0.22),
      inset 0 2px 0 rgba(255, 255, 255, 0.24),
      inset 0 -2px 5px rgba(0, 0, 0, 0.2) !important;
    -webkit-backdrop-filter: blur(20px) saturate(1.18) !important;
    backdrop-filter: blur(20px) saturate(1.18) !important;
    transform: translateY(-4px) !important;
    cursor: pointer !important;
    vertical-align: middle !important;
    transition:
      transform 0.3s cubic-bezier(0.22, 1, 0.36, 1),
      box-shadow 0.3s ease,
      background 0.3s ease,
      border-color 0.3s ease !important;
  }

  html[data-testimonial-page] body .header-wrapper .menu__components #openButton.fa-bars::after {
    content: "" !important;
    position: absolute;
    left: 4px;
    right: 4px;
    bottom: -4px;
    height: 100%;
    border-radius: 50%;
    background: linear-gradient(180deg, rgba(23, 6, 47, 0.18), rgba(0, 0, 0, 0.3));
    box-shadow: 0 18px 36px rgba(0, 0, 0, 0.32);
    transform: translateY(7px) scale(0.9);
    z-index: -1;
    pointer-events: none;
  }

  html[data-testimonial-page] body .header-wrapper .menu__components #openButton.fa-bars::before {
    display: block !important;
    position: relative !important;
    z-index: 2 !important;
    width: 1em !important;
    height: 1em !important;
    line-height: 1 !important;
    text-align: center !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
  }

  html[data-testimonial-page] body .header-wrapper .menu__components #openButton.fa-bars:hover {
    background:
      radial-gradient(circle at 22% 12%, rgba(250, 204, 21, 0.22), transparent 48%),
      linear-gradient(
        180deg,
        rgba(72, 27, 130, 0.92),
        rgba(46, 12, 94, 0.96)
      ) !important;
    border-color: rgba(250, 204, 21, 0.32) !important;
    transform: translateY(-10px) !important;
    box-shadow:
      0 46px 82px rgba(0, 0, 0, 0.38),
      0 22px 40px rgba(23, 6, 47, 0.44),
      0 8px 18px rgba(46, 12, 94, 0.26),
      inset 0 2px 0 rgba(255, 255, 255, 0.3),
      inset 0 -2px 6px rgba(0, 0, 0, 0.22) !important;
  }

  html[data-testimonial-page] body .header-wrapper .menu__components #openButton.fa-bars:hover::after {
    transform: translateY(11px) scale(0.88);
    box-shadow: 0 24px 44px rgba(0, 0, 0, 0.36);
  }
}

/* Mobile toggle — flex-center three bars inside 3D glass button */
@media (max-width: 980px) {
  html[data-testimonial-page] body #mobileHeaderHamburger.mobile-nav-toggle,
  html[data-testimonial-page] body .header-wrapper > .mobile-nav-toggle {
    --testimonial-menu-shadow: rgba(0, 0, 0, 0.34);
    --testimonial-menu-mid: rgba(23, 6, 47, 0.42);
    position: relative !important;
    isolation: isolate;
    z-index: 1;
    display: inline-flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    width: 48.6px !important;
    height: 54px !important;
    min-width: 48.6px !important;
    max-width: 48.6px !important;
    min-height: 54px !important;
    max-height: 54px !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 12.6px !important;
    overflow: visible !important;
    border: 1px solid rgba(255, 255, 255, 0.22) !important;
    background:
      radial-gradient(circle at 22% 12%, rgba(250, 204, 21, 0.16), transparent 48%),
      linear-gradient(
        180deg,
        rgba(62, 24, 112, 0.86),
        rgba(38, 12, 74, 0.92)
      ) !important;
    -webkit-backdrop-filter: blur(20px) saturate(1.18) !important;
    backdrop-filter: blur(20px) saturate(1.18) !important;
    box-shadow:
      0 34px 64px var(--testimonial-menu-shadow),
      0 16px 30px var(--testimonial-menu-mid),
      0 6px 14px rgba(46, 12, 94, 0.22),
      inset 0 2px 0 rgba(255, 255, 255, 0.24),
      inset 0 -2px 5px rgba(0, 0, 0, 0.2) !important;
    transform: translateY(-4px) !important;
    box-sizing: border-box !important;
    transition:
      transform 0.3s cubic-bezier(0.22, 1, 0.36, 1),
      box-shadow 0.3s ease,
      background 0.3s ease,
      border-color 0.3s ease !important;
  }

  html[data-testimonial-page] body #mobileHeaderHamburger.mobile-nav-toggle::after,
  html[data-testimonial-page] body .header-wrapper > .mobile-nav-toggle::after {
    content: "" !important;
    display: block !important;
    position: absolute;
    left: 5px;
    right: 5px;
    bottom: -5px;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(180deg, rgba(23, 6, 47, 0.18), rgba(0, 0, 0, 0.3));
    box-shadow: 0 18px 36px rgba(0, 0, 0, 0.32);
    transform: translateY(7px) scale(0.95);
    z-index: -1;
    pointer-events: none;
  }

  html[data-testimonial-page] body #mobileHeaderHamburger.mobile-nav-toggle:hover,
  html[data-testimonial-page] body .header-wrapper > .mobile-nav-toggle:hover {
    background:
      radial-gradient(circle at 22% 12%, rgba(250, 204, 21, 0.22), transparent 48%),
      linear-gradient(
        180deg,
        rgba(72, 27, 130, 0.92),
        rgba(46, 12, 94, 0.96)
      ) !important;
    border-color: rgba(250, 204, 21, 0.32) !important;
    transform: translateY(-10px) !important;
    box-shadow:
      0 46px 82px rgba(0, 0, 0, 0.38),
      0 22px 40px rgba(23, 6, 47, 0.44),
      0 8px 18px rgba(46, 12, 94, 0.26),
      inset 0 2px 0 rgba(255, 255, 255, 0.3),
      inset 0 -2px 6px rgba(0, 0, 0, 0.22) !important;
  }

  html[data-testimonial-page] body #mobileHeaderHamburger.mobile-nav-toggle:hover::after,
  html[data-testimonial-page] body .header-wrapper > .mobile-nav-toggle:hover::after {
    transform: translateY(11px) scale(0.94);
    box-shadow: 0 24px 44px rgba(0, 0, 0, 0.36);
  }

  html[data-testimonial-page] body #mobileHeaderHamburger.mobile-nav-toggle span,
  html[data-testimonial-page] body .header-wrapper > .mobile-nav-toggle span {
    position: relative !important;
    z-index: 2 !important;
    display: block !important;
    flex: 0 0 auto !important;
    width: 30px !important;
    height: 3px !important;
    min-height: 3px !important;
    max-height: 3px !important;
    margin: 0 !important;
    padding: 0 !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    transform: none !important;
    opacity: 1 !important;
    background: #fff !important;
    border-radius: 999px !important;
  }
}

@media (max-width: 640px) {
  html[data-testimonial-page] body #mobileHeaderHamburger.mobile-nav-toggle span,
  html[data-testimonial-page] body .header-wrapper > .mobile-nav-toggle span {
    width: 32px !important;
  }
}

@media (max-width: 384px) {
  html[data-testimonial-page] body #mobileHeaderHamburger.mobile-nav-toggle,
  html[data-testimonial-page] body .header-wrapper > .mobile-nav-toggle {
    width: 40px !important;
    min-width: 40px !important;
    max-width: 40px !important;
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
    border-radius: 50% !important;
    gap: 4px !important;
  }

  html[data-testimonial-page] body #mobileHeaderHamburger.mobile-nav-toggle span,
  html[data-testimonial-page] body .header-wrapper > .mobile-nav-toggle span {
    width: 26px !important;
  }
}

html[data-testimonial-page] .header-section .site-header__mobile-brand {
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  background: rgba(255, 255, 255, 0.1);
  -webkit-backdrop-filter: blur(18px) saturate(1.16);
  backdrop-filter: blur(18px) saturate(1.16);
  box-shadow:
    0 20px 40px rgba(23, 6, 47, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
  padding: 6px 12px !important;
  transition: transform 0.22s ease, box-shadow 0.22s ease;
}

html[data-testimonial-page] .header-section .site-header__mobile-brand:hover {
  transform: translateY(-3px);
}

/* Mega menu panels — deepen existing glass */
html[data-testimonial-page] .header-section .mega-panel {
  border: 1px solid rgba(255, 255, 255, 0.62) !important;
  -webkit-backdrop-filter: blur(28px) saturate(1.2) !important;
  backdrop-filter: blur(28px) saturate(1.2) !important;
  box-shadow:
    0 56px 118px rgba(46, 12, 94, 0.28),
    0 22px 42px rgba(46, 12, 94, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.72) !important;
}

html[data-testimonial-page] .header-section .mega-panel__header > div {
  padding: 18px 20px;
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, 0.58);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.82), rgba(250, 248, 255, 0.68));
  -webkit-backdrop-filter: blur(20px) saturate(1.16);
  backdrop-filter: blur(20px) saturate(1.16);
  box-shadow:
    0 28px 56px rgba(46, 12, 94, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.78);
}

html[data-testimonial-page] .header-section .mega-link a {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid rgba(46, 12, 94, 0.12);
  background: rgba(255, 255, 255, 0.72);
  -webkit-backdrop-filter: blur(14px) saturate(1.12);
  backdrop-filter: blur(14px) saturate(1.12);
  box-shadow:
    0 12px 24px rgba(46, 12, 94, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

html[data-testimonial-page] .header-section .mega-link a:hover {
  transform: translateY(-3px);
  box-shadow:
    0 18px 32px rgba(46, 12, 94, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.88);
}

@media (prefers-reduced-motion: reduce) {
  html[data-testimonial-page] .topbar-v3 .topbar-v3__left li,
  html[data-testimonial-page] .topbar-v3 .topbar-v3__right li,
  html[data-testimonial-page] .topbar-v3 .topbar-v3__social > li,
  html[data-testimonial-page] .header-section .main-menu > li > a,
  html[data-testimonial-page] .header-section .main-menu > li > .nav-item,
  html[data-testimonial-page] .header-section .menu__components #openButton,
  html[data-testimonial-page] .header-section .mega-link a {
    transition: none !important;
  }

  html[data-testimonial-page] .topbar-v3 .topbar-v3__left li,
  html[data-testimonial-page] .topbar-v3 .topbar-v3__right li,
  html[data-testimonial-page] .topbar-v3 .topbar-v3__social > li {
    transform: none !important;
  }

  html[data-testimonial-page] .topbar-v3 .topbar-v3__left li:hover,
  html[data-testimonial-page] .topbar-v3 .topbar-v3__right li:hover,
  html[data-testimonial-page] .topbar-v3 .topbar-v3__social > li:hover,
  html[data-testimonial-page] .header-section .main-menu > li > a:hover {
    transform: none !important;
  }
}