*,
 *::before,
 *::after {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
     font-family: 'Neue Haas Grotesk Display Pro Light';
 }


 @font-face {
     font-family: 'Neue Haas Grotesk Display Pro Light';
     src: url('../fonts/NeueHaasDisplay-Light.eot');
     src: url('../fonts/NeueHaasDisplay-Light.eot?#iefix') format('embedded-opentype'),
         url('../fonts/NeueHaasDisplay-Light.woff2') format('woff2'),
         url('../fonts/NeueHaasDisplay-Light.woff') format('woff'),
         url('../fonts/NeueHaasDisplay-Light.ttf') format('truetype');
     font-weight: 300;
     font-style: normal;
     font-display: swap;
 }

 @font-face {
     font-family: 'Neue Haas Grotesk Display Pro Bold';
     src: url('NeueHaasDisplay-Bold.eot');
     src: url('NeueHaasDisplay-Bold.eot?#iefix') format('embedded-opentype'),
         url('NeueHaasDisplay-Bold.woff2') format('woff2'),
         url('NeueHaasDisplay-Bold.woff') format('woff'),
         url('NeueHaasDisplay-Bold.ttf') format('truetype');
     font-weight: bold;
     font-style: normal;
     font-display: swap;
 }

 :root {
     --orange: #F26B1D;
     --orange-light: #FF8C42;
     --black: #111;
     --white: #fff;
 }

 html {
     scroll-behavior: smooth;
 }

 body {

     background: #000;
     color: var(--white);
     overflow-x: hidden;
     min-height: 100vh;
 }

 /* ══════════════════════════════
       FLOATING PILL HEADER
    ══════════════════════════════ */
 .header-wrap {
     position: fixed;
     top: 18px;
     left: 0;
     right: 0;
     z-index: 500;
     /* padding: 0 clamp(12px, 3vw, 40px); */
     pointer-events: none;
 }

 .sectionPadding {
     padding: 80px 0px;
 }

 header {
     pointer-events: all;
     display: grid;
     grid-template-columns: auto 1fr auto;
     align-items: center;
     border-radius: 50px;
     padding: 10px 40px;
     gap: 16px;
     background: #ffffff96;
     backdrop-filter: blur(22px) saturate(140%) brightness(1.08);
     -webkit-backdrop-filter: blur(22px) saturate(140%) brightness(1.08);
     border: 1px solid rgba(255, 255, 255, 0.22);
     transition: box-shadow 0.3s, background 0.3s;
     max-width: 90%;
     margin: 0 auto;
 }

 header:hover {
     box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
 }

 .logo-link {
     display: flex;
     align-items: center;
     text-decoration: none;
     flex-shrink: 0;
 }

 .logo-link img {
     height: 45px;
     width: auto;
     display: block;
 }

 nav {
     display: flex;
     align-items: center;
     justify-content: center;
     gap: clamp(10px, 2vw, 32px);
     flex-wrap: nowrap;
 }

 nav a {
     font-size: clamp(0.72rem, 1.1vw, 22px);
     font-weight: 300;
     color: rgba(0, 0, 0, 0.92);
     text-decoration: none;
     letter-spacing: 0.01em;
     white-space: nowrap;
     padding: 4px 0;
     position: relative;
     transition: color 0.2s;
 }

 nav a::after {
     content: '';
     position: absolute;
     bottom: 0;
     left: 0;
     right: 100%;
     height: 1.5px;
     background: var(--orange);
     transition: right 0.25s ease;
 }

 nav a:hover {
     color: var(--orange);
 }

 nav a:hover::after {
     right: 0;
 }

 .btn-connect {
     flex-shrink: 0;
     display: inline-flex;
     align-items: center;
     background: var(--orange);
     color: #fff;
     border: none;
     border-radius: 50px;
     padding: 11px 24px;
     font-size: 14px;
     font-weight: 300;
     cursor: pointer;
     letter-spacing: 0.02em;
     text-decoration: none;
     white-space: nowrap;
     transition: background 0.2s, transform 0.15s, box-shadow 0.2s;
     box-shadow: 0 2px 14px rgba(242, 107, 29, 0.45);
 }

 .btn-connect:hover {
     /* background: var(--orange-light); */
     transform: translateY(-1px) scale(1.03);
     box-shadow: 0 6px 22px rgba(242, 107, 29, 0.55);
 }

 .hamburger {
     display: none;
     flex-direction: column;
     gap: 5px;
     cursor: pointer;
     background: none;
     border: none;
     padding: 6px;
     margin-left: 4px;
 }

 .hamburger span {
     display: block;
     width: 22px;
     height: 2px;
     background: #f26b1d;
     border-radius: 2px;
     transition: transform 0.3s, opacity 0.3s;
 }

 .hamburger.open span:nth-child(1) {
     transform: translateY(7px) rotate(45deg);
 }

 .hamburger.open span:nth-child(2) {
     opacity: 0;
 }

 .hamburger.open span:nth-child(3) {
     transform: translateY(-7px) rotate(-45deg);
 }

 .mobile-drawer {
     display: none;
     position: fixed;
     top: 76px;
     left: clamp(12px, 3vw, 40px);
     right: clamp(12px, 3vw, 40px);
     background: rgba(180, 180, 180, 0.28);
     backdrop-filter: blur(20px);
     -webkit-backdrop-filter: blur(20px);
     border: 1px solid rgba(255, 255, 255, 0.14);
     border-radius: 20px;
     padding: 20px 24px 24px;
     flex-direction: column;
     gap: 16px;
     z-index: 499;
     opacity: 0;
     transform: translateY(-8px);
     transition: opacity 0.25s, transform 0.25s;
 }

 .mobile-drawer.open {
     opacity: 1;
     transform: translateY(0);
     display: flex;
     height: 100%;
 }

 .mobile-drawer a {
     font-size: 1rem;
     font-weight: 500;
     color: #000;
     text-decoration: none;
     padding: 8px 0;
     border-bottom: 1px solid rgba(255, 255, 255, 0.08);
 }

 .mobile-drawer a:last-child {
     border-bottom: none;
     color: #fff;
 }

 .mobile-drawer .btn-connect {
     margin-top: 8px;
     width: fit-content;
 }

 /* ══════════════════════════════
       HERO — FIXED IN BACKGROUND
    ══════════════════════════════ */
 .hero {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100vh;
     min-height: 560px;
     display: flex;
     align-items: center;
     overflow: hidden;
     z-index: 1;
 }

 .hero-video {
     position: absolute;
     inset: 0;
     width: 100%;
     height: 100%;
     object-fit: cover;
     object-position: center;
     z-index: 0;
     background: linear-gradient(135deg, #1a0a00 0%, #3d1a00 30%, #1a0a00 60%, #0d0500 100%);
 }

 .hero-vignette {
     position: absolute;
     inset: 0;
     background: #ffffff00;
     z-index: 1;
 }

 .hero-content {
     position: relative;
     z-index: 2;
     padding: 0 clamp(20px, 6vw, 100px);
     animation: fadeUp 1s ease both;
     margin-left: 46px;
 }

 .hero-content img {
     width: 50%;
 }

 @keyframes fadeUp {
     from {
         opacity: 0;
         transform: translateY(36px);
     }

     to {
         opacity: 1;
         transform: translateY(0);
     }
 }

 .hero-tagline {
     font-size: 42px;
     font-weight: 300;
     color: rgba(0, 0, 0, 0.88);
     line-height: 1.5;
     letter-spacing: 0.01em;
     margin-bottom: clamp(28px, 4vw, 44px);
     animation: fadeUp 1s ease 0.2s both;
 }

 .hero-tagline strong {
     font-weight: 300;
     color: #000;
 }

 .btn-hero {
     display: inline-flex;
     align-items: center;
     gap: 10px;
     background: var(--orange);
     color: #fff;
     text-decoration: none;
     border-radius: 50px;
     padding: 15px 36px;
     font-size: 20px;
     font-weight: 300;
     letter-spacing: 0.04em;
     cursor: pointer;
     border: none;
     transition: background 0.2s, transform 0.2s, box-shadow 0.2s;
     box-shadow: 0 4px 24px rgba(242, 107, 29, 0.5);
     animation: fadeUp 1s ease 0.35s both;
 }

 .btn-hero:hover {
     transform: translateY(-2px) scale(1.03);
     box-shadow: 0 10px 32px rgba(242, 107, 29, 0.55);
 }

 .btn-hero svg {
     transition: transform 0.2s;
 }

 .btn-hero:hover svg {
     transform: translateX(4px);
 }

 /* ══════════════════════════════
       HERO SPACER — holds flow space
    ══════════════════════════════ */
 .hero-spacer {
     height: 100vh;
     position: relative;
     z-index: 2;
     pointer-events: none;
 }

 /* ══════════════════════════════
       VIDEO PANEL REVEAL
       The panel is always FULL WIDTH × FULL HEIGHT.
       It starts below the viewport and slides UP
       like a curtain, covering the fixed hero.
       
       Scroll track = 200vh
       At scroll 0%  → panel is fully below viewport  (translateY = 100%)
       At scroll 100% → panel is fully covering screen (translateY = 0%)
    ══════════════════════════════ */
 .video-reveal-section {
     position: relative;
     height: 200vh;
     z-index: 10;
 }

 .video-reveal-sticky {
     position: sticky;
     top: 0;
     height: 100vh;
     overflow: hidden;
     pointer-events: none;
 }

 .video-reveal-frame {
     position: absolute;
     inset: 0;
     border-radius: 0px;
     overflow: hidden;
     pointer-events: all;
     will-change: transform, border-radius;
     transform: translateY(100%);
 }

 .reveal-video-wrap {
     position: absolute;
     inset: 0;
 }

 .reveal-video {
     width: 100%;
     height: 100%;
     object-fit: cover;
     display: block;
 }

 /* ── Muted badge ── */
 .muted-badge {
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     background: rgba(0, 0, 0, 0.6);
     border: 1px solid rgba(255, 255, 255, 0.15);
     color: rgba(255, 255, 255, 0.7);
     font-size: 11px;
     letter-spacing: 0.15em;
     text-transform: uppercase;
     padding: 8px 20px;
     border-radius: 50px;
     backdrop-filter: blur(12px);
     pointer-events: none;
     opacity: 0;
     transition: opacity 0.3s;
     z-index: 40;
 }

 /* ── Big center play button ── */
 .play-btn-wrap {
     position: absolute;
     inset: 0;
     display: flex;
     align-items: center;
     justify-content: center;
     z-index: 20;
     transition: opacity 0.4s ease;
 }

 .play-btn {
     width: 96px;
     height: 96px;
     border-radius: 50%;
     border: 1.5px solid rgba(255, 255, 255, 0.25);
     background: rgba(255, 255, 255, 0.12);
     backdrop-filter: blur(20px);
     -webkit-backdrop-filter: blur(20px);
     cursor: pointer;
     display: flex;
     align-items: center;
     justify-content: center;
     transition: transform 0.25s cubic-bezier(.34, 1.56, .64, 1),
         background 0.25s ease,
         box-shadow 0.25s ease;
     box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.08),
         0 8px 40px rgba(0, 0, 0, 0.5);
     position: relative;
 }

 .play-btn::before {
     content: '';
     position: absolute;
     inset: -1px;
     border-radius: 50%;
     background: conic-gradient(from 0deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.18));
     z-index: -1;
     animation: spin 6s linear infinite;
 }

 @keyframes spin {
     to {
         transform: rotate(360deg);
     }
 }

 .play-btn:hover {
     transform: scale(1.1);
     background: rgba(255, 255, 255, 0.2);
     box-shadow: 0 0 0 16px rgba(255, 255, 255, 0.05),
         0 16px 60px rgba(0, 0, 0, 0.6);
 }

 .play-btn:active {
     transform: scale(0.97);
 }

 .play-icon {
     width: 0;
     height: 0;
     border-style: solid;
     border-width: 16px 0 16px 28px;
     border-color: transparent transparent transparent #fff;
     margin-left: 5px;
     filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.5));
 }

 .pause-icon {
     display: none;
     gap: 6px;
 }

 .pause-bar {
     width: 5px;
     height: 24px;
     background: #fff;
     border-radius: 2px;
 }

 .play-btn.playing .play-icon {
     display: none;
 }

 .play-btn.playing .pause-icon {
     display: flex;
 }

 /* ── Bottom controls bar ── */
 .controls-bar {
     position: absolute;
     bottom: 0;
     left: 0;
     right: 0;
     z-index: 30;
     padding: 24px 32px;
     background: linear-gradient(to top, rgba(0, 0, 0, 0.75) 0%, transparent 100%);
     display: flex;
     align-items: center;
     gap: 16px;
     opacity: 0;
     transform: translateY(10px);
     transition: opacity 0.35s ease, transform 0.35s ease;
 }

 .video-reveal-frame:hover .controls-bar,
 .controls-bar.visible {
     opacity: 1;
     transform: translateY(0);
 }

 /* Small inline play/pause */
 .ctrl-play {
     width: 36px;
     height: 36px;
     border-radius: 50%;
     background: rgba(255, 255, 255, 0.15);
     border: 1px solid rgba(255, 255, 255, 0.2);
     cursor: pointer;
     display: flex;
     align-items: center;
     justify-content: center;
     flex-shrink: 0;
     transition: background 0.2s;
 }

 .ctrl-play:hover {
     background: rgba(255, 255, 255, 0.25);
 }

 .ctrl-play-icon {
     width: 0;
     height: 0;
     border-style: solid;
     border-width: 6px 0 6px 10px;
     border-color: transparent transparent transparent #fff;
     margin-left: 2px;
 }

 .ctrl-play.playing .ctrl-play-icon {
     display: none;
 }

 .ctrl-pause-bars {
     display: none;
     gap: 3px;
 }

 .ctrl-play.playing .ctrl-pause-bars {
     display: flex;
 }

 .ctrl-pause-bar {
     width: 2.5px;
     height: 11px;
     background: #fff;
     border-radius: 1px;
 }

 /* Volume icon */
 .vol-icon {
     flex-shrink: 0;
     color: rgba(255, 255, 255, 0.85);
     cursor: pointer;
     width: 22px;
     display: flex;
     align-items: center;
 }

 .vol-icon svg {
     width: 20px;
     height: 20px;
     fill: currentColor;
 }

 /* Volume slider */
 .vol-slider-wrap {
     flex: 1;
     max-width: 160px;
     position: relative;
     height: 4px;
     background: rgba(255, 255, 255, 0.2);
     border-radius: 4px;
     cursor: pointer;
 }

 .vol-fill {
     position: absolute;
     left: 0;
     top: 0;
     bottom: 0;
     background: #fff;
     border-radius: 4px;
     pointer-events: none;
 }

 .vol-thumb {
     position: absolute;
     top: 50%;
     width: 14px;
     height: 14px;
     background: #fff;
     border-radius: 50%;
     transform: translate(-50%, -50%);
     box-shadow: 0 0 6px rgba(0, 0, 0, 0.5);
     pointer-events: none;
 }

 .vol-label {
     font-size: 10px;
     color: rgba(255, 255, 255, 0.5);
     letter-spacing: 0.1em;
     text-transform: uppercase;
     white-space: nowrap;
 }

 /* ── Original decorations ── */
 .reveal-edge {
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     height: 36px;
     background: rgba(255, 255, 255, 0.04);
     border-radius: 28px 28px 0 0;
     pointer-events: none;
     transition: opacity 0.2s;
 }

 .reveal-hint {
     position: absolute;
     bottom: 80px;
     left: 50%;
     transform: translateX(-50%);
     display: inline-flex;
     align-items: center;
     gap: 8px;
     background: rgba(0, 0, 0, 0.45);
     backdrop-filter: blur(16px);
     -webkit-backdrop-filter: blur(16px);
     color: #fff;
     font-size: 11px;
     font-weight: 300;
     letter-spacing: 0.12em;
     text-transform: uppercase;
     padding: 10px 24px;
     border-radius: 50px;
     border: 1px solid rgba(255, 255, 255, 0.15);
     pointer-events: none;
     white-space: nowrap;
     opacity: 0;
     transition: opacity 0.3s;
 }

 .reveal-hint .arrow {
     display: inline-block;
     animation: floatUp 1.8s ease-in-out infinite;
 }

 .video-thumb {
     position: absolute;
     inset: 0;
     z-index: 2;
     cursor: pointer;
     transition: opacity 0.3s ease;
 }

 .video-thumb img {
     width: 100%;
     height: 100%;
     object-fit: cover;
 }

 .video-thumb.hide {
     opacity: 0;
     pointer-events: none;
 }

 .thumb-mobile {
     display: none;
 }

 @media (max-width: 768px) {
     .thumb-desktop {
         display: none;
     }

     .thumb-mobile {
         display: block;
     }
 }

 @keyframes floatUp {

     0%,
     100% {
         transform: translateY(2px);
         opacity: 0.6;
     }

     50% {
         transform: translateY(-3px);
         opacity: 1;
     }
 }

 @keyframes floatUp {

     0%,
     100% {
         transform: translateY(2px);
         opacity: 0.6;
     }

     50% {
         transform: translateY(-3px);
         opacity: 1;
     }
 }

 /* Orange progress bar */
 .reveal-progress {
     position: fixed;
     bottom: 0;
     left: 0;
     height: 3px;
     width: 0%;
     background: linear-gradient(90deg, var(--orange), var(--orange-light));
     z-index: 600;
     pointer-events: none;
     opacity: 0;
 }

 /* ══════════════════════════════
       SECTIONS AFTER REVEAL
    ══════════════════════════════ */
 .after-reveal {
     position: relative;
     z-index: 10;
     background: #fff;
     min-height: 100vh;
     /* padding: 120px clamp(24px, 8vw, 140px); */
 }

 .after-reveal h2 {
     font-size: 64px;
     font-weight: 300;
     color: #111;
     line-height: 1.15;
     margin-bottom: 15px;
     text-align: center;
 }

 .after-reveal h2 span {
     color: var(--orange);
 }



 /* Our Work css start */
 .uniqueWorkSection {
     max-width: 90%;
     margin: auto;
 }

 .uniqueWorkSection.sectionPadding {
     padding: 20px;
     padding-top: 50px;
     margin-bottom: 70px;
 }

 .uniqueWorkHeader {
     display: flex;
     justify-content: space-between;
     align-items: end;
     flex-wrap: wrap;
     gap: 20px;
 }

 .partnersTitle.visible.testimonealHeading {
     margin-bottom: 20px;

 }

 .uniqueWorkTitle {
     font-size: 48px;
     font-weight: 300;
     margin-bottom: 30px;
     text-align: left !important;
 }

 .uniqueWorkDesc {
     /* max-width: 700px; */
     margin-top: 10px;
     font-size: 24px;
     color: #000000b5;
     line-height: 30px;
     font-weight: 300;
 }

 .uniqueSliderControls {
     display: flex;
     align-items: center;
     gap: 15px;
 }

 .uniqueArrow {
     cursor: pointer;
     font-size: 30px;
     padding: 6px 10px;
     color: #000;
 }

 .uniqueTimer {
     width: 50px;
     height: 50px;
     position: relative;
 }

 .uniqueTimer svg {
     transform: rotate(-90deg);
 }

 .uniqueTimer circle {
     fill: none;
     stroke-width: 4;
 }

 .uniqueTimer .bg {
     stroke: #ddd;
 }

 .uniqueTimer .progress {
     stroke: #000;
     stroke-dasharray: 126;
     stroke-dashoffset: 0;
     transition: stroke-dashoffset .2s linear;
 }

 .uniqueWorkSlider {
     margin-top: 40px;
 }



 .uniqueWorkGrid {
     display: grid;
     grid-template-columns: 1.4fr 1.4fr 1fr;
     /* left | big center | right */
     /* grid-template-rows: 220px 220px; */
     gap: 16px;
 }

 /* LEFT SIDE */
 .cardA {
     grid-column: 1/2;
     grid-row: 1/2;
 }

 .cardE {
     grid-column: 1/2;
     grid-row: 2/3;
 }

 /* CENTER BIG CARD */
 .cardB {
     grid-column: 2/3;
     grid-row: 1/3;
     /* span full height */
 }

 /* RIGHT SIDE */
 .cardC {
     grid-column: 3/4;
     grid-row: 1/2;
 }

 .cardD {
     grid-column: 3/4;
     grid-row: 2/3;
 }

 .uniqueCard {
     position: relative;
     border-radius: 18px;
     overflow: hidden;
     color: #fff;
 }

 .uniqueCard img {
     width: 100%;
     height: 100%;
     /* object-fit: cover; */
     display: block;
     filter: grayscale(100%);
     transition: filter 0.5s ease, transform 0.5s ease;
     cursor: pointer;
 }

  .uniqueCard.cardA img {
     filter: unset;
 }

 .uniqueCard:hover img {
     filter: grayscale(0%);
     transform: scale(1.04);
 }

 .uniqueCard::after {
     content: '';
     position: absolute;
     inset: 0;
     background: linear-gradient(to top, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0.1) 55%, transparent 100%);
     pointer-events: none;
 }

 .uniqueCardOverlay {
     position: absolute;
     bottom: 20px;
     left: 20px;
     right: 20px;
     z-index: 2;
 }

 .uniqueCardTitle {
     font-size: 20px;
     font-weight: 500;
     margin-bottom: 5px;
     line-height: 1.3;
     display: none;
 }

 .uniqueCardSub {
     font-size: 13px;
     opacity: .75;
     letter-spacing: 0.02em;
     display: none;
 }

 /* Our Work css end */


 /* Marque Section start here  */
 .marquee {
     width: 100%;
     overflow: hidden;
 }

 .marquee.sectionPadding {
     padding-top: 40px;
     padding-bottom: 120px;
 }

 .marquee__inner {
     display: flex;
     width: max-content;
     animation: marquee 15s linear infinite;
 }

 .marquee span {
     font-family: 'Poppins', sans-serif;
     font-weight: 800;
     font-size: 120px;

     letter-spacing: 2px;
     transform: scaleX(1.1);

     color: transparent;
     -webkit-text-stroke: 2px #f97316;
 }

 @keyframes marquee {
     0% {
         transform: translateX(0%);
     }

     100% {
         transform: translateX(-50%);
     }
 }

 /* Marque Section end here  */


 /* Testimoneal css start here */
 /* ═══════════════════════════════════════
           SHARED CARD STYLES (desktop + mobile)
        ═══════════════════════════════════════ */

 .arcCard {
     width: 305px;
     height: 430px;
     border-radius: 16px;
     overflow: hidden;
     box-shadow: 0 20px 40px rgba(0, 0, 0, 0.18);
 }

 .arcCard img,
 .arcCard video {
     width: 100%;
     height: 100%;
     object-fit: cover;
     display: block;
 }

 .arcOverlay {
     position: absolute;
     inset: 0;
     background: linear-gradient(to top, rgba(0, 0, 0, 0.72), rgba(0, 0, 0, 0.06) 55%, rgba(255, 255, 255, 0.08));
     z-index: 2;
 }

 .arcBadge {
     position: absolute;
     top: 14px;
     right: 14px;
     z-index: 3;
     background: rgba(255, 255, 255, 0.88);
     color: #666;
     font-size: 11px;
     padding: 6px 10px;
     border-radius: 20px;

 }

 .arcContent {
     position: absolute;
     left: 16px;
     right: 16px;
     bottom: 16px;
     color: #fff;
     z-index: 3;
 }

 .arcContent h3 {
     font-size: 24px;
     margin-bottom: 6px;
 }

 .arcContent p {
     font-size: 12px;
     opacity: .85;
 }

 /* ── PLAY BUTTON STYLES ── */
 .arcPlay {
     position: absolute;
     left: 50%;
     top: 50%;
     width: 78px;
     height: 78px;
     margin-left: -39px;
     margin-top: -39px;
     border-radius: 50%;
     background: rgba(255, 255, 255, 0.18);
     display: flex !important;
     /* Ensure visible by default */
     align-items: center;
     justify-content: center;
     z-index: 4;
     cursor: pointer;
     transition: all 0.3s ease;
     backdrop-filter: blur(4px);
 }

 .arcPlay:before {
     content: "";
     border-left: 18px solid #fff;
     border-top: 12px solid transparent;
     border-bottom: 12px solid transparent;
     margin-left: 6px;
     transition: all 0.3s ease;
 }

 .arcPlay:hover {
     background: rgba(255, 255, 255, 0.28);
     transform: scale(1.05);
 }

 .arcPlay:hover:before {
     border-left-color: #fff;
     transform: scale(1.1);
 }

 /* When video is playing, hide the button */
 .arcPlay[style*="display: none"] {
     display: none !important;
 }

 .arcCardText {
     background: linear-gradient(180deg, #ffffff, #e6e6e6);
     padding: 28px;
     display: flex;
     flex-direction: column;
     justify-content: space-between;
     /* pointer-events: none; */
 }

 .arcCard.arcCardText .arcBottom {
     color: #000;
 }

 .arcQuoteTop {
     font-size: 50px;
     color: #d26b2d;
 }

 .arcQuoteBottom {
     font-size: 50px;
     color: #d26b2d;
     text-align: right;
     line-height: 1px;
 }

 .arcText {
     font-size: 14px;
     line-height: 1.7;
     color: #333;
     margin: 15px 0 20px;
 }

 .arcBottom {
     color: #fff;
 }

 .arcName {
     font-size: 24px;
     font-weight: bold;
 }

 .arcRole {
     font-size: 14px;
     opacity: .8;
 }

 /* ═══════════════════════════════════════
           DESKTOP LAYOUT  (unchanged)
        ═══════════════════════════════════════ */

 .arcSliderWrap {
     width: 1300px;
     max-width: 95%;
     height: 95vh;
     position: relative;
     /* overflow: hidden; */
     margin: 0 auto;

 }

 .arcSliderWrap .uniqueWorkDesc {
     text-align: center;
     max-width: 90%;
     margin: 0 auto;
     margin-bottom: 0px;
     margin-bottom: -30px;
 }

 .arcSliderWrap.sectionPadding {
     padding-top: 00px;
 }

 .arcSlider {
     width: 100%;
     height: 100%;
     position: relative;
 }

 .arcSlider>.arcCard {
     position: absolute;
     top: 50%;
     left: 50%;
     transform-origin: center center;
 }

 /* ═══════════════════════════════════════
           MOBILE WRAPPER  (hidden on desktop)
        ═══════════════════════════════════════ */

 .mob-wrap {
     display: none;

 }

 /* Testimoneal css end here */


 /* Our Client Sec start here */
 .clients-section {
     width: 100%;
     padding: 44px 0 96px;
     text-align: center;
     overflow-x: clip;
 }

 .clients-section .uniqueWorkDesc {
     max-width: 90%;
     margin: 0 auto;
     margin-bottom: 220px !important;
 }

 .clients-title {
     font-size: 64px;
     font-weight: 300;
     color: #111;
     line-height: 1.15;
     margin-bottom: 10px !important;
     text-align: center;
 }

 /* ─── BUBBLE-TO-CAROUSEL GAP ───────────────────────────
       Change --bubble-gap to any value you like.
       e.g. 10px = tight | 30px = medium | 60px = roomy     */
 :root {
     --bubble-gap: 28px;
 }

 /* SPEECH BUBBLE */
 .bubble-wrap {
     display: flex;
     justify-content: center;
     margin-bottom: 220px;
 }

 .speech-bubble {
     position: relative;
     background: #fff;
     border: 1.5px solid #e3e3e3;
     border-radius: 18px;
     padding: 16px 30px;
     box-shadow: 0 4px 28px rgba(0, 0, 0, 0.07);
     max-width: 340px;
     min-width: 240px;
     transition: opacity 0.2s ease;
 }

 .speech-bubble::before,
 .speech-bubble::after {
     content: '';
     position: absolute;
     left: 50%;
     transform: translateX(-50%);
 }

 .speech-bubble::before {
     bottom: -20px;
     border: 10px solid transparent;
     border-top-color: #e3e3e3;
     z-index: 1;
 }

 .speech-bubble::after {
     bottom: -17px;
     border: 9px solid transparent;
     border-top-color: #fff;
     z-index: 2;
 }

 .bubble-heading {
     font-size: 18px;
     color: #000000;
     font-weight: 400;
     line-height: 1.5;
     margin-bottom: 6px;
 }

 .bubble-cta {
     font-size: 0.72rem;
     color: #999;
     cursor: pointer;
     border-bottom: 1px solid #ddd;
     display: inline-block;
     transition: color 0.2s, border-color 0.2s;
 }

 .bubble-cta:hover {
     color: #f57c00;
     border-color: #f57c00;
 }

 /* CAROUSEL STAGE */
 .carousel-outer {
     position: relative;
     width: 100%;
     transition: height 0.2s ease-out;
     height: 70px !important;
 }

 .carousel-stage {
     position: absolute;
     inset: 0;
     overflow: visible;
     touch-action: pan-y pinch-zoom;
 }

 /* LOGO CARDS */
 .logo-card {
     position: absolute;
     background: #fff;
     border-radius: 24px;
     border: 2px solid #ebebeb;
     box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
     display: flex;
     align-items: center;
     justify-content: center;
     cursor: pointer;
     user-select: none;
     opacity: 0;
     will-change: transform, left, top;
     transition: box-shadow 0.2s ease, border-color 0.2s ease;
     padding: 14px;
     overflow: hidden;
 }

 .logo-card.is-active {
     box-shadow: rgba(247, 127, 0, 0.3) 0px 0px 20px;
 }

 /* Logo image inside card */
 .logo-img {
     width: 100%;
     height: 100%;
     object-fit: contain;
     pointer-events: none;
     display: block;
     border-radius: 10px;
 }

 /* Text fallback (shown when image fails) */
 .logo-lbl {
     display: none;
     width: 100%;
     height: 100%;
     align-items: center;
     justify-content: center;
     font-weight: 700;
     text-align: center;
     line-height: 1.2;
     letter-spacing: -0.2px;
     white-space: nowrap;
     pointer-events: none;
 }

 /* CONTROLS */
 .controls {
     margin-top: 10px;
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 18px;
 }

 .nav-btn {
     width: 48px;
     height: 48px;
     border-radius: 50%;
     border: 1.5px solid #d8d8d8;
     background: #fff;
     font-size: 1.6rem;
     font-weight: 500;
     color: #666;
     cursor: pointer;
     display: flex;
     align-items: center;
     justify-content: center;
     box-shadow: 0 2px 10px rgba(0, 0, 0, 0.07);
     transition: border-color 0.2s, color 0.2s, transform 0.2s;
 }

 .nav-btn:hover {
     border-color: #f77f00;
     color: #f77f00;
     transform: scale(1.03);
 }

 .see-all-btn {
     background: linear-gradient(-90deg, #ffab30 0%, #f57c00 100%);
     color: #fff;
     border: none;
     border-radius: 100px;
     padding: 12px 48px;
     font-size: 020;
     font-weight: 300;
     cursor: pointer;
     letter-spacing: 0.3px;
     box-shadow: 0 6px 20px rgba(245, 124, 0, 0.35);
     transition: transform 0.2s, box-shadow 0.2s;
 }

 .see-all-btn:hover {
     transform: translateY(-2px);
     box-shadow: 0 12px 28px rgba(245, 124, 0, 0.45);
 }

 /* Our Client Sec end here */


 /* Our Partner css start */
 .partnersSection {
     background: #fff;
     padding: 120px 0 120px;
     display: flex;
     flex-direction: column;
     align-items: center;
     overflow: hidden;
 }

 /* Title */
 .partnersTitle {
     font-size: clamp(26px, 3.2vw, 48px);
     font-weight: 300;
     letter-spacing: -0.02em;
     color: #111;
     margin-bottom: 100px;
     text-align: center;
     opacity: 0;
     transform: translateY(18px);
     transition: opacity 0.6s ease, transform 0.6s ease;
 }

 .partnersTitle.visible {
     opacity: 1;
     transform: translateY(0);
     margin-bottom: 70px;
 }

 /* Logo row */
 .partnersLogos {
     display: flex;
     align-items: center;
     justify-content: center;
     gap: clamp(32px, 6vw, 96px);
 }

 /* Each logo — greyed out initially */
 .partnerLogo {
     display: flex;
     align-items: center;
     justify-content: center;
     opacity: 0.18;
     filter: grayscale(1);
     transform: scale(0.94);
     transition:
         opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
         filter 0.7s cubic-bezier(0.16, 1, 0.3, 1),
         transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
 }

 .partnerLogo.lit {
     opacity: 1;
     filter: grayscale(0);
     transform: scale(1);
 }

 .partnerLogo img {
     height: 150px;
     width: auto;
     display: block;
     border: none;
     outline: none;
     box-shadow: none;
     -webkit-user-drag: none;
 }

 /* Vertical dot stepper — right side */
 .partnersDots {
     position: absolute;
     right: clamp(24px, 3.5vw, 52px);
     top: 50%;
     transform: translateY(-50%);
     display: flex;
     flex-direction: column;
     align-items: center;
     gap: 0;
     opacity: 0;
 }

 .partnersSection {
     position: relative;
 }

 .pDotLine {
     width: 1px;
     height: 28px;
     background: #ddd;
     transition: background 0.5s ease;
 }

 .pDotLine.lit {
     background: #111;
 }

 .pDot {
     width: 7px;
     height: 7px;
     border-radius: 50%;
     background: #ddd;
     transition: background 0.45s ease, transform 0.4s ease;
 }

 .pDot.lit {
     background: #111;
     transform: scale(1.4);
 }

 /* Our Partner css end */


 /* Award css start here  */

 /* Award Css */

 :root {
     --orange: #e8650a;
     --orange-light: rgba(232, 101, 10, 0.08);
     --card-bg: #f7f7f5;
     --border: #e8e8e4;
     --text: #1a1a18;
     --white: #ffffff;
     --card-w: 290px;
     --card-h: 380px;
     --gap: 16px;
 }



 .awardsSection {
     background: #fff;
     padding: 80px 0 72px;
     overflow: hidden;
 }

 .awardsSection .awardsHeader {
     flex-direction: column;
     align-items: start;
 }

 .awardsInner {
     /* max-width: 90%; */
     /* margin: 0 auto; */
     /* margin-right: 0; */
     width: 100%;
 }

 .awardsHeader {
     display: flex;
     align-items: flex-end;
     justify-content: space-between;
     padding: 0 48px 40px;
     padding-left: 140px;
     padding-bottom: 50px;
 }

 .awardsTitle {
     font-size: clamp(36px, 4vw, 56px);
     font-weight: 300;
     color: var(--text);
     letter-spacing: -0.5px;
     line-height: 1;
 }

 /* ═══════════════════════════════
           TRACK
        ═══════════════════════════════ */
 .awardsTrackWrap {
     overflow: hidden;
     cursor: grab;
     max-width: 92%;
     margin: 0 auto;
     margin-right: 0;
     /* padding-left: 140px; */
      touch-action: none;  /* ← ADD THIS */

 }

 .awardsTrackWrap.dragging {
     cursor: grabbing;
 }

 .awardsTrack {
     display: flex;
     align-items: flex-start;
     gap: var(--gap);
     width: max-content;
     will-change: transform;
     padding-top: 20px;
 }

 /* ═══════════════════════════════
           CARD
        ═══════════════════════════════ */
 .awardCard {
     width: var(--card-w);
     height: var(--card-h);
     flex-shrink: 0;
     transition: width 0.52s cubic-bezier(0.4, 0, 0.2, 1),
         height 0.52s cubic-bezier(0.4, 0, 0.2, 1);
 }

 .awardCard.expanded {
     width: 660px;
 }

 .awardCardInner {
     width: 100%;
     height: 100%;
     background: var(--card-bg);
     border: 1px solid var(--border);
     border-radius: 20px;
     overflow: hidden;
     display: flex;
     flex-direction: column;
     align-items: center;
     padding: 36px 20px 24px;
     position: relative;
     transition: box-shadow 0.3s ease;

     /* ✅ Add this */
     background-image: url('../images/Base.png');
     background-size: cover;
     background-position: center;
     background-repeat: no-repeat;
 }

 .awardCard:not(.expanded) .awardCardInner:hover {
     box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
 }

 /* confetti */
 .confettiContainer {
     position: absolute;
     inset: 0;
     pointer-events: none;
     overflow: hidden;
     border-radius: 20px;
     z-index: 6;
 }

 .confettiPiece {
     position: absolute;
     animation: confettiBurst var(--dur) ease-out var(--delay) forwards;
     opacity: 0;
 }

 @keyframes confettiBurst {
     0% {
         transform: translate(0, 0) rotate(0deg) scale(1);
         opacity: 1;
     }

     60% {
         opacity: 1;
     }

     100% {
         transform: translate(var(--tx), var(--ty)) rotate(var(--rot)) scale(0.4);
         opacity: 0;
     }
 }

 /* image */
 .awardImgWrap {
     flex: 1;
     display: flex;
     align-items: center;
     justify-content: center;
     width: 100%;
 }

 .awardImgWrap img {
     height: 270px;
     object-fit: contain;
     display: block;
     pointer-events: none;
     user-select: none;
     transition: transform 0.35s cubic-bezier(0.34, 1.4, 0.64, 1);
     margin-bottom: 11px;
 }

 .awardCard:not(.expanded) .awardCardInner:hover .awardImgWrap img {
     transform: scale(1.07) translateY(-4px);
 }

 /* collapsed bottom */
 .awardCollapsedBottom {
     width: 100%;
     text-align: center;
     position: relative;
 }

 .awardDivider {
     height: 1px;
     background: var(--border);
     margin-bottom: 10px;
     transition: opacity 0.2s;
 }

 .awardName {
     font-size: 18px;
     font-weight: 300;
     color: #464646;
     transition: opacity 0.2s;
 }

 .awardHoverBtn {
     position: absolute;
     inset: 0;
     top: 9px;
     display: flex;
     align-items: center;
     justify-content: center;
     opacity: 0;
     transition: opacity 0.22s ease;
     pointer-events: none;
     display: none;
 }

 .awardHoverBtn span {
     background: var(--white);
     border: 1px solid #464646;
     padding: 8px 22px;
     border-radius: 40px;
     font-size: 18px;
     font-weight: 300;
     color: #464646;
     pointer-events: none;
 }

 .awardCard:not(.expanded) .awardCardInner:hover .awardHoverBtn {
     opacity: 1;
     pointer-events: all;
     cursor: pointer;
 }

 .awardCard:not(.expanded) .awardCardInner:hover .awardName,
 .awardCard:not(.expanded) .awardCardInner:hover .awardDivider {
     /* opacity: 0; */
 }

 /* ═══════════════════════════════
           EXPANDED
        ═══════════════════════════════ */
 .awardCard.expanded .awardCardInner {
     flex-direction: row;
     padding: 0;
     cursor: default;
     background: var(--white);
 }

 .awardCard.expanded .awardImgWrap {
     width: 44%;
     flex-shrink: 0;
     flex: none;
     padding: 44px 36px;
     border-right: 1px solid var(--border);
 }

 .awardCard.expanded .awardImgWrap img {
     height: 270px;
 }

 .awardCard.expanded .awardCollapsedBottom {
     display: none;
 }

 .awardExpandedContent {
     display: flex;
     flex-direction: column;
     justify-content: space-between;
     padding: 36px 32px;
     width: 0;
     min-width: 0;
     overflow: hidden;
     opacity: 0;
     pointer-events: none;
     transition: width 0.48s cubic-bezier(0.4, 0, 0.2, 1) 0.06s,
         opacity 0.32s ease 0.36s;
 }

 .awardExpandedInner {
     width: 368px;
     display: flex;
     flex-direction: column;
     justify-content: space-between;
     height: 100%;
 }

 .awardCard.expanded .awardExpandedContent {
     width: 368px;
     opacity: 1;
     pointer-events: all;
 }

 .awardExpandedTop {
     width: 80%;
 }

 .awardExpandedTitle {
     font-size: 30px;
     font-weight: 300;
     color: #464646;
     margin-bottom: 16px;
     letter-spacing: -0.2px;
     line-height: 1.2;
 }

 .awardExpandedDesc {
     font-size: 18px;
     line-height: 25px;
     color: #666;
     font-weight: 300;
 }

 .awardCaseStudyBtn {
     display: block;
     width: 80%;
     margin-top: 24px;
     border: 1.5px solid #464646;
     padding: 14px 20px;
     border-radius: 12px;
     text-decoration: none;
     color: #464646;
     font-weight: 400;
     font-size: 18px;
     text-align: center;
     transition: background 0.2s, color 0.2s;
     flex-shrink: 0;
 }

 .awardCaseStudyBtn:hover {
     background: var(--text);
     color: #fff;
 }

 .awardCloseBtn {
     position: absolute;
     top: 12px;
     right: 12px;
     background: var(--border);
     border: none;
     width: 28px;
     height: 28px;
     border-radius: 50%;
     font-size: 12px;
     display: none;
     align-items: center;
     justify-content: center;
     cursor: pointer;
     z-index: 5;
     color: var(--text);
     transition: background 0.2s;
 }

 .awardCloseBtn:hover {
     background: #d5d5d0;
 }

 .awardCard.expanded .awardCloseBtn {
     display: flex;
 }

 /* ═══════════════════════════════
           BOTTOM CONTROLS
           scrollbar row + prev/next
        ═══════════════════════════════ */
 .awardsScrollbarArea {
     padding: 72px 48px 0;
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 16px;
 }

 /* Nav buttons — hidden on desktop, shown on mobile via media query */
 .awardsNavBtn {
     display: none;
     align-items: center;
     justify-content: center;
     width: 40px;
     height: 40px;
     flex-shrink: 0;
     border-radius: 50%;
     border: 1.5px solid var(--border);
     background: var(--white);
     cursor: pointer;
     color: var(--text);
     transition: border-color 0.2s, background 0.2s, opacity 0.2s;
 }

 .awardsNavBtn:hover {
     border-color: var(--orange);
     background: var(--orange-light);
 }

 .awardsNavBtn:disabled {
     opacity: 0.28;
     cursor: default;
     pointer-events: none;
 }

 .awardsNavBtn svg {
     width: 16px;
     height: 16px;
     stroke: currentColor;
     stroke-width: 2;
     fill: none;
     stroke-linecap: round;
     stroke-linejoin: round;
 }

 .awardsScrollTrack {
     flex: 1;
     max-width: 360px;
     height: 17px;
     background: #ebebeb;
     border-radius: 999px;
     position: relative;
     cursor: pointer;
 }

 .awardsScrollThumb {
     position: absolute;
     top: 3px;
     left: 0;
     height: 10px;
     background: var(--orange);
     border-radius: 999px;
     cursor: grab;
     user-select: none;
     min-width: 26px;
     transition: opacity 0.2s;
 }

 .awardsScrollThumb:hover {
     opacity: 0.85;
 }

 .awardsScrollThumb:active {
     cursor: grabbing;
 }

 /* ═══════════════════════════════
           MOBILE BOTTOM SHEET
        ═══════════════════════════════ */
 .mobileModal {
     position: fixed;
     inset: 0;
     z-index: 1000;
     pointer-events: none;
     visibility: hidden;
 }

 .mobileModal.open {
     pointer-events: all;
     visibility: visible;
 }

 .mobileModalBackdrop {
     position: absolute;
     inset: 0;
     background: rgba(10, 10, 8, 0);
     transition: background 0.38s ease;
 }

 .mobileModal.open .mobileModalBackdrop {
     background: rgba(10, 10, 8, 0.55);
 }

 .mobileModalSheet {
     position: absolute;
     bottom: 0;
     left: 0;
     right: 0;
     background: #fff;
     border-radius: 24px 24px 0 0;
     padding: 0 0 env(safe-area-inset-bottom, 24px);
     transform: translateY(100%);
     transition: transform 0.42s cubic-bezier(0.32, 0.72, 0, 1);
     max-height: 90vh;
     overflow-y: auto;
 }

 .mobileModal.open .mobileModalSheet {
     transform: translateY(0);
 }

 .modalDragHandle {
     width: 44px;
     height: 5px;
     background: #e0e0da;
     border-radius: 99px;
     margin: 14px auto 0;
 }

 .modalCloseRow {
     display: flex;
     justify-content: flex-end;
     padding: 12px 20px 0;
 }

 .modalCloseX {
     background: #f0f0ed;
     border: none;
     width: 32px;
     height: 32px;
     border-radius: 50%;
     font-size: 13px;
     display: flex;
     align-items: center;
     justify-content: center;
     cursor: pointer;
     color: var(--text);
     transition: background 0.2s;
 }

 .modalCloseX:hover {
     background: #e0e0da;
 }

 .modalImgWrap {
     display: flex;
     align-items: center;
     justify-content: center;
     padding: 28px 40px 24px;
     position: relative;
 }

 .modalImgBg {
     position: absolute;
     inset: 0;
     background: radial-gradient(ellipse at center, rgba(232, 101, 10, 0.07) 0%, transparent 70%);
 }

 .modalImgWrap img {
     height: 140px;
     object-fit: contain;
     position: relative;
     z-index: 1;
 }

 .modalBody {
     padding: 0 24px 32px;
 }

 .modalTag {
     display: inline-flex;
     align-items: center;
     gap: 6px;
     background: var(--orange-light);
     color: var(--orange);
     font-size: 11px;
     font-weight: 600;
     letter-spacing: 0.6px;
     text-transform: uppercase;
     padding: 5px 12px;
     border-radius: 40px;
     margin-bottom: 14px;
 }

 .modalTitle {
     font-size: 34px;
     font-weight: 400;
     color: var(--text);
     letter-spacing: -0.3px;
     line-height: 1.15;
     margin-bottom: 14px;
 }

 .modalDivider {
     height: 1px;
     background: var(--border);
     margin: 18px 0;
 }

 .modalDesc {
     font-size: 14px;
     line-height: 1.8;
     color: #666;
     font-weight: 300;
     margin-bottom: 28px;
 }

 .modalBtn {
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 8px;
     width: 100%;
     padding: 16px;
     background: var(--text);
     color: #fff;
     border-radius: 14px;
     text-decoration: none;
     font-weight: 600;
     font-size: 14px;
     letter-spacing: 0.2px;
     transition: opacity 0.2s;
 }

 .modalBtn:hover {
     opacity: 0.85;
 }

 .modalBtn svg {
     width: 16px;
     height: 16px;
 }

 /* Award css end here  */


 /* Blog css start here  */
 :root {
     --orange: #E87722;
     --orange-light: #fff4eb;
     --white: #ffffff;
     --text: #111111;
     --border: #ddd;
 }



 /* ════════════════════════════════════════════
       SECTION
    ════════════════════════════════════════════ */
 .blogs-section {
     width: 100%;
     padding: 100px 0px;
     padding-bottom: 20px;
 }

 .blogs-heading {
     color: var(--text);
     padding: 0 0 14px 140px;
     letter-spacing: -0.3px;
     text-align: left !important;
 }

 .blogs-section .uniqueWorkDesc {
     margin-bottom: 60px;
     padding-left: 140px;
 }

 /* ════════════════════════════════════════════
       SCROLL WRAPPER — clips overflow
    ════════════════════════════════════════════ */
 .blogsWrap {
     overflow: hidden;
     margin-left: 140px;
     cursor: grab;
     user-select: none;
     /* max-width: 90%; */
     /* margin: auto; */
     margin-right: 0;
 }

 .blogsWrap .awardsScrollbarArea {
     padding-top: 80px !important;
 }

 .blogsWrap.dragging {
     cursor: grabbing;
 }

 /* ════════════════════════════════════════════
       TRACK — the inner scrollable row
    ════════════════════════════════════════════ */
 .blogsTrack {
     display: flex;
     gap: 22px;
     will-change: transform;
     /* width set via JS to sum of card widths + gaps */
 }

 /* ════════════════════════════════════════════
       CARD
    ════════════════════════════════════════════ */
 .blog-card {
     flex: 0 0 var(--card-w, 480px);
     height: 370px;
     border-radius: 18px;
     overflow: hidden;
     position: relative;
     cursor: pointer;
     -webkit-tap-highlight-color: transparent;
 }

 .blog-card__img {
     position: absolute;
     inset: 0;
     width: 100%;
     height: 100%;
     object-fit: cover;
     transition: transform 0.55s ease;
     pointer-events: none;
 }

 .blog-card:hover .blog-card__img {
     transform: scale(1.05);
 }

 /* overlay */
 .blog-card__overlay {
     position: absolute;
     inset: 0;
     background: linear-gradient(to top,
             rgba(0, 0, 0, 0.74) 0%,
             rgba(0, 0, 0, 0.18) 45%,
             rgba(0, 0, 0, 0.02) 100%);
     transition: background 0.4s ease;
 }

 .blog-card:not(.blog-card--dark):hover .blog-card__overlay {
     background: linear-gradient(to top,
             rgba(0, 0, 0, 0.86) 0%,
             rgba(0, 0, 0, 0.52) 52%,
             rgba(0, 0, 0, 0.14) 100%);
 }

 .blog-card--dark .blog-card__overlay {
     background: rgba(10, 10, 10, 0.70);
 }

 .blog-card--dark:hover .blog-card__overlay {
     background: rgba(10, 10, 10, 0.78);
 }

 /* logo badge */
 .blog-card__logo {
     position: absolute;
     top: 20px;
     left: 20px;
     width: 96px;
     height: 96px;
     background: #fff;
     border-radius: 14px;
     display: flex;
     align-items: center;
     justify-content: center;
     box-shadow: 0 4px 18px rgba(0, 0, 0, 0.24);
     z-index: 3;
     transition: transform 0.3s ease;
 }

 .blog-card:hover .blog-card__logo {
     transform: scale(0.88);
 }

 /* content slide-up */
 .blog-card__content {
     position: absolute;
     bottom: 0;
     left: 0;
     right: 0;
     padding: 0 26px 28px;
     z-index: 3;
     transition: transform 0.44s cubic-bezier(0.22, 1, 0.36, 1);
 }

 .blog-card:hover .blog-card__content {
     transform: translateY(-10px);
 }

.blog-card__title {
    font-size: 30px;
    font-weight: 200;
    line-height: normal;
    color: #fff;
    position: relative;
    display: inline-block;
    transition: color 0.3s ease;
}

/* underline hidden by default */
.blog-card__title::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -4px;
    width: 0%;
    height: 1px;
    background-color: currentColor;
    transition: width 0.3s ease;
}

/* hover effect */
.blog-card:not(.blog-card--dark):hover .blog-card__title {
    color: var(--orange);
}

.blog-card:not(.blog-card--dark):hover .blog-card__title::after {
    width: 100%;
}

/* dark version always orange + underline */
.blog-card--dark .blog-card__title {
    color: var(--orange);
}

.blog-card--dark .blog-card__title::after {
    width: 100%;
}

 .blog-card__desc {
     font-size: clamp(13px, 1vw, 15px);
     font-weight: 400;
     line-height: 1.65;
     color: rgba(255, 255, 255, 0.90);
     overflow: hidden;
     max-height: 0;
     opacity: 0;
     margin-top: 0;
     transition: max-height 0.44s ease, opacity 0.35s ease 0.08s, margin-top 0.3s ease;
 }

 .blog-card:hover .blog-card__desc,
 .blog-card--dark .blog-card__desc {
     max-height: 140px;
     opacity: 1;
     margin-top: 12px;
 }

 .blog-card--dark .blog-card__desc {
     margin-top: 14px;
 }

 .blog-card__more {
     display: inline-block;
     margin-top: 14px;
     font-size: 12px;
     font-weight: 700;
     letter-spacing: 0.7px;
     text-transform: uppercase;
     color: var(--orange);
     border-bottom: 2px solid var(--orange);
     padding-bottom: 1px;
     opacity: 0;
     transform: translateY(5px);
     transition: opacity 0.26s ease 0.18s, transform 0.26s ease 0.18s;
 }

 .blog-card:hover .blog-card__more {
     opacity: 1;
     transform: translateY(0);
 }

 /* ════════════════════════════════════════════
       SCROLLBAR AREA  (from provided snippet)
    ════════════════════════════════════════════ */
 .awardsScrollbarArea {
     padding: 42px 80px 0;
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 16px;
 }

 /* Nav buttons — hidden desktop, shown mobile */
 .awardsNavBtn {
     display: none;
     align-items: center;
     justify-content: center;
     width: 40px;
     height: 40px;
     flex-shrink: 0;
     border-radius: 50%;
     border: 1.5px solid var(--border);
     background: var(--white);
     cursor: pointer;
     color: var(--text);
     transition: border-color 0.2s, background 0.2s, opacity 0.2s;
 }

 .awardsNavBtn:hover {
     border-color: var(--orange);
     background: var(--orange-light);
 }

 .awardsNavBtn:disabled {
     opacity: 0.28;
     cursor: default;
     pointer-events: none;
 }

 .awardsNavBtn svg {
     width: 16px;
     height: 16px;
     stroke: currentColor;
     stroke-width: 2;
     fill: none;
     stroke-linecap: round;
     stroke-linejoin: round;
 }

 .awardsScrollTrack {
     flex: 1;
     max-width: 480px;
     height: 17px;
     background: #ebebeb;
     border-radius: 999px;
     position: relative;
     cursor: pointer;
 }

 .awardsScrollThumb {
     position: absolute;
     top: 3px;
     left: 0;
     height: 10px;
     background: var(--orange);
     border-radius: 999px;
     cursor: grab;
     user-select: none;
     min-width: 26px;
     transition: opacity 0.2s;
 }

 .awardsScrollThumb:hover {
     opacity: 0.85;
 }

 .awardsScrollThumb:active {
     cursor: grabbing;
 }

 /* Blog css end here  */

 /* ══════════════════════════════
       RESPONSIVE
    ══════════════════════════════ */

 @media (max-width: 1440px) {
     .awardsHeader {
         padding-left: 115px;
     }

     .blogs-heading {
         padding-left: 115px;
     }

     .blogsWrap {
         margin-left: 115px;
     }

     .hero-content {
         padding: 0 clamp(20px, 6vw, 63px);
     }

     .uniqueWorkSection {
         max-width: 90%;
         margin: 0 auto;
     }

     .blogs-section .uniqueWorkDesc {
         margin-bottom: 60px;
         padding-left: 120px;
     }

     /* .uniqueCard img{object-fit: cover;} */
 }

 @media (max-width: 1280px) {
     .uniqueWorkSection.sectionPadding {
         max-width: 88%;
     }

     .controls {
         margin-top: 80px;
     }

     .awardsScrollbarArea {
         padding-left: 56px;
         padding-right: 56px;
     }

     .awardsHeader {
         padding-bottom: 20px;
     }

     .awardsTrackWrap {
         max-width: 90.5%;
     }



     .partnersSection {
         padding: 71px 0 120px;
     }
 }

 @media (max-width: 1024px) {
     .blogs-heading {
         padding-left: 100px;
     }

     .blogsWrap {
         margin-left: 100px;
     }

     .awardsScrollbarArea {
         padding-left: 40px;
         padding-right: 40px;
     }

     .blog-card {
         height: 290px;
     }

     .awardsHeader {
         padding-left: 97px;
     }

     .blogs-section .uniqueWorkDesc {
         margin-bottom: 60px;
         padding-left: 104px;
     }

     .blog-card__title {
         font-size: 24px;
     }

     .controls {
         margin-top: 0px;
     }

     .carousel-outer {
         height: 40px;
     }
 }

 @media (max-width: 992px) {
     .awardsSection .awardsHeader {
         flex-direction: column;
         align-items: center;
         padding: 0;
         max-width: 80%;
         margin: auto;
         margin-bottom: auto;
         margin-bottom: 30px;
     }
     .uniqueWorkDesc {
        font-size: 16px !important;
        line-height: 22px !important; 
     }
     header{background: #d4d4d496;}

     .awardsHeader .uniqueWorkDesc {
         text-align: center;
     }

     .blogs-section .uniqueWorkDesc {
         text-align: left;
         padding-left: 0;
         margin: auto;
         margin-bottom: auto;
         margin-bottom: auto;
         margin-bottom: 57px;
         max-width: 84%;
     }

     nav {

         display: none !important;
     }

     .btn-connect.desktop-only {
         display: none !important;
     }

     .hamburger {
         display: flex !important;
     }

     /* .mobile-drawer {
         display: flex;
     } */

     header {
         grid-template-columns: auto auto;
         justify-content: space-between;
     }

     .hero-tagline {
         font-size: 28px;
     }

     .hero-content {
         margin-left: 24px;
     }

     #mission-section {
         padding-bottom: 22px !important;
     }

     /* Our Work css start */
     .uniqueWorkTitle {
         font-size: 36px;
     }

     .uniqueWorkGrid {
         display: grid;
         grid-template-columns: 1fr 1fr;
         grid-template-rows: 260px 200px 200px;
         gap: 14px;
     }

     /* FULL WIDTH TOP */
     .cardA {
         grid-column: 1/3;
         grid-row: 1/2;
     }

     /* SECOND ROW */
     .cardB {
         grid-column: 1/2;
         grid-row: 2/3;
     }

     .cardC {
         grid-column: 2/3;
         grid-row: 2/3;
     }

     /* THIRD ROW */
     .cardD {
         grid-column: 1/2;
         grid-row: 3/4;
     }

     .cardE {
         grid-column: 2/3;
         grid-row: 3/4;
     }


     .uniqueCardTitle {
         font-size: 17px;
     }

     .uniqueWorkSection.sectionPadding {
         padding-top: 100px;
     }

     /* Our Work css end */

     /* Marque section start */
     .marquee.sectionPadding {
         padding-top: 50px;
         padding-bottom: 0;
     }

     /* Marque section end */

     /* Testimoneal slider start */
     /* Hide desktop wrap, show mobile wrap */
     .arcSliderWrap {
         display: none !important;
     }

     .mob-wrap {
         display: flex;
         flex-direction: column;
         width: 90%;
         margin: 0 auto;
         overflow: hidden;
         padding: 80px 0px;
         padding-bottom: 30px;
     }

     .blogs-section {
         padding-top: 50px;
     }

     .partnersSection {
         padding-bottom: 50px;
     }

     .clients-section {
         padding-bottom: 50px;
     }

     .carousel-outer {
         height: 41px !important;
     }

     .partnerLogo img {
         height: 80px !important;
     }

     .arcQuoteTop {
         line-height: 20px;
     }

     .arcQuoteBottom {
         line-height: 30px;
     }

     .arcBottom {
         color: #000;
         position: absolute;
         bottom: 24px;
     }

     .arcContent {
         left: 0;
     }

     .arcBadge {
         height: 40px;
     }



     /* ── Slider area ── */
     .mob-slider-area {
         flex: 1;
         display: flex;
         align-items: center;
         overflow: hidden;
         min-height: 0;
         padding: 20px;
     }

     .arcText {
         padding: 20px;
     }

     .mob-slider-area .arcSlider {
         width: 100%;
         height: auto;
         position: static;
     }

     .mob-slider-area .arcSlider .slick-list {
         overflow: visible !important;
         padding: 30px 0 !important;
     }

     .mob-slider-area .arcSlider .slick-track {
         display: flex !important;
         align-items: center !important;
     }

     .mob-slider-area .arcSlider .slick-slide {
         display: flex !important;
         justify-content: center;
         /* align-items: center; */
         padding: 0px;
         opacity: 0.45;
         transform: scale(0.86);
         transition: transform 0.45s cubic-bezier(0.34, 1.1, 0.64, 1),
             opacity 0.45s ease;
     }

     .mob-slider-area .arcSlider .slick-current {
         opacity: 1 !important;
         transform: scale(1) !important;
     }

     .mob-slider-area .arcSlider .slick-slide>div {
         display: flex;
         justify-content: center;
         flex-direction: column;
         padding: 0px 20px;
     }

     /* ── CARD: exact desktop 305×390, reset GSAP ── */
     .mob-slider-area .arcSlider .slick-slide .arcCard {
         position: relative !important;
         top: auto !important;
         left: auto !important;
         transform: none !important;
         -webkit-transform: none !important;
         opacity: 1 !important;
         width: 305px !important;
         height: 390px !important;
         border-radius: 16px !important;
         box-shadow: 0 20px 40px rgba(0, 0, 0, 0.18) !important;
         margin: 0 !important;
         flex-shrink: 0;
     }

     /* Active card: richer shadow */
     .mob-slider-area .arcSlider .slick-current .arcCard {
         box-shadow: 0 28px 56px rgba(0, 0, 0, 0.24), 0 4px 16px rgba(210, 107, 45, 0.18) !important;
     }

     /* ── Footer bar ── */
     .mob-footer {
         flex-shrink: 0;
         padding: 0 28px 36px;
         display: flex;
         flex-direction: column;
         gap: 14px;
     }

     /* Progress bar */
     .mob-progress-track {
         width: 100%;
         height: 2px;
         background: rgba(0, 0, 0, 0.1);
         border-radius: 2px;
         overflow: hidden;
     }

     .mob-progress-fill {
         height: 100%;
         background: #d26b2d;
         border-radius: 2px;
         width: calc(100% / 6);
         transition: width 0.42s cubic-bezier(0.25, 0.46, 0.45, 0.94);
     }

     /* Counter + nav row */
     .mob-nav-row {
         display: flex;
         align-items: center;
         justify-content: space-between;
     }

     .mob-count-label {
         font-size: 12px;
         font-weight: 500;
         color: rgba(0, 0, 0, 0.35);
         letter-spacing: 0.5px;
     }

     .mob-count-label strong {
         color: #1a1209;
         font-weight: 600;
     }

     /* Prev / Next buttons */
     .mob-nav-btns {
         display: flex;
         gap: 10px;
     }

     .mob-btn {
         width: 42px;
         height: 42px;
         border-radius: 50%;
         border: 1.5px solid rgba(0, 0, 0, 0.15);
         background: #fff;
         display: flex;
         align-items: center;
         justify-content: center;
         cursor: pointer;
         transition: background 0.2s, border-color 0.2s, box-shadow 0.2s;
     }

     .mob-btn:active {
         background: #d26b2d;
         border-color: #d26b2d;
         box-shadow: 0 4px 12px rgba(210, 107, 45, 0.35);
     }

     .mob-btn:active svg {
         stroke: #fff;
     }

     .mob-btn svg {
         stroke: #1a1209;
         transition: stroke 0.2s;
     }

     /* Dot strip (hidden — we use progress bar instead) */
     .slick-dots {
         display: none !important;
     }

     .slick-prev,
     .slick-next {
         display: none !important;
     }

     .after-reveal h2 {
         font-size: 40px;
     }

     /* Testimoneal slider end */

     /* Our client start */
     .clients-title {
         font-size: 40px;
     }

     /* Our client end */



     /* Award css start here  */

     .awardsInner {
         margin: 0 auto;
     }

     .awardsTrackWrap {
         padding-left: unset !important;
     }

     .awardsSection {
         padding: 48px 0 56px;
     }

     .awardsHeader {
         padding: 0 20px 28px;
         flex-direction: column;
         align-items: center;
         gap: 4px;
         padding-left: 0px;
     }

     .awardsTitle {
         font-size: 32px;
     }

     .awardsTrackWrap {
         padding-left: 20px;
     }

     :root {
         /* exactly 2 cards visible: (90vw - 20px left-pad - 16px gap) / 2 */
         --card-w: calc((90vw - 56px) / 2);
         --card-h: 290px;
     }

     .awardImgWrap img {
         height: 140px;
     }

     .awardCardInner {
         padding: 28px 16px 18px;
         border-radius: 16px;
     }

     .awardName {
         font-size: 12px;
     }

     .awardCard:not(.expanded) .awardCardInner {
         cursor: pointer;
     }

     /* Hide desktop-only expand UI */
     .awardHoverBtn {
         display: none !important;
         pointer-events: none !important;
     }

     .awardExpandedContent {
         display: none !important;
     }

     .awardCloseBtn {
         display: none !important;
     }

     .awardCard:not(.expanded) .awardCardInner:hover .awardName,
     .awardCard:not(.expanded) .awardCardInner:hover .awardDivider {
         opacity: 1 !important;
     }

     /* Force collapsed */
     .awardCard,
     .awardCard.expanded {
         width: var(--card-w) !important;
         height: var(--card-h) !important;
     }

     .awardCard.expanded .awardCardInner {
         flex-direction: column !important;
         align-items: center !important;
         padding: 28px 16px 18px !important;
         cursor: pointer !important;
     }

     .awardCard.expanded .awardImgWrap {
         width: 100% !important;
         flex: 1 !important;
         padding: 0 !important;
         border-right: none !important;
         background: transparent !important;
     }

     .awardCard.expanded .awardCollapsedBottom {
         display: block !important;
     }

     .awardCard .awardName,
     .awardCard .awardDivider {
         opacity: 1 !important;
     }

     .awardCard {
         pointer-events: none !important;
     }

     /* ── Show scrollbar area on mobile ── */
     .awardsScrollbarArea {
         padding: 24px 20px 0;
         gap: 12px;
         /* already flex; just adjust padding */
     }

     /* ── Show prev/next buttons on mobile ── */
     .awardsNavBtn {
         display: flex;
     }

     /* Tap ripple */
     .awardCardInner::after {
         content: '';
         position: absolute;
         inset: 0;
         border-radius: 16px;
         background: rgba(232, 101, 10, 0);
         transition: background 0.3s ease;
         pointer-events: none;
     }

     .awardCardInner:active::after {
         background: rgba(232, 101, 10, 0.06);
     }

     /* Award css end here  */

     /* Blog css start here */
     .blogs-heading {
         padding-left: 24px;
         text-align: center !important;
     }

     .blogsWrap {
         margin-left: 72px;
     }

     .blog-card__desc {
         line-height: 1;
     }

     .awardsScrollbarArea {
         padding-left: 24px;
         padding-right: 24px;
     }

     .blog-card {
         height: 260px;
     }

     .blog-card__logo {
         width: 99px;
         height: 85px;
         border-radius: 11px;
     }

     /* show nav buttons on mobile */
     .awardsNavBtn {
         display: flex;
     }

     .awardsScrollTrack {
         display: none;
     }

     .blog-card__title {
         font-size: 18px;
     }

     /* Blog css end here */

     .header-wrap{top: 0;padding: 0;}
     #mainHeader{max-width: 100%;  border-radius: 0;}

     .mobile-drawer {
    display: none;
    position: fixed;
    top: 52px;
    left: 0;
    right: 0;
    background: rgba(180, 180, 180, 0.28);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 0;
    padding: 20px 24px 24px;
    flex-direction: column;
    gap: 16px;
    z-index: 499;
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity 0.25s, transform 0.25s;
}
   
     
 }

 .uniqueWorkSliderMobile {
     display: none;
 }

 @media (max-width: 620px) {
     .hero-tagline br{display: none;}

     .blogs-section .uniqueWorkDesc {
         text-align: left;
         padding-left: 0;
         margin: auto;
         margin-bottom: auto;
         margin-bottom: auto;
         margin-bottom: auto;
         margin-bottom: 57px;
         max-width: 88%;
     }

     .ow-section-wrapper {
         margin-top: 20px !important;
     }

     .uniqueWorkSlider {
         display: none;
         /* hide desktop grid slider */
     }

     .uniqueWorkSliderMobile {
         display: block;
         margin-top: 24px;
     }

     .uniqueCard img {
         object-fit: contain;
         height: unset;
     }

     .uniqueCard {
         /* height: 260px; */
         border-radius: 14px;
         overflow: hidden;
     }

     .uniqueCard img {
         filter: unset;
     }

     .header-wrap {
         /* top: 10px; */
         /* padding: 0 10px; */
     }

     .hero-content {
         padding-left: 0px;
         margin-left: 25px;
     }

     header {
         padding: 10px;
         max-width: 100%;
     }

     .logo-link img {
         height: 30px;
         margin-left: 10px;
     }

     .btn-connect {
         padding: 10px 20px !important;
     }

     .hero-tagline {
         font-size: 20px;
         line-height: 1;
     }

     /* Our Work css start */

     .uniqueWorkSection.sectionPadding {
         max-width: 100%;
         /* padding-right: 0; */
         padding-top: 60px;
     }

     .uniqueWorkSection {
         padding: 80px 0px;
         max-width: 95%;
         margin-right: 0;
     }

     .uniqueWorkTitle {
         font-size: 26px;
         margin-bottom: 16px;
     }

    

     .uniqueWorkGrid {
         display: flex !important;
         flex-direction: row;
         overflow-x: auto;
         scroll-snap-type: x mandatory;
         gap: 12px;
         padding-bottom: 4px;
         scrollbar-width: none;
         -ms-overflow-style: none;
     }

     .uniqueWorkGrid::-webkit-scrollbar {
         display: none;
     }

     .rightTopGroup {
         display: contents;
     }

     .uniqueCard {
         flex: 0 0 78vw !important;
         /* height: 220px !important; */
         scroll-snap-align: start;
         grid-column: unset !important;
         grid-row: unset !important;
     }

     .uniqueCardTitle {
         font-size: 15px;
     }

     .uniqueCardSub {
         font-size: 12px;
     }

     .cardE,
     .cardF {
         height: unset;
     }

     .after-reveal h2 {
         font-size: 30px;
     }

     /* Our Work css end */

     /* our testimoneal start */
     .mob-wrap {
         padding-top: 0;
     }

     /* our testimoneal end */


     /* Our client start */

     .logo-lbl {
         white-space: normal;
         word-break: keep-all;
     }

     .bubble-wrap {
         margin-bottom: 150px;
     }

     .clients-section {
         padding-top: 60px;
         padding-bottom: 60px;
     }

     .speech-bubble {
         max-width: 240px;
     }

     .bubble-heading {
         font-size: 12px;
     }

     .clients-title {
         margin-bottom: 54px;
     }

     /* Our client end */

     /* Our Partner css start */
     .partnersSection {
         padding: 80px 0;
     }

     .partnersTitle {
         font-size: 26px;
         margin-bottom: 70px;
         padding: 0 24px;
         opacity: 1;
         transform: none;
     }

     .partnersLogos {
         display: grid;
         grid-template-columns: 1fr 1fr;
         gap: 80px 60px;
         padding: 0 40px;
     }

     .partnerLogo {
         justify-content: center;
         filter: unset;
         opacity: 1;
     }

     .partnerLogo img {
         height: 88px;
     }

     .partnersDots {
         display: none;
     }

     /* Our Partner css end */

     /* marque css start */
     .marquee.sectionPadding {
         padding-top: 0px;
         padding-bottom: 60px;
     }

     .marquee span {
         font-size: 60px;
     }

     .btn-hero {
         padding: 11px 36px;
         font-size: 16px;
     }

     #scrollThumb,
#scrollTrack {
    touch-action: none;
}


     /* marque css end */

     /* Arads css start */
     .awardsHeader {
         align-items: center;
     }

     :root {
         /* exactly 1 card: 90vw - 20px left-pad - 20px right breathing room */
         --card-w: calc(90vw - 40px);
         --card-h: 300px;
     }

     .awardsNavBtn {
         width: 36px;
         height: 36px;
     }

     /* Arads css end */

     /* Blog css start here */
     .blogs-heading {
         padding-left: 16px;
     }

     .blogsWrap {
         margin-left: 28px;
     }

     .awardsScrollbarArea {
         padding-left: 16px;
         padding-right: 16px;
     }

     .blog-card {
         height: 240px;
     }

     .blogs-heading {
         text-align: center !important;
         padding-left: 0;
     }

     .blog-card__logo {
         width: 91px;
         height: 47px;
         border-radius: 11px;
     }

     /* Blog css end here */
 }

 @media (min-width: 601px) and (max-width: 900px) {
     .partnersTitle {
         font-size: 36px;
         margin-bottom: 48px;
     }

     .partnersLogos {
         gap: 80px;
     }

     .partnerLogo img {
         height: 100px;
     }

     .partnersDots {
         right: 16px;
     }
 }


 /* Orange slice css start  */
 :root {
     --orange: #FF8C00;
     --orange-dark: #C96A00;
     --text-dark: #1a1a1a;
     --text-mid: #5a5a5a;
     --bg: #F0EFEA;
 }

 body {
     background: var(--bg);
     overflow-x: hidden;
 }

 /* ─── HEADER ─── */
 .ow-header {
     text-align: center;
     padding: 80px 24px 56px;
     max-width: 600px;
     margin: 0 auto;
     background: #fff;
 }

 .ow-header-eyebrow {
     font-size: 11px;
     font-weight: 500;
     letter-spacing: 0.16em;
     text-transform: uppercase;
     color: var(--orange);
     margin-bottom: 14px;
 }

 .ow-header h1 {
     font-family: 'Playfair Display', serif;
     font-size: clamp(26px, 4vw, 48px);
     font-weight: 600;
     color: var(--text-dark);
     line-height: 1.15;
     margin-bottom: 14px;
 }

 .ow-header p {
     font-size: 15px;
     color: var(--text-mid);
     line-height: 1.8;
     font-weight: 300;
 }

 /* ═══════════════════════════════════════════════
     DESKTOP STICKY SCROLL
     The wrapper provides the scroll distance.
     The inner .ow-section is position:sticky.
  ═══════════════════════════════════════════════ */
 .ow-section-wrapper {
     background: #fff;
     position: relative;
     margin-top: 140px;
     /* height set by JS: N * 100vh */
 }

 .ow-section-wrapper .uniqueWorkTitle {
     text-align: center !important;
     margin-bottom: 0;
     max-width: 80%;
     margin: 0 auto
 }

 .ow-section {
     position: sticky;
     top: 0;
     height: 100vh;
     display: flex;
     align-items: stretch;
     padding: 0 40px;
     gap: 36px;
     max-width: 90%;
     margin: 0 auto;
     overflow: hidden;
 }

 /* ── LEFT ── */
 .ow-left-col {
     width: 45%;
     display: flex;
     flex-direction: column;
     justify-content: center;
     padding: 24px 0;
 }

 .ow-cards-outer {
     background: #fff;
     border-radius: 28px;
     padding: 30px 30px;
     box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04), 0 8px 28px rgba(0, 0, 0, 0.08);
     height: 620px;
     position: relative;
     overflow: hidden;
 }

 .ow-cards-outer::before,
 .ow-cards-outer::after {
     content: '';
     position: absolute;
     left: 0;
     right: 0;
     height: 52px;
     pointer-events: none;
     z-index: 10;
 }

 .ow-cards-outer::before {
     top: 0;
     background: linear-gradient(to bottom, rgba(255, 255, 255, .95), transparent);
     border-radius: 28px 28px 0 0;
 }

 .ow-cards-outer::after {
     bottom: 0;
     background: linear-gradient(to top, rgba(255, 255, 255, .95), transparent);
     border-radius: 0 0 28px 28px;
 }

 .ow-slider-track {
     display: flex;
     flex-direction: column;
     transition: transform 0.52s cubic-bezier(0.4, 0, 0.2, 1);
     will-change: transform;
 }

 .ow-card {
     background: #fff;
     border-radius: 18px;
     padding: 28px 32px 30px;
     margin-bottom: 8px;
     cursor: pointer;
     flex-shrink: 0;
     opacity: 0.38;
     transform: translateY(3px);
     transition: opacity .4s ease, box-shadow .4s ease, transform .35s ease;
 }

 .ow-card:last-child {
     margin-bottom: 0;
 }

 .ow-card.active {
     opacity: 1;
     transform: translateY(0);
     box-shadow: 0 0 0 1px rgba(255, 140, 0, .15),
         0 4px 16px rgba(255, 140, 0, .20),
         0 12px 40px rgba(255, 140, 0, .15);
 }

 .ow-card:hover:not(.active) {
     opacity: 0.6;
 }

 .ow-card-header {
     display: flex;
     align-items: center;
     gap: 16px;
 }

 .ow-card-num {
     font-size: 58px;
     font-weight: 600;
     line-height: 1;
     letter-spacing: -2px;
     flex-shrink: 0;
     color: #dfc090;
     transition: color .4s ease;
     letter-spacing: 4px;
 }

 .ow-card.active .ow-card-num {
     color: var(--orange);
     letter-spacing: 4px;
 }

 .ow-card-title {
     font-size: 26px;
     font-weight: 400;
     color: #aaa;
     line-height: 1.25;
     transition: color .4s ease;
 }

 .ow-card.active .ow-card-title {
     color: var(--text-dark);
 }

 .ow-card-body {
     font-size: 20px;
     color: #000;
     line-height: 1.4;
     font-weight: 300;
     margin-bottom: 32px;
     overflow: hidden;
     max-height: 0;
     opacity: 0;
     margin-top: 0;
     transition: max-height .5s ease, opacity .45s ease, margin-top .4s ease;
 }

 .ow-card.active .ow-card-body {
     max-height: 150px;
     opacity: 1;
     margin-top: 20px;
 }

 .ow-card-callout {
     display: flex;
     align-items: center;
     gap: 12px;
     background: var(--orange);
     border-radius: 14px;
     padding: 14px 18px;
     overflow: hidden;
     max-height: 0;
     opacity: 0;
     margin-top: 0;
     transition: max-height .5s ease .06s, opacity .45s ease .06s, margin-top .4s ease;
     text-decoration: none;
 }

 .ow-card.active .ow-card-callout {
     max-height: 110px;
     opacity: 1;
     margin-top: 16px;
 }

 .ow-card-callout-icon {
     font-size: 32px;
     flex-shrink: 0;
     line-height: 1.4;
 }

 .ow-card-callout-text {
     font-size: 18px;
     color: #fff;
     line-height: 1.6;
     font-weight: 400;
 }

 .ow-desktop-nav {
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 7px;
     margin-top: 14px;
 }

 .ow-dot {
     width: 6px;
     height: 6px;
     border-radius: 50%;
     background: #ddceb5;
     cursor: pointer;
     flex-shrink: 0;
     transition: background .3s, width .3s, border-radius .3s;
 }

 .ow-dot.active {
     background: var(--orange);
     width: 20px;
     border-radius: 4px;
 }

 .ow-progress-bar {
     position: absolute;
     top: 0;
     left: 0;
     height: 3px;
     background: var(--orange);
     width: 0%;
     transition: width .4s ease;
     z-index: 20;
     border-radius: 0 2px 2px 0;
 }

 /* ── RIGHT ── */
 .ow-right {
     width: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     flex-direction: column;
     position: relative;
     overflow: hidden;
     background: #fff;
 }

 .ow-stage {
     position: relative;
     width: 560px;
     height: 560px;
     z-index: 2;
     background: #fff;
 }

 .ow-slice {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     backface-visibility: hidden;
     transition: transform .45s cubic-bezier(.25, .8, .25, 1);
     will-change: transform;
     cursor: pointer;
 }

 .ow-slice img {
     width: 100%;
     height: 100%;
     display: block;
     object-fit: contain;
     pointer-events: none;
     user-select: none;
 }

 .ow-label {
     position: absolute;
     bottom: calc(50% - 190px);
     left: 50%;
     transform: translateX(-50%);
     font-size: 11px;
     color: var(--orange-dark);
     font-weight: 500;
     letter-spacing: 0.1em;
     text-transform: uppercase;
     white-space: nowrap;
     opacity: 0;
     transition: opacity .4s ease;
     z-index: 10;
     background: rgba(255, 248, 225, .9);
     backdrop-filter: blur(4px);
     padding: 4px 14px;
     border-radius: 40px;
     pointer-events: none;
 }

 .ow-label.visible {
     opacity: 1;
 }

 .ow-scroll-cue {
     position: absolute;
     bottom: 18px;
     left: 50%;
     transform: translateX(-50%);
     display: flex;
     flex-direction: column;
     align-items: center;
     gap: 2px;
     opacity: 0;
     transition: opacity .4s ease;
     pointer-events: none;
     z-index: 20;
 }

 .ow-scroll-cue.show {
     opacity: 1;
 }

 .ow-scroll-cue span {
     font-size: 10px;
     color: var(--orange);
     letter-spacing: 0.1em;
     text-transform: uppercase;
     font-weight: 500;
 }

 .ow-chevron {
     width: 18px;
     height: 18px;
     border-right: 2px solid var(--orange);
     border-bottom: 2px solid var(--orange);
     transform: rotate(45deg);
     animation: bounce 1.2s ease-in-out infinite;
 }

 @keyframes bounce {

     0%,
     100% {
         transform: rotate(45deg) translateY(0);
     }

     50% {
         transform: rotate(45deg) translateY(4px);
     }
 }

 #seeAllBtn {
     display: none;
 }

 @media (max-width:1440px) {
     .ow-stage {
         width: 460px;
     }

     .partnerLogo img {
         height: 110px;
     }
 }

 @media (max-width:900px) {
     .ow-right {
         display: none;
     }

     .mobileModal.open .mobileModalBackdrop {
         display: none;
     }

     .mobileModal.open .mobileModalSheet {
         display: none;
     }

     .mobileModal.open {
         display: none;
     }
 }

 /* ── FOOTER ── */
 .ow-footer {
     text-align: center;
     padding: 80px 24px;
     background: linear-gradient(to bottom, #fff8ee, #fff);
 }

 .ow-footer p {
     font-size: 14px;
     color: var(--text-mid);
     font-weight: 300;
     margin-bottom: 22px;
 }

 .ow-footer a {
     display: inline-block;
     background: var(--orange);
     color: #fff;
     font-size: 14px;
     font-weight: 500;
     padding: 13px 36px;
     border-radius: 100px;
     text-decoration: none;
     letter-spacing: 0.04em;
     transition: background .2s, transform .15s;
 }

 .ow-footer a:hover {
     background: var(--orange-dark);
     transform: scale(1.03);
 }

 /* ── Mobile nav controls (hidden on desktop) ── */
 .ow-mobile-nav {
     display: none;
 }

 .ow-mob-arrow {
     width: 38px;
     height: 38px;
     border-radius: 50%;
     border: 1.5px solid #e0d5c5;
     background: #fff;
     cursor: pointer;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 15px;
     color: var(--text-mid);
     transition: border-color .2s, color .2s, background .2s;
     user-select: none;
     flex-shrink: 0;
     -webkit-tap-highlight-color: transparent;
 }

 .ow-mob-arrow:active {
     background: #fff4e6;
     border-color: var(--orange);
     color: var(--orange);
 }

 .ow-mob-arrow.disabled {
     opacity: 0.3;
     pointer-events: none;
 }

 .ow-mob-counter {
     font-size: 12px;
     color: var(--text-mid);
     letter-spacing: .05em;
 }

 .ow-mob-counter b {
     color: var(--orange);
     font-weight: 600;
 }

 @media (max-width: 1440px) {
     .ow-section {
         max-width: 90%;
         margin: 0 auto;
     }
      .ow-card-body {
     font-size: 18px;
     line-height: 24px;
 }
 }

 /* ═══ MOBILE / TABLET ≤ 900px ═══ */
 @media (max-width: 900px) {

     /* On mobile, NO sticky scroll — simple stacked layout */
     .ow-section-wrapper {
         height: auto !important;
         /* override JS-set height */
         margin-top: 80px;
     }

     .ow-section {
         position: relative !important;
         /* override sticky */
         height: auto !important;
         flex-direction: column;
         padding: 0 0px 56px;
         gap: 0;
         overflow: visible;
         max-width: 90%;
         margin: 0 auto;
     }

     .ow-left-col {
         width: 100%;
     }

     /* Image stage — top, compact */
     .ow-right {
         width: 100%;
         height: 52vw;
         min-height: 200px;
         max-height: 300px;
         order: -1;
         /* show image above cards */
     }

     .ow-stage {
         width: 180px;
         height: 180px;
     }

     .ow-label {
         bottom: calc(50% - 105px);
         font-size: 10px;
     }

     /* Cards panel */
     .ow-left-col {
         width: 100%;
         padding: 14px 0 0;
     }

     /* Fixed height card container with only active card fully visible */
     .ow-cards-outer {
         height: auto;
         min-height: 200px;
         border-radius: 22px;
         padding: 12px;
         overflow: hidden;
    
     }

     /* On mobile: ALL cards hidden except active — no scrolling track */
     .ow-slider-track {
         transform: none !important;
         /* disable track scroll on mobile */
     }

     .ow-card {
         display: none;
         /* hide all by default on mobile */
         padding: 18px 18px 20px;
         border-radius: 14px;
         margin-bottom: 0;
         opacity: 1 !important;
         transform: none !important;
         
     }

     .ow-card.active {
         display: block;
         /* only show active */
         box-shadow: 0 0 0 1px rgba(255, 140, 0, .15),
             0 4px 16px rgba(255, 140, 0, .20),
             0 12px 40px rgba(255, 140, 0, .15);
     }

     .ow-card.active .ow-card-body {
         max-height: 200px;
         opacity: 1;
         margin-top: 16px;
     }

     .ow-card.active .ow-card-callout {
         max-height: 120px;
         opacity: 1;
         margin-top: 14px;
     }

     .ow-card-num {
         font-size: 44px;
     }

     .ow-card-title {
         font-size: 18px;
     }

     .ow-card-body {
         font-size: 13.5px;
     }

     .ow-card-callout {
         padding: 11px 13px;
     }

     .ow-card-callout-text {
         font-size: 12.5px;
     }

     /* Hide desktop-only elements */
     .ow-desktop-nav {
         display: none;
     }

     .ow-scroll-cue {
         display: none;
     }

     .ow-progress-bar {
         display: none;
     }

     /* Show mobile nav */
     .ow-mobile-nav {
         display: flex;
         align-items: center;
         justify-content: space-between;
         margin-top: 56px;
         padding: 0 4px;
         gap: 8px;
     }

     .ow-mob-dots-wrap {
         display: flex;
         gap: 6px;
         align-items: center;
         flex: 1;
         justify-content: center;
         flex-wrap: wrap;
     }
 }

 @media (max-width: 480px) {
     .ow-header {
         padding: 44px 16px 28px;
     }

     .ow-header h1 {
         font-size: 22px;
     }

     .ow-right {
         height: 58vw;
         max-height: 240px;
     }

     .ow-stage {
         width: 155px;
         height: 155px;
     }

     .ow-label {
         bottom: calc(50% - 92px);
     }

     .ow-card-num {
         font-size: 38px;
     }

     .ow-card-title {
         font-size: 16px;
     }
 }

 /* Orange slice css end  */


 #blogsWrap {
     touch-action: pan-y;
 }

 .uniqueTimer {
     position: relative;
     width: 50px;
     height: 50px;
 }

 .uniqueTimer svg {
     width: 100%;
     height: 100%;
     transform: rotate(-90deg);
 }

 /* Center button */
 .refreshBtn {
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     background: transparent;
     border: none;
     cursor: pointer;
     font-size: 22px;
     color: #000;
     height: unset;
 }

 /* fotter css start here  */

 /* Main Content Area */
 main {
     flex: 1;
     padding: 60px 20px;
     background: #F0F0F0;
     display: flex;
     align-items: center;
     justify-content: center;
 }

 .main-content {
     max-width: 600px;
     text-align: center;
 }

 .main-content h1 {
     font-size: 2.5rem;
     margin-bottom: 20px;
     color: #222;
     font-weight: 700;
 }

 .main-content p {
     font-size: 1.1rem;
     color: #666;
     line-height: 1.6;
     margin-bottom: 30px;
 }

 /* ============ FOOTER STYLES ============ */
 footer {
     padding: 60px 20px 40px;
     background: #F0F0F0;
     margin-top: auto;
 }

 .footer-wrapper {
     max-width: 87%;
     margin: 0 auto;
 }

 /* Footer Content Grid */
 .footer-grid {
     display: grid;
     grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
     gap: 40px;
     margin-bottom: 40px;
 }

 /* Logo Section */
 .footer-logo-col {
     display: flex;
     flex-direction: column;
     gap: 25px;
 }

 .logo {
     display: flex;
     flex-direction: column;
     gap: 0;
     line-height: 1;
 }

 .logo-text {
     font-size: 24px;
     font-weight: 900;
     width: 50%;
     letter-spacing: -1px;
 }

 .logo-text img {
     width: 90%;
 }



 .company-address {
     font-size: 18px;
     color: #333333;
     line-height: 1.3;
     font-weight: 300;
 }

 .company-address strong {
     color: #132976;
     display: block;
     margin-bottom: 8px;
     font-weight: 300;
     font-size: 20px;
 }

 /* Social Icons */
 .social-links {
     display: flex;
     gap: 12px;
     margin-top: 5px;
     justify-self: start !important;
 }

 .social-btn {
     width: 42px;
     height: 42px;
     background-color: #222;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     color: #fff;
     text-decoration: none;
     font-weight: 700;
     font-size: 16px;
     border: none;
     cursor: pointer;
     transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
     position: relative;
     overflow: hidden;
     padding: 0;
 }

 .social-btn svg {
     width: 20px;
     height: 20px;
     fill: currentColor;
     transition: transform 0.3s ease;
 }

 .social-btn:hover {
     background-color: #ff9500;
     transform: translateY(-4px);
     box-shadow: 0 8px 16px rgba(255, 149, 0, 0.3);
 }

 .social-btn:hover svg {
     transform: scale(1.1);
 }

 .social-btn::before {
     content: '';
     position: absolute;
     top: 50%;
     left: 50%;
     width: 0;
     height: 0;
     border-radius: 50%;
     background-color: rgba(255, 255, 255, 0.2);
     transform: translate(-50%, -50%);
     transition: width 0.5s, height 0.5s;
 }

 .social-btn:active::before {
     width: 100px;
     height: 100px;
 }

 /* Footer Columns */
 .footer-col {
     display: flex;
     flex-direction: column;
     gap: 20px;
 }

 .footer-col h3 {
     font-size: 25px;
     font-weight: 300;
     color: #132976;
     text-transform: capitalize;
     letter-spacing: 0.5px;
 }

 .footer-col ul {
     list-style: none;
     display: flex;
     flex-direction: column;
     gap: 12px;
 }

 .footer-col ul li a {
     font-size: 18px;
     color: #000000;
     text-decoration: none;
     transition: color 0.3s ease;
     font-weight: 400;
     position: relative;
     display: inline-block;
     margin-bottom: 12px;
 }



 .footer-col ul li a:hover {
     color: #ff9500;
 }

 .footer-col ul li a:hover::after {
     width: 100%;
 }

 /* Footer Bottom */
 .footer-bottom {
     display: flex;
     justify-content: space-between;
     align-items: center;
     padding-top: 30px;
     border-top: 1px solid #ddd;
     flex-wrap: wrap;
     gap: 30px;
 }

 .copyright-text {
     font-size: 18px;
     color: #000000;
     font-weight: 400;
 }

 .footer-bottom-links {
     display: flex;
     gap: 25px;
     align-items: center;
     flex-wrap: wrap;
 }

 .footer-bottom-links a {
     font-size: 18px;
     color: #000;
     text-decoration: none;
     transition: color 0.3s ease;
     font-weight: 400;
 }

 .footer-bottom-links a:hover {
     color: #ff9500;
 }

 .divider {
     width: 1px;
     height: 16px;
     background-color: #ccc;
 }

 /* ============ RESPONSIVE DESIGN ============ */
 @media (max-width:14450px) {
     .uniqueWorkDesc {
         /* max-width: 700px; */
         margin-top: 10px;
         font-size: 22px;
         color: #000000b5;
         line-height: 26px;
         font-weight: 300;
     }
 }

 @media (max-width:1280px) {
     .ow-stage {
         width: 386px;
         height: 388px;
     }
 }

 @media (max-width:1166px) {
     .ow-card-body {
         font-size: 16px;
     }

     .ow-card-callout-text {
         font-size: 16px;
     }

     .after-reveal h2 {
         font-size: 52px;
     }

     .ow-section-wrapper .uniqueWorkTitle {
         margin-bottom: 50px;
     }
 }

 @media (max-width:850px) {
     .mobile-drawer a:last-child {
         padding: 8px 15px;
     }
 }

 /* Tablet: 768px and below */
 @media (max-width: 768px) {
     main {
         padding: 40px 20px;
     }

     .after-reveal h2 {
         font-size: 32px !important;
     }

     .main-content h1 {
         font-size: 2rem;
     }

     .main-content p {
         font-size: 1rem;
     }

     footer {
         padding: 50px 20px 35px;
     }

     .footer-grid {
         grid-template-columns: 1fr 1fr;
         gap: 35px;
     }

     .footer-logo-col {
         grid-column: 1 / -1;
         display: grid;
         grid-template-columns: auto 1fr;
         gap: 30px;
         align-items: start;
     }

     .logo {
         order: 1;
     }

     .company-address {
         grid-column: 1;
         order: 2;
     }

     .social-links {
         grid-column: 2;
         order: 3;
         justify-self: end;
         margin-top: 0;
     }

     .footer-bottom {
         flex-direction: column;
         gap: 20px;
         text-align: center;
     }

     .footer-bottom-links {
         justify-content: center;
     }
 }

 /* Mobile: 480px and below */
 @media (max-width: 480px) {
     main {
         padding: 30px 15px;
         min-height: auto;
     }

     .main-content h1 {
         font-size: 1.5rem;
         margin-bottom: 15px;
     }

     .main-content p {
         font-size: 0.95rem;
         margin-bottom: 20px;
     }

     footer {
         padding: 40px 15px 25px;
     }

     .footer-grid {
         grid-template-columns: 1fr;
         gap: 30px;
     }

     .footer-logo-col {
         grid-template-columns: 1fr;
         gap: 20px;
     }

     .logo-text {
         font-size: 20px;
     }

     .company-address {
         font-size: 12px;
         line-height: 1.6;
     }

     .social-links {
         justify-content: flex-start;
         grid-column: auto;
         margin-top: 10px;
     }

     .social-btn {
         width: 38px;
         height: 38px;
     }

     .social-btn svg {
         width: 18px;
         height: 18px;
     }

     .footer-col h3 {
         font-size: 18px;
     }

     .footer-col ul li a {
         font-size: 13px;
     }

     .footer-bottom {
         gap: 15px;
         padding-top: 20px;
     }

     .copyright-text {
         font-size: 14px;
     }

     .footer-bottom-links {
         gap: 15px;
         font-size: 14px !important;
     }

     .footer-bottom-links a {
         font-size: 14px !important;
     }

     .divider {
         height: 12px;
     }
 }

 /* Extra small: 360px and below */
 @media (max-width: 360px) {
     .logo-text {
         font-size: 18px;
     }

     .social-links {
         gap: 10px;
     }

     .social-btn {
         width: 36px;
         height: 36px;
     }

     .social-btn svg {
         width: 16px;
         height: 16px;
     }

     .footer-bottom-links {
         flex-direction: column;
         gap: 10px;
     }

     .divider {
         display: none;
     }
 }

 .hidden-img {
     opacity: 0;
     visibility: hidden;
     transition: opacity 0.6s ease;
 }

 .hidden-img.show {
     opacity: 1;
     visibility: visible;
 }


 /* SECTION Particle 2 START */
 /* Container with 100px padding */
 #mission-section {
     position: relative;
     padding: 100px 20px;
     /* min-height: 400px; */
     display: flex;
     align-items: center;
     justify-content: center;
     background: #fff;
 }

 #final-text {
     width: 100%;
     max-width: 90%;
     font-size: clamp(1.2rem, 3.5vw, 62px);
     line-height: 1.2;
     font-weight: 300;
     color: #1a1a1a;
     text-align: left;
     opacity: 0;
     /* start hidden */
     transform: translateY(30px);
     /* slight move */
     transition: all 0.8s ease;
     z-index: 10;
 }

 /* when visible */
 #final-text.show {
     opacity: 1;
     transform: translateY(0);
 }

 /* Canvas overlaid exactly on top of the text area */
 #particle-canvas-container {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     z-index: 5;
     pointer-events: none;
 }

 @media (max-width:550px) {
     #mission-section {
         padding-top: 50px;
         padding-left: 0;
         padding-right: 0;
     }
 }

 /* SECTION 2 END */



 /* App store css start  */
 /* SECTION */
 .appDownloadSection {
     padding: 60px 20px 60px;
     text-align: center;
 }

 /* CONTAINER */
 .appContainer {
     max-width: 900px;
     margin: 0 auto;
 }



 /* BUTTON WRAPPER */
 .storeButtons {
     display: flex;
     justify-content: center;
     align-items: center;
     gap: 20px;
 }

 /* BUTTON IMAGE */
 .storeBtn img {
     height: 55px;
     cursor: pointer;
     transition: all 0.3s ease;
     border-radius: 10px;
 }

 /* HOVER EFFECT */
 .storeBtn img:hover {
     transform: scale(1.05);
     box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
 }

 .storeButtons {
     text-align: center;
 }

 .storeButtons a {
     margin: 10px;
 }

 /* TABLET */
 @media (max-width: 992px) {



     .storeBtn img {
         height: 50px;
     }
 }

 /* MOBILE */
 @media (max-width: 576px) {

     .appDownloadSection {
         padding: 40px 16px 60px;
     }



     .storeButtons {
         flex-direction: column;
         gap: 14px;
     }

     .storeBtn img {
         height: 48px;
     }
     .awardImgWrap img{height: 206px;}
         .awardName {
        font-size: 16px;
                font-weight: 600;
    }
    #chatbot-help-bubble{bottom: 67px !important;}
    #chatbot-help-bubble {
    padding: 4px 13px;
    font-size: 15px;
    pointer-events: none;
}
/* .ow-cards-outer{height: 404px;} */
.ow-card{height: 404px;}
.ow-card.active{box-shadow: none !important;}
.ow-card {
        box-shadow: none !important;
        display: flex !important;
        flex-direction: column;
        justify-content: space-around;
    }
