/* Scroll-stacked service items (index-6-dark.html)
   Each card is pinned via GSAP ScrollTrigger (CSS sticky doesn't work
   because GSAP ScrollSmoother transforms the parent). Cards stack
   visually on top of each other, only one visible at a time. */

.bf-service-scroll-wrap {
   position: relative;
   margin-top: 30px;
}

.bf-service-scroll-item {
   min-height: 100vh;
   display: flex;
   align-items: center;
   padding: 80px 0;
   background-color: #151515;
   will-change: transform, opacity;
}

.bf-service-scroll-item:nth-child(1) { z-index: 1; }
.bf-service-scroll-item:nth-child(2) { z-index: 2; }
.bf-service-scroll-item:nth-child(3) { z-index: 3; }
.bf-service-scroll-item:nth-child(4) { z-index: 4; }
.bf-service-scroll-item:nth-child(5) { z-index: 5; }
.bf-service-scroll-item:nth-child(6) { z-index: 6; }

.bf-service-scroll-inner {
   width: 100%;
   transform-origin: top center;
   will-change: transform, opacity;
}

.bf-service-scroll-title {
   font-size: 32px;
   line-height: 1.4;
   font-weight: 600;
   margin: 0 0 24px;
   letter-spacing: -0.02em;
   background: linear-gradient(135deg, #ffffff 0%, var(--tp-common-red) 100%);
   -webkit-background-clip: text;
   background-clip: text;
   -webkit-text-fill-color: transparent;
   color: transparent;
}

.bf-service-scroll-body {
   display: grid;
   grid-template-columns: 1fr 1.2fr;
   gap: 60px;
   align-items: stretch;
   min-height: 40vh;
}

.bf-service-scroll-thumb {
   overflow: hidden;
   border-radius: 14px;
   height: 100%;
   position: relative;
}

.bf-service-scroll-thumb img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   display: block;
}

.bf-service-scroll-info {
   display: flex;
   flex-direction: column;
   justify-content: center;
}

.bf-service-scroll-dec {
   color: rgba(255, 255, 255, 0.7);
   font-size: 16px;
   line-height: 1.55;
   margin: 0 0 28px;
}

.bf-service-scroll-tagline {
   font-style: italic;
   color: #fff;
   margin-bottom: 12px;
}

.bf-service-scroll-tags {
   display: flex;
   flex-wrap: wrap;
   gap: 10px;
}

.bf-service-scroll-tags span {
   display: inline-block;
   padding: 9px 18px;
   border: 1px solid rgba(255, 255, 255, 0.18);
   border-radius: 999px;
   color: #fff;
   font-size: 14px;
   line-height: 1;
   letter-spacing: 0.02em;
}

@media (max-width: 1399px) {
   .bf-service-scroll-title {
      font-size: 27px;
   }
}

@media (max-width: 1199px) {
   .bf-service-scroll-title {
      font-size: 24px;
   }
}

/* Tablet/mobile: cards still pin & stack (handled in JS for all sizes),
   so keep min-height:100vh from the base rule but tighten the padding. */
@media (max-width: 1023px) {
   .bf-service-scroll-item {
      padding: 40px 0;
   }
}

/* Below 992px the card becomes single-column. Compact the layout so the
   image + text fit within one screen height, keeping the stack clean. */
@media (max-width: 991px) {
   .bf-service-scroll-body {
      grid-template-columns: 1fr;
      gap: 22px;
      min-height: auto;
   }
   .bf-service-scroll-thumb {
      height: auto;
      max-height: 30vh;
      aspect-ratio: 16 / 10;
   }
   .bf-service-scroll-dec {
      font-size: 15px;
      line-height: 1.5;
      margin: 0 0 18px;
   }
   .bf-service-scroll-tags {
      gap: 8px;
   }
   .bf-service-scroll-tags span {
      padding: 7px 14px;
      font-size: 13px;
   }
}

@media (max-width: 767px) {
   .bf-service-scroll-item {
      padding: 30px 0;
   }
   .bf-service-scroll-title {
      font-size: 20px;
      margin: 0 0 14px;
   }
   .bf-service-scroll-thumb {
      max-height: 26vh;
   }
   .bf-service-scroll-dec {
      font-size: 14px;
      margin: 0 0 14px;
   }
}

/* ---------- Blog section animations ---------- */
.tp-blog-item {
   transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1);
   will-change: transform;
}

.tp-blog-item:hover {
   transform: translateY(-10px);
}

.tp-blog-thumb {
   overflow: hidden;
   position: relative;
}

.tp-blog-thumb::after {
   content: "";
   position: absolute;
   inset: 0;
   background: linear-gradient(180deg, rgba(225, 16, 16, 0) 60%, rgba(225, 16, 16, 0.35) 100%);
   opacity: 0;
   transition: opacity 0.5s ease;
   pointer-events: none;
}

.tp-blog-item:hover .tp-blog-thumb::after {
   opacity: 1;
}

.tp-blog-thumb img {
   transition: transform 0.9s cubic-bezier(0.25, 1, 0.5, 1);
   will-change: transform;
}

.tp-blog-item:hover .tp-blog-thumb img {
   transform: scale(1.07);
}

.tp-blog-tag {
   transition: background-color 0.3s ease, color 0.3s ease;
}

.tp-blog-item:hover .tp-blog-tag {
   background-color: var(--tp-common-red);
   color: #fff;
}

.tp-blog-date {
   transition: color 0.3s ease;
}

.tp-blog-item:hover .tp-blog-date {
   color: rgba(255, 255, 255, 0.95);
}

.tp-blog-tittle a {
   background-image: linear-gradient(var(--tp-common-red), var(--tp-common-red));
   background-size: 0 1px;
   background-position: 0 100%;
   background-repeat: no-repeat;
   transition: background-size 0.5s cubic-bezier(0.25, 1, 0.5, 1);
}

.tp-blog-item:hover .tp-blog-tittle a {
   background-size: 100% 1px;
}

/* ---------- Brands logo carousel (continuous marquee) ----------
   The track holds the logos twice (the second set is cloned in JS), and
   the animation slides it left by exactly half its width for a seamless,
   infinite loop. Widths are fixed per breakpoint so it stays responsive. */
.bf-brands-carousel {
   position: relative;
   width: 100%;
   overflow: hidden;
   /* Soft fade on both edges so logos appear/disappear gently. */
   -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
   mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
}

.bf-brands-track {
   display: flex;
   width: max-content;
   animation: bf-brands-scroll 35s linear infinite;
   will-change: transform;
}

/* Pause the scroll while hovering so a logo can be read. */
.bf-brands-carousel:hover .bf-brands-track {
   animation-play-state: paused;
}

.bf-brands-slide {
   flex: 0 0 auto;
   width: 220px;
   padding: 0 12px;
   box-sizing: border-box;
}

/* Keep the original card size; just reset the grid margin. */
.bf-brands-carousel .bf-brands-item {
   margin: 0;
}

@keyframes bf-brands-scroll {
   from { transform: translateX(0); }
   to { transform: translateX(-50%); }
}

@media (max-width: 991px) {
   .bf-brands-slide {
      width: 200px;
      padding: 0 10px;
   }
}

@media (max-width: 575px) {
   .bf-brands-slide {
      width: 170px;
      padding: 0 8px;
   }
}

/* Respect users who prefer reduced motion: stop the auto-scroll. */
@media (prefers-reduced-motion: reduce) {
   .bf-brands-track {
      animation: none;
   }
}