.ow-card.active {
        box-shadow: none !important;
        display: flex !important;
        flex-direction: column;
        justify-content: space-around;
    }
    .ow-card.active .ow-card-body{margin-bottom: 0px;}
 }

 /* App store css end  */

 .blog-card__btn {
     display: inline-block;
     margin-top: 12px;
     padding: 10px 18px;
     background-color: #ffffff;
     color: #ff6600;
     /* orange */
     border: 1px solid #ff6600;
     border-radius: 25px;
     font-size: 14px;
     font-weight: 500;
     text-decoration: none;
     transition: all 0.3s ease;
 }

 /* Hover Effect */
 .blog-card__btn:hover {
     background-color: #ff6600;
     color: #ffffff;
 }

 .BlogHeaderNew {
     display: flex;
     flex-direction: row;
     justify-content: space-between;
     align-items: center;
 }

 .BlogHeaderNew .btn-connect {
     height: max-content;
     margin-right: 90px;
 }

 @media (max-width:859px) {
     .BlogHeaderNew {
         display: flex;
         flex-direction: row;
         justify-content: space-between;
         align-items: self-start;
         max-width: 90%;
         margin: 0 auto;
     }

     .BlogHeaderNew .btn-connect {
         height: max-content;
         margin-right: 0px;
     }
 }
 
 /* Wrapper */
.test-dra-wrap {
  width: 100%;
  /* margin-top: 40px; */
  display: flex;
  justify-content: center;
  position: relative;
  z-index: 50;
}

/* Thin track */
.test-dra-track {
  width: 480px;
  height: 20px;
  background: #ddd;
  border-radius: 10px;
  position: relative;
  cursor: pointer;
  overflow: hidden; /* ← add this as a safety net */
}

/* Remove big fill look */
.test-dra-progress {
  display: none;
}

/* Small thumb (main UI) */
.test-dra-thumb {
  width: 42px;
  height: 12px;
  background: #ff8a00;
  border-radius: 515px;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%); /* vertical only */
  cursor: grab;
  /* no horizontal transform — we handle it in JS */
}

/* Hover effect */
.test-dra-thumb:hover {
  /* transform: translate(-50%, -50%) scale(1.3); */
}

/* Dragging feel */
.test-dra-thumb:active {
  cursor: grabbing;
  /* transform: translate(-50%, -50%) scale(1.2); */
}

/* Hide on mobile */
@media (max-width: 859px) {
  .test-dra-wrap {
    display: none;
  }
}


  #clients {
  scroll-margin-top: 80px; /* adjust as needed */
}
#ow-section-wrapper {
  scroll-margin-top: 109px;
}
#mainHeader {
  transition: transform 0.3s ease;
}
.uniqueCard {
    display: block;
    text-decoration: none;
    color: inherit;
}
video::-webkit-media-controls {
    display: none !important;
}

video::-webkit-media-controls-enclosure {
    display: none !important;
}