:root {
     --cream: #f1e9e2;
     --orange: #F58220;
     --black: #1A1208;
     --card-bg: #F5F0EA;
     --shadow: rgba(26, 18, 8, 0.20);
 }

  *,
 *::before,
 *::after {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
     /* font-family: 'Neue Haas Grotesk Display Pro '; */
 }
 html{
    scroll-behavior: smooth;
 }
 #clients{scroll-margin-top: 100px;}

  @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;
 }


 html,
 body {
     font-family: 'Inter', sans-serif;
     color: var(--black);
     overflow-x: hidden;
     min-height: 100vh;
     background:var(--cream) ;
 }

 .bodyTextSize {
     font-size: 18px !important;
     line-height: 26px !important;
     color: #000;
 }


 /* grain */
 body::after {
     content: '';
     position: fixed;
     inset: 0;
     background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
     pointer-events: none;
     z-index: 999;
     opacity: .7;
 }

 /* ── HERO ── */
 .hero {
     min-height: 100vh;
     display: grid;
     grid-template-columns: 42% 58%;
     align-items: center;
     padding: 4rem 4% 3rem 5%;
     gap: 0;
     position: relative;
     background: var(--cream);
     padding-bottom: 0px;
 }

 /* ── COPY ── */
 .copy {
     position: relative;
     z-index: 2;
     padding-right: 2rem;
 }

 .headline {
     font-weight: 700;
     font-size: 74px;
     line-height: 1.05;
     letter-spacing: -0.025em;
     margin-bottom: 1.2rem;
     opacity: 0;
     transform: translateY(36px);
 }

 .headline .dot {
     color: #F58220;
 }

 .underline-bar {
     width: 80px;
     height: 4px;
     background: var(--orange);
     border-radius: 2px;
     margin-bottom: 2rem;
     opacity: 0;
     transform: scaleX(0);
     transform-origin: left;
 }

 .body-text {
     font-size: 18px;
     line-height: 26px;
     color: #000;
     max-width: 70%;
     opacity: 0;
     transform: translateY(18px);
 }

 .body-text p {
     margin-bottom: 1rem;
 }

 .body-text .accent {
     color: #F58220;
     font-weight: 600;
 }

 /* ── CARDS STAGE ── */
 .stage-hero {
     position: relative;
     width: 100%;
     height: clamp(500px, 100vh, 780px);
     z-index: 2;
 }

 /* ── POLAROID CARD ── */
 .card-hero {
     position: absolute;
     background: var(--card-bg);
     padding: 10px 10px 0;
     box-shadow: 0 6px 28px var(--shadow), 0 1px 6px rgba(0, 0, 0, 0.07);
     cursor: pointer;
     will-change: transform;
     opacity: 0;
     transition: box-shadow 0.3s;
     aspect-ratio: 3/4;
     overflow: hidden;
     display: flex;
     flex-direction: column;
 }

 .card-hero:hover {
     box-shadow: 0 18px 56px var(--shadow);
     z-index: 30 !important;
     width: 31%;
 }

 .card-img-wrap {
     flex: 1 1 auto;
     overflow: hidden;
     border-radius: 3px;
     min-height: 0;
     transition: flex 0.42s cubic-bezier(0.4, 0, 0.2, 1);
     position: relative;
 }

 /* .card-hero:hover .card-img-wrap,
 .card-hero.active-mob .card-img-wrap {
     flex: 0 1 38%;
 } */

 .peel-canvas {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     z-index: 5;
     pointer-events: none;
     border-radius: 3px;
 }
 
 .peel-reveal-content {
     position: absolute;
     inset: 0;
     background: #fdfcfb;
     padding: 20px 15px;
     z-index: 1;
     display: flex;
     flex-direction: column;
     border-radius: 3px;
     /* Decorative lines via CSS */
     background-image: linear-gradient(rgba(200,195,188,0.2) 1px, transparent 1px);
     background-size: 100% 22px;
     background-position: 0 45px;
     overflow: hidden;
 }
 
 .peel-hint {
     position: absolute;
     bottom: 5px;
     right: 10px;
     font-size: 9px;
     color: #f58220;
     opacity: 0.8;
     z-index: 10;
     pointer-events: none;
     text-transform: uppercase;
     font-weight: 700;
     letter-spacing: 0.05em;
 }
 
 .card-img-wrap img {
     display: block;
     width: 100%;
     height: 100%;
     object-fit: cover;
     border-radius: 3px;
     transform: scale(1);
     transform-origin: center center;
     transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
 }

 .card-hero:hover .card-img-wrap img {
     transform: scale(1.08);
 }

 /* ── CARD BOTTOM AREA ── */
 .card-bottom {
     flex: 0 0 auto;
     position: relative;
     height: 72px;
     /* Base height for static metadata row */
     overflow: hidden;
     transition: height 0.42s cubic-bezier(0.4, 0, 0.2, 1);
 }

 /* Expand text drawer on hover/active states to fit larger content seamlessly */
 /* .card-hero:hover .card-bottom,
 .card-hero:active .card-bottom,
 .card-hero.active-mob .card-bottom {
     height: 284px;
 } */

 /* ── META ROW ── */
 .card-meta {
     position: absolute;
     inset: 0;
     display: flex;
     align-items: center;
     gap: 8px;
     padding: 0 4px;
     transform: translateY(0);
     opacity: 1;
     transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s ease;
 }

 /* .card-hero:hover .card-meta {
     transform: translateY(-12px);
     opacity: 0;
 } */

 .cn {
     font-size: 15px;
     font-weight: 700;
     color: var(--black);
     white-space: nowrap;
     line-height: 1;
 }

 .cd {
     width: 1px;
     height: 22px;
     background: #c8b8a8;
     flex-shrink: 0;
 }

 .ct {
     font-size: 16px;
     color: #000;
     line-height: 1.25;
     font-weight: 500;
 }

 /* ── HOVER CONTENT ── */
 .card-hover-content {
   display: none;
 }

 /* .card-hero:hover .card-hover-content,
 .card-hero:active .card-hover-content {
     transform: translateY(0);
     opacity: 1;
 } */

 .hover-heading {
     font-size: 15px;
     /* Increased heading text weight & scale */
     font-weight: 800;
     color: #ff8c00;
     line-height: 1.2;
     margin-bottom: 6px;
     white-space: normal;
     /* Permits text wrapping if titles scale on tighter viewports */
 }

 .hover-para {
     font-size: 14px;
     font-weight: 600;
     line-height: 1.6;
     /* Increased paragraph text scale globally */
     color: #333;
 }

 .hover-para .accent {
     color: var(--orange);
     font-weight: 600;
 }

 /* ─── DESKTOP CARD positions ─── */
 .c1 {
     width: 26%;
     top: 2%;
     left: -2%;
     --r: -7deg;
     z-index: 6;
 }

 .c2 {
     width: 24%;
     top: 0%;
     left: 23%;
     --r: 2deg;
     z-index: 7;
 }

 .c3 {
     width: 23%;
     top: 1%;
     left: 47%;
     --r: -3deg;
     z-index: 4;
 }

 .c4 {
     width: 27%;
     top: 0%;
     left: 70%;
     --r: 5deg;
     z-index: 8;
 }

 .c5 {
     width: 28%;
     top: 47%;
     left: -15%;
     --r: 10deg;
     z-index: 5;
 }

 .c6 {
     width: 25%;
     top: 49%;
     left: 15%;
     --r: -5deg;
     z-index: 6;
 }

 .c7 {
     width: 30%;
     top: 44%;
     left: 41%;
     --r: 3deg;
     z-index: 5;
 }

 .c8 {
     width: 23%;
     top: 48%;
     left: 70%;
     --r: -4deg;
     z-index: 4;
 }

 /* Mobile Hero Card Arrow - Hidden by default on Desktop */
 .card-arow-mob {
     display: none;
 }

 @media (max-width: 1440px) {
     .card-hero:hover {
     box-shadow: 0 18px 56px var(--shadow);
     z-index: 30 !important;
     width: 35%;

 }
     .headline {
         font-size: 55px;
     }

     .c1 {
         width: 28%;
         left: 1%;
     }

     .c2 {
         width: 26%;
         left: 27%;
     }

     .c3 {
         width: 28%;
         left: 55%;
     }

     .c4 {
         width: 26%;
         left: 74%;
     }

     .c5 {
         width: 28%;
         left: 0%;
     }

     .c6 {
         width: 27%;
         left: 22%;
     }

     .c7 {
         width: 31%;
         left: 45%;
     }

     .c8 {
         width: 26%;
         left: 74%;
     }

     .hero {
         grid-template-columns:35% 65%;
         padding-top: 120px;
     }
       .headline {
    font-size: 50px;
  }

     .body-text {
         max-width: 98%;
     }
 }

 /* ── MOBILE & TABLET REDESIGN ── */
 @media (max-width: 1024px) {
     .bodyTextSize {
         font-size: 16px !important;
         line-height: 24px !important;
         color: #000;
     }

     .body-text {
         max-width: 100% !important;
     }

     .hero {
         grid-template-columns: 1fr;
         padding: 120px 0 3rem 0;
         gap: 3rem;
         min-height: auto;
        align-items: start;
     }

     .copy {
         padding: 0 6%;
     }

     .body-text {
         max-width: 560px;
     }

     .stage-hero {
         display: flex !important;
         flex-direction: row !important;
         overflow-x: auto !important;
         scroll-snap-type: x mandatory !important;
         scroll-behavior: smooth;
         -webkit-overflow-scrolling: touch;
         height: auto !important;
         padding: 1.5rem 6% 3rem 6% !important;
         gap: 1.5rem !important;
         width: 100vw !important;
     }

     .stage-hero::-webkit-scrollbar {
         display: none;
     }

     .stage-hero {
         -ms-overflow-style: none;
         scrollbar-width: none;
     }

     .card-hero {
         position: relative !important;
         top: auto !important;
         left: auto !important;
         width: 290px !important;
         flex: 0 0 290px !important;
         scroll-snap-align: center !important;
         margin: 0 !important;
         opacity: 1;
     }

     /* Mirror text visibility transformations cleanly on mobile touch active states */
     /* .card-hero:active .card-img-wrap {
         flex: 0 1 38%;
     } */

     .hover-heading {
         font-size: 15px !important;
         /* Forces layout parity on mobile engines */
     }

     .hover-para {
         font-size: 12px !important;
         /* Forces layout parity on mobile engines */
     }
 }


 /* Case study css start her  */

 /* ── SECTION LAYOUT ── */
 .case-study-section {
     padding: 70px 20px;
 }

 .case-study-container {
     max-width: 90%;
     margin: auto;
 }

 .case-study-top {
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 20px;
     padding-bottom: 20px;
     margin-bottom: 25px;
 }

 .h2Heading {
     font-size: 64px;
     font-weight: 400;
     color: #111;
     line-height: 1.15;
     margin-bottom: 10px;
 }

 .case-study-top a {
     flex-shrink: 0;
     display: inline-flex;
     align-items: center;
     background: #ff8c00;
     color: #fff;
     border: none;
     border-radius: 50px;
     padding: 11px 24px;
     font-size: 14px;
     font-weight: 500;
     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);
 }

 .case-study-top a:hover {
     background: #e07b00;
 }

 /* ── DESKTOP GRID LAYOUT ── */
 @media(min-width:1025px) {
     .case-study-slider {
         display: flex;
         flex-wrap: wrap;
         gap: 24px;
     }

     .case-slide {
         width: calc(33.33% - 16px);
         margin-bottom: 12px;
     }
 }

 /* ── SLIDE & CARD SYSTEM ── */
 .case-slide {
     padding: 0 12px;
     height: auto;
 }

 .case-card {
     border: 1px solid #bdbdbd;
     background: #fff;
     overflow: hidden;
     height: 100%;
     display: flex;
     flex-direction: column;
 }

 /* ── MEDIA FRAME ── */
 .case-video {
     position: relative;
     overflow: hidden;
     cursor: pointer;
     width: 100%;
     aspect-ratio: 16 / 9;
     background: #000;
 }

 .case-video img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     display: block;
     transition: transform 0.5s ease;
 }

 .case-video:hover img {
     transform: scale(1.05);
 }

 /* ── PLAY BUTTON ── */
 .play-btn {
     position: absolute;
     left: 50%;
     top: 50%;
     transform: translate(-50%, -50%);
     width: 80px;
     height: 80px;
     border-radius: 50%;
     backdrop-filter: blur(10px);
     background: rgba(255, 255, 255, 0.12);
     border: 2px solid rgba(255, 255, 255, 0.4);
     display: flex;
     align-items: center;
     justify-content: center;
     transition: 0.4s ease;
     overflow: hidden;
     z-index: 2;
 }

 .play-btn::before {
     content: "";
     position: absolute;
     inset: 10px;
     border: 1px solid rgba(255, 255, 255, 0.5);
     border-radius: 50%;
     animation: pulseRing 2s linear infinite;
 }

 .play-btn::after {
     content: "";
     width: 0;
     height: 0;
     border-left: 24px solid #fff;
     border-top: 15px solid transparent;
     border-bottom: 15px solid transparent;
     margin-left: 6px;
     position: relative;
     z-index: 3;
 }

 .case-video:hover .play-btn {
     transform: translate(-50%, -50%) scale(1.1);
     background: rgba(255, 255, 255, 0.2);
 }

 @keyframes pulseRing {
     0% {
         transform: scale(1);
         opacity: 1;
     }

     100% {
         transform: scale(1.15);
         opacity: 0;
     }
 }

 /* ── CONTENT CONTAINER ── */
 .case-content {
     padding: 28px;
     display: flex;
     flex-direction: column;
     flex: 1;
     justify-content: space-between;
     /* Keeps top contents separate from buttons */
 }

 /* ── CONTENT PROTECTION LAYER (Fixes text overlap) ── */
 .case-text-wrap {
     width: 100%;
     margin-bottom: 24px;
     /* Guaranteed physical isolation space before the button starts */
 }

 .case-content h3 {
     font-size: 24px;
     line-height: 32px;
     font-weight: 700;
     margin-bottom: 14px;
     color: #111;
 }

 .case-content p {
     font-size: 16px;
     line-height: 26px;
     color: #666;
 }

 /* ── VIEW MORE ACTION BUTTON ── */
 .view-more {
     width: 100%;
     border: 1px solid #bdbdbd;
     background: transparent;
     height: 58px;
     font-size: 15px;
     font-weight: 700;
     cursor: pointer;
     transition: 0.3s ease;
     flex-shrink: 0;
     /* Prevents button from getting squished by long layout lines */
 }

 .view-more:hover {
     background: #111;
     color: #fff;
 }

 /* ── POPUP COMPONENT WINDOW ── */
 .video-popup {
     position: fixed;
     inset: 0;
     width: 100%;
     height: 100vh;
     background: rgba(0, 0, 0, 0.92);
     display: none;
     align-items: center;
     justify-content: center;
     z-index: 9999;
     padding: 20px;
 }

 .popup-inner {
     width: 100%;
     max-width: 900px;
     position: relative;
 }

 .popup-inner iframe {
     width: 100%;
     height: 500px;
     border: 0;
     display: block;
 }

 .close-popup {
     position: absolute;
     right: 0;
     top: -50px;
     color: #fff;
     font-size: 42px;
     cursor: pointer;
     line-height: 1;
 }

 body.popup-open {
     overflow: hidden;
 }

 /* ── MOBILE SYSTEM (Slick Layout & SVG Icons Fixed) ── */
 @media(max-width: 1024px) {

     .case-study-slider.slick-initialized,
     .case-study-slider.slick-initialized .slick-track,
     .case-study-slider.slick-initialized .slick-slide {
         display: flex !important;
     }

     .case-study-slider.slick-initialized .slick-slide {
         height: auto !important;
     }

     .case-study-slider.slick-initialized .case-slide {
         display: flex !important;
         flex-direction: column;
         height: auto !important;
     }

     /* ── INTERACTIVE MODERN ARROWS (SVG Injection Fix) ── */
     .slick-prev,
     .slick-next {
         width: 48px;
         height: 48px;
         background-color: #111 !important;
         border-radius: 50%;
         z-index: 10;
         top: 50%;
         transform: translateY(-50%);
         transition: background-color 0.3s, transform 0.2s;
         box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
     }

     /* Purge default slick character assets */
     .slick-prev:before,
     .slick-next:before {
         display: none !important;
     }

     /* Insert Custom Clean SVG Vector Paths */
     .slick-prev {
         left: 16px !important;
         background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='2.5' stroke='white'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M15.75 19.5L8.25 12l7.5-7.5' /%3E%3C/svg%3E") !important;
         background-repeat: no-repeat !important;
         background-position: center center !important;
         background-size: 22px !important;
     }

     .slick-next {
         right: 16px !important;
         background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='2.5' stroke='white'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M8.25 4.5l7.5 7.5-7.5 7.5' /%3E%3C/svg%3E") !important;
         background-repeat: no-repeat !important;
         background-position: center center !important;
         background-size: 22px !important;
     }

     .slick-prev:hover,
     .slick-next:hover,
     .slick-prev:focus,
     .slick-next:focus {
         background-color: #ff8c00 !important;
     }

     .slick-prev:active,
     .slick-next:active {
         transform: translateY(-50%) scale(0.92);
     }

     .case-study-container {
         max-width: 95%;
     }

     .play-btn {
         width: 90px;
         height: 90px;
     }
 }

 /* ── RESPONSIVE SCALING BREAKPOINTS ── */
 @media(max-width:1200px) {


     .case-content {
         padding: 22px;
     }
 }

 @media(max-width:767px) {
     .case-study-section {
         padding: 50px 0px;
     }

     .case-study-container {
         max-width: 90%;
     }

     .case-study-top {
         flex-direction: column;
         align-items: flex-start;
         padding: 0 20px;
         margin-bottom: 30px;
         padding-left: 0px;

     }

     .play-btn {
         width: 74px;
         height: 74px;
     }

     .play-btn::after {
         border-left: 20px solid #fff;
         border-top: 12px solid transparent;
         border-bottom: 12px solid transparent;
     }

     .popup-inner iframe {
         height: 260px;
     }

     .close-popup {
         top: -42px;
         font-size: 34px;
     }

     .case-slide {
         padding: 0 8px;
     }

     .slick-prev {
         left: 10px !important;
     }

     .slick-next {
         right: 10px !important;
     }
 }

 @media (max-width:1440px) {
     .headingClassMain {
         font-size: 54px;
         /* font-weight: 300; */
         color: #111;
         line-height: 1.15;
         margin-bottom: 15px;
     }

     .bodyText {
         font-size: 16px;
         line-height: 24px;
         margin-top: 10px;
         color: #000;
         max-width: 90%;
         margin: auto;
     }
 }

 @media (max-width:992px) {
     .headingClassMain {
         font-size: 48px;
         /* font-weight: 300; */
         color: #111;
         line-height: 1.15;
         margin-bottom: 15px;
     }

     .bodyText {
         font-size: 16px;
         line-height: 24px;
         margin-top: 10px;
         color: #000;
         max-width: 90%;
         margin: auto;
     }
 }


 /* 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 */
 /* 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;
 }

 /* 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: none;
     background: #ffffff;
     font-size: 1.6rem;
     font-weight: 500;
     color: #000000;
     cursor: pointer;
     display: flex;
     align-items: center;
     justify-content: center;
     border: 1px solid #e8e8e4;
     transition: background-color 0.3s, color 0.3s, transform 0.2s;
 }

 .nav-btn:hover,
 .nav-btn:active {
     background-color: #ff8c00;
     color: #fff;
     transform: scale(1.05);
 }

 .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 */



 /* Testimoneal css start here */

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

 .headingClassMain {
     font-size: 64px;
     font-weight: 400;
     color: #111;
     line-height: 1.15;
     margin-bottom: 15px;
 }

 .bodyText {
     font-size: 18px;
     line-height: 24px;
     margin-top: 10px;
     color: #000;
     max-width: 90%;
     margin: auto;
 }

 .makeTextCenter {
     text-align: center;
 }

 .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;
 }

 .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)
        ═══════════════════════════════════════ */
 .creative .arcText {
     line-height: 16px;
 }

 .mob-wrap {
     display: none;

 }

 /* 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); */
 }

 .arcSliderWrap.creative {
     margin-bottom: 60px;
     padding-top: 60px;
 }

 /* .arcSlider.creative{height: 84%;} */

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


 @media (max-width:1440px) {
     .headingClassMain {
         font-size: 54px;
         /* font-weight: 300; */
         color: #111;
         line-height: 1.15;
         margin-bottom: 15px;
     }



     .bodyText {
         font-size: 16px;
         line-height: 24px;
         margin-top: 10px;
         color: #000;
         max-width: 90%;
         margin: auto;
     }
 }

 @media (max-width:992px) {
     .headingClassMain {
         font-size: 48px;
         font-weight: 300;
         color: #111;
         line-height: 1.15;
         margin-bottom: 15px;
     }

     .bodyText {
         font-size: 16px;
         line-height: 24px;
         margin-top: 10px;
         color: #000;
         max-width: 90%;
         margin: auto;
     }

     .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: 48px;
         height: 48px;
         border-radius: 50%;
         border: none;
         background: #ffffff;
         color: #000;
         display: flex;
         align-items: center;
         justify-content: center;
         cursor: pointer;
         transition: background-color 0.3s, transform 0.2s, box-shadow 0.2s;
         border: 1px solid #e8e8e4;
     }

     .mob-btn:hover,
     .mob-btn:active {
         background-color: #ff8c00;
         transform: scale(0.92);
     }

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

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

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

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

     .mob-slider-area .arcSlider .slick-slide>div {
         padding: 0px 20px;
     }

     /* Testimoneal slider end */
 }

 @media (max-width:650px) {

     .mob-wrap {
         padding-top: 30px;
     }



 }

 /* Testimoneal css end here */


 /* Award css start here  */
 :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: var(--cream);
     padding: 80px 0 72px;
     overflow: hidden;
 }

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

 .awardsInner {
     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;
     touch-action: none;
 }

 .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;
     background-image: url('../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;
 }

 /* ─── EXPANDED DESKTOP VIEW ─── */
 .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 ─── */
 .awardsScrollbarArea {
     padding: 72px 48px 0;
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 16px;
 }

 .awardsNavBtn {
     display: none;
     align-items: center;
     justify-content: center;
     width: 48px;
     height: 48px;
     flex-shrink: 0;
     border-radius: 50%;
     border: none;
     background: #ffffff;
     cursor: pointer;
     color: #000000;
     transition: background-color 0.3s, transform 0.2s, opacity 0.2s;
     /* box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); */
     border: 1px solid #e8e8e4;
 }

 .awardsNavBtn:hover {
     background-color: #ff8c00;
 }

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

 .awardsNavBtn svg {
     width: 16px;
     height: 16px;
     stroke: currentColor;
     stroke-width: 2.5;
     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 MODAL ─── */
 .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;
 }

 /* ─── RESPONSIVE BREAKPOINTS (FIXED FOR TABLET 2-CARD VIEW) ─── */
 @media (max-width: 1440px) {
     .awardsHeader {
         padding-left: 108px;
     }
 }

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

 /* ── TABLET & MOBILE ECOSYSTEM ENGINES CONVERGED ── */
 @media (max-width: 1024px) {
     :root {
         /* 43vw safely houses exactly 2 cards side-by-side with a clean gap */
         --card-w: 43vw;
         --card-h: 380px;
         --gap: 24px;
     }

     .awardsSection .awardsHeader {
         text-align: center;
         align-items: center;
         max-width: 80%;
         margin: 0 auto 40px;
     }

     .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;
     }

     .awardImgWrap img {
         height: 260px;
     }

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

     .awardName {
         font-size: 13px;
     }

     /* Clear desktop expansions across compact displays */
     .awardHoverBtn,
     .awardExpandedContent,
     .awardCloseBtn {
         display: none !important;
     }

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

     .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;
     }

     .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;
     }

     /* Activate custom navigation bars globally across tablets */
     .awardsScrollbarArea {
         padding: 24px 20px 0;
         gap: 12px;
     }

     .awardsNavBtn {
         display: flex;
     }

     .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);
     }
 }

 /* ── MOBILE PHONE SPECIFIC VIEW OVERRIDE ── */
 @media (max-width: 640px) {
     :root {
         /* Drops down to exactly 1 card per viewport viewframe on phone screens */
         --card-w: 82vw;
         --gap: 16px;
     }

     .awardName {
         font-size: 12px;
     }
 }

 @media (max-width: 540px) {
     .awardsSection .awardsHeader {
         padding: 0px;
         align-items: center;
         margin-bottom: 40px;
     }
 }


 /* ════════════════════════════════
   FAQ SECTION
════════════════════════════════ */

 .faq-wrapper {
     width: 100%;
     max-width: 90%;
     display: grid;
     grid-template-columns: 1fr 1.6fr;
     /* left narrower, right wider */
     gap: 3rem;
     align-items: flex-start;
     margin: 80px auto;
     margin-left: 0;
     padding-bottom: 80px;
 }
 .faq-left{padding-left: 80px;}

 .faq-left h1 {
     font-size: clamp(2rem, 5vw, 80px);
     /* fluid: never overflows */
     font-weight: 300;
     line-height: 1.1;
     color: #111;
     letter-spacing: -.02em;
     margin-bottom: 1.5rem;
 }

 .faq-item {
     border-bottom: 1px solid #e8650a;
 }

 .faq-item:first-child {
     border-top: 1px solid #e8650a;
 }

 .faq-question {
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 1rem;
     padding: 1.1rem 0;
     cursor: pointer;
     user-select: none;
 }

 .faq-question span {
     font-size: 20px;
     font-weight: 600;
     color: #111;
     line-height: 1.4;
 }

 .faq-icon {
     flex-shrink: 0;
     width: 20px;
     height: 20px;
     position: relative;
     display: flex;
     align-items: center;
     justify-content: center;
 }

 .faq-icon::before,
 .faq-icon::after {
     content: '';
     position: absolute;
     background: #f97316;
     border-radius: 2px;
     transition: transform .3s ease, opacity .3s ease;
 }

 .faq-icon::before {
     width: 14px;
     height: 1.5px;
 }

 .faq-icon::after {
     width: 1.5px;
     height: 14px;
     opacity: 1;
     transform: scaleY(1);
 }

 .faq-item.open .faq-icon::after {
     opacity: 0;
     transform: scaleY(0);
 }

 .faq-answer {
     display: none;
     padding: 0 0 1.1rem;
 }

 .faq-answer p {
     font-size: 15px;
     color: #555;
     line-height: 1.7;
 }

 /* Tablet landscape */
 @media (max-width: 1024px) {
     .faq-wrapper {
         max-width: 95%;
         gap: 2rem;
     }
 }

 /* Tablet portrait */
 @media (max-width: 768px) {
     .faq-wrapper {
         grid-template-columns: 1fr;
         /* stack vertically */
         max-width: 92%;
         gap: 1.5rem;
         margin: 50px auto;
     }

     .faq-left h1 {
         font-size: clamp(1.8rem, 7vw, 2.8rem);
     }

     .faq-question span {
         font-size: 18px;
     }
 }

 /* Mobile */
 @media (max-width: 480px) {
     .faq-wrapper {
         max-width: 90%;
         margin: 40px auto;
     }

     .faq-left h1 {
         font-size: clamp(1.6rem, 8vw, 2.2rem);
     }

     .faq-question span {
         font-size: 15px;
     }
 }


 /* ════════════════════════════════
           CONTACT SECTION
        ════════════════════════════════ */

        .contact-wrapper {
            width: 100%;
            max-width: 85%;
            display: flex;
            align-items: stretch;
            margin: 120px auto;
            flex-wrap: wrap;
            position: relative;
            padding: 80px 0px;
        }

        /* ── LEFT ── */
        .contact-left {
            flex: 1 1 280px;
            min-width: 0;
            display: flex;
            flex-direction: column;
            justify-content: center;
            position: relative;
            padding-right: 2.5rem;
        }

        /* Decorative image — scales with viewport */
        .contact-left-visual {
            position: absolute;
            top: -96px;
            right: -49px;
            z-index: 0;
            width: clamp(80px, 24vw, 269px);   /* fluid: 80px → 200px */
            max-width: 55%;                      /* never wider than half the column */
            height: auto;
            pointer-events: none;
            opacity: 0.85;
        }

       

        .contact-left p {
            font-size: clamp(16px, 1.3vw, 18px);
            line-height: 1.7;
            max-width: 100%;
            margin-bottom: 15px;
            position: relative;
            z-index: 1;
        }

        .contact-info {
            display: flex;
            flex-direction: column;
            gap: 0.9rem;
            position: relative;
            z-index: 1;
        }

        .contact-info-item {
            display: flex;
            align-items: center;
            gap: 0.9rem;
            font-size: clamp(16px, 1.3vw, 18px);
            line-height: 1.5;
        }

        .contact-info-item svg {
            flex-shrink: 0;
            color: #555;
            width: clamp(16px, 1.5vw, 20px);
            height: clamp(16px, 1.5vw, 20px);
        }

        /* ── RIGHT ── */
        .contact-right {
            flex: 1 1 340px;
            min-width: 0;
            box-shadow: 0px 0px 10px 0px #F1965CB2;
            border-radius: 24px;
            padding: clamp(1.25rem, 3vw, 2.5rem) clamp(1rem, 2.5vw, 2rem);
            background: #fff;
            z-index: 1;
        }

        .form-card h3 {
            font-size: clamp(14px, 1.4vw, 18px);
            font-weight: 700;
            color: #111;
            margin-bottom: 1.5rem;
            display: flex;
            align-items: center;
            gap: 0.4rem;
            line-height: 1.4;
        }

        .form-card h3 .dot {
            display: inline-block;
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: #f97316;
            flex-shrink: 0;
        }

        .field {
            display: flex;
            align-items: flex-end;
            gap: clamp(12px, 1.5vw, 20px);
            border-bottom: 1.5px solid #e8a87c;
            margin-bottom: 1.25rem;
            padding: 8px 0;
        }

        .field svg {
            flex-shrink: 0;
            color: #aaa;
            margin-bottom: 2px;
            width: clamp(16px, 1.5vw, 20px);
            height: clamp(16px, 1.5vw, 20px);
        }

        .field input,
        .field select,
        .field textarea {
            flex: 1;
            border: none;
            outline: none;
            background: transparent;
            font-size: clamp(13px, 1.3vw, 16px);
            color: #333;
            font-family: inherit;
            padding: 0.1rem 0;
            min-width: 0;
        }

        .field input::placeholder,
        .field textarea::placeholder {
            color: #aaa;
        }

        .field select {
            appearance: none;
            cursor: pointer;
            color: #aaa;
        }

        .field select.selected {
            color: #333;
        }

        .field textarea {
            resize: none;
            height: 28px;
            line-height: 1.5;
        }

        .checkbox-row {
            display: flex;
            align-items: center;
            gap: 0.55rem;
            margin: 1.5rem 0 1.25rem;
        }

        .checkbox-row input[type="checkbox"] {
            appearance: none;
            width: 18px;
            height: 18px;
            border: 1px solid #b6b5b5;
            border-radius: 3px;
            position: relative;
            cursor: pointer;
            flex-shrink: 0;
        }

        .checkbox-row input[type="checkbox"]:checked {
            background: #f97316;
            border-color: #f97316;
        }

        .checkbox-row input[type="checkbox"]:checked::after {
            content: "";
            position: absolute;
            left: 5px;
            top: 1px;
            width: 4px;
            height: 9px;
            border: solid #fff;
            border-width: 0 2px 2px 0;
            transform: rotate(45deg);
        }

        .checkbox-row label {
            font-size: clamp(12px, 1.2vw, 14px);
            color: #555;
        }

        .checkbox-row label a {
            color: #555;
            text-decoration: underline;
            text-underline-offset: 2px;
        }

        .btn-submit {
            background: transparent;
            border: 1px solid #ccc;
            border-radius: 20px;
            padding: 8px 28px;
            font-size: clamp(13px, 1.2vw, 16px);
            color: #333;
            cursor: pointer;
            font-family: inherit;
            transition: background 0.2s, color 0.2s, border-color 0.2s;
            display: block;
            margin-left: auto;
        }

        .btn-submit:hover {
            background: #f97316;
            color: #fff;
            border-color: #f97316;
        }

        /* ── TABLET LANDSCAPE ── */
        @media (max-width: 1024px) {
            .contact-wrapper {
                max-width: 90%;
            }

            .contact-left {
                padding-right: 1.5rem;
            }
        }

        /* ── TABLET PORTRAIT — stack ── */
        @media (max-width: 768px) {
            .contact-wrapper {
                flex-direction: column;
                gap: 2rem;
                max-width: 92%;
                margin: 40px auto;
            }

            .contact-left {
                width: 100%;
                flex: none;
                padding-right: 0;
                padding-bottom: 1rem;
            }

            .contact-right {
                width: 100%;
                flex: none;
                padding: 1.75rem 1.25rem;
            }

            /* Image sits top-right of the left block */
            .contact-left-visual {
                width: clamp(80px, 20vw, 176px);
                top: 0;
                right: 0;
                opacity: 1;
            }
        }

        /* ── MOBILE ── */
        @media (max-width: 480px) {
            .contact-wrapper {
                max-width: 92%;
                margin: 40px auto;
                gap: 1.5rem;
            }

            .contact-right {
                padding: 1.25rem 1rem;
                border-radius: 16px;
            }

            /* On small screens, hide the image to avoid overlap */
            .contact-left-visual {
                width: clamp(60px, 18vw, 100px);
                opacity: 0.6;
            }
        }

        /* ── VERY SMALL MOBILE ── */
        @media (max-width: 360px) {
            .contact-left-visual {
                display: none; /* hide on very small screens to avoid clutter */
            }
        }


 /* margue  */

 .scene {
     width: 100%;
     background: var(--cream);
     position: relative;
     display: flex;
     align-items: stretch;
     min-height: 180px;
     overflow: hidden;
 }

 /* ── Left image ── */
 .left-image {
     flex-shrink: 0;
     position: relative;
     z-index: 2;
 }

 .left-image img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     display: block;
 }

 /* ── Right content (cream bg + strip) ── */
 .right-content {
     flex: 1;
     display: flex;
     flex-direction: column;
     justify-content: end;
     /* padding-bottom: 20px; */
     min-width: 0;
 }

 /* ── Black marquee strip ── */
 .marquee-strip {
     background: #111111;
     height: 52px;
     display: flex;
     align-items: center;
     overflow: hidden;
     width: 100%;
 }

 .marquee-track {
     display: flex;
     align-items: center;
     white-space: nowrap;
     animation: marquee 24s linear infinite;
     will-change: transform;
 }

 .marquee-track:hover {
     animation-play-state: paused;
 }

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

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

 .tag {
     font-size: clamp(9px, 1.4vw, 13px);
     font-weight: 900;
     letter-spacing: 0.09em;
     text-transform: uppercase;
     color: #ffffff;
     padding: 0 16px;
     flex-shrink: 0;
 }

 .tag.orange {
     color: #F58220;
 }

 .scene .dot {
     width: 6px;
     height: 6px;
     border-radius: 50%;
     background: #F58220;
     flex-shrink: 0;
 }

 /* ── Star image in marquee ── */
 .star-img {
     flex-shrink: 0;
     padding: 0 10px;
     display: flex;
     align-items: center;
 }

 .star-img img {
     width: 22px;
     height: 50px;
     object-fit: contain;
     display: block;
 }

 /* ── Mobile ── */
 @media (max-width: 600px) {
     .scene {
         flex-direction: column;
         min-height: unset;
     }

     .left-image {
         width: 100%;
         height: 160px;
     }

     .right-content {
         padding-bottom: 0;
     }

     .marquee-strip {
         height: 48px;
     }

     .headingClassMain {
         font-size: 28px;
         font-weight: 400;
         color: #111;
         line-height: 1.15;
         margin-bottom: 15px;
     }

     .clients-section.creative .uniqueWorkDesc {
         margin-bottom: 184px !important;
     }

     .headline {
         font-size: 38px;
     }
 }

 @media (max-width: 990px) {

     .case-study-slider .slick-prev,
     .case-study-slider .slick-next {
         display: block !important;
         z-index: 10;
         width: 36px;
         height: 36px;
     }

     @media (max-width: 990px) {
         .case-study-slider {
             padding-bottom: 64px;
         }

         /* Push arrows outside or to bottom — pick one layout */
         .case-study-slider .slick-prev,
         .case-study-slider .slick-next {
             display: flex !important;
             align-items: center;
             justify-content: center;
             z-index: 10;
             width: 48px;
             height: 48px;
             top: auto;
             bottom: 0;
             color: #000;
             transform: none;
             background-color: #ffffff !important;
             border-radius: 50%;
             border: 1px solid #e8e8e4 !important;
             transition: background-color 0.3s, transform 0.2s;
         }

         /* Option A: Side arrows (default Slick position, just made visible) */
         .case-study-slider .slick-prev {
             left: calc(50% - 56px) !important;
         }

         .case-study-slider .slick-next {
             right: -10px !important;
         }

         .case-study-slider .slick-prev:before,
         .case-study-slider .slick-next:before {
             display: none !important;
         }



         .case-study-slider .slick-prev {
             left: calc(50% - 56px) !important;
             background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='2.5' stroke='black'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M15.75 19.5L8.25 12l7.5-7.5' /%3E%3C/svg%3E") !important;
             background-repeat: no-repeat !important;
             background-position: center center !important;
             background-size: 20px !important;
         }

         .case-study-slider .slick-next {
             right: calc(50% - 56px) !important;
             background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='2.5' stroke='black'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M8.25 4.5l7.5 7.5-7.5 7.5' /%3E%3C/svg%3E") !important;
             background-repeat: no-repeat !important;
             background-position: center center !important;
             background-size: 20px !important;
         }

         .case-study-slider .slick-prev:before {
             content: "‹";
             color: #000;
             font-size: 36px;
             opacity: 1;
         }

         .case-study-slider .slick-next:before {
             content: "›";
             color: #000;
             font-size: 36px;
             opacity: 1;
         }

     }

     .case-study-slider .slick-prev:active,
     .case-study-slider .slick-next:active {
         background-color: #ff8c00 !important;
         transform: scale(0.92);
     }
 }

 @media (max-width: 1025px) {
     .bodyTextSize {
         font-size: 16px !important;
         line-height: 24px !important;
         color: #000;
     }

     .card-hero {
         position: relative !important;
     }

     .card-arow-mob {
         display: flex;
         position: absolute;
         bottom: 15px !important;
         right: 15px !important;
         width: 38px;
         height: 38px;
         background: #ff8c00;
         /* Uses the brand orange defined in :root */
         color: #fff;
         border-radius: 50%;
         align-items: center;
         justify-content: center;
         z-index: 50;
         transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
         animation: cardArrowPulse 2s infinite;
         cursor: pointer;
     }

     /* Point up when card is active */
     .card-hero.active-mob .card-arow-mob {
         /* transform: rotate(-90deg); */
         animation: none;
         /* Stops pulsing when the card is expanded */
     }
 }

 @keyframes cardArrowPulse {
     0% {
         box-shadow: 0 0 0 0 rgba(232, 101, 10, 0.6);
     }

     70% {
         box-shadow: 0 0 0 12px rgba(232, 101, 10, 0);
     }

     100% {
         box-shadow: 0 0 0 0 rgba(232, 101, 10, 0);
     }
 }


 .h2Heading {
     font-size: 64px;
     font-weight: 400;
     color: #111;
     line-height: 1.15;
 }

 @media (max-width: 1440px) {
     .h2Heading {
         font-size: 56px;
     }
     .hover-para {
    font-size: 12px;
    font-weight: 600;
    line-height: 1.6;
    color: #333;
}
 }

 @media (max-width: 1366px) {
     .hover-para {
         font-size: 12px;
     }
 }

 @media (max-width: 1290px) {
     .copy {
         position: relative;
         z-index: 2;
         padding-right: 20px;
     }
 }

 @media (max-width: 1024px) {
     .h2Heading {
         font-size: 48px;
     }
 }

 @media (max-width: 890px) {
     .clients-section .uniqueWorkDesc {
         margin-bottom: 156px !important;

     }

     .controls {
         margin-top: 60px;
     }


 }

 @media (max-width: 769px) {
     .h2Heading {
         font-size: 36px;
         line-height: 1.2;
     }

     .faq-left h2 br {
         display: none;
     }

     .clients-section .uniqueWorkDesc {
         margin-bottom: 226px !important;

     }

     .controls {
         margin-top: 30px;
     }
 }

     .highlight-wrap {
      display: inline;
      position: relative;
      white-space: nowrap;
    }

    /* Skewed bg — swap the image URL below to anything you like */
    .highlight-wrap::before {
      content: '';
      position: absolute;
      inset: -4px -10px -6px -8px;
      border-radius: 4px;
      transform: skewX(-6deg);
      z-index: 0;

      /* ↓ Background image — change this URL */
      background-image: url('./bgrec.png');
      background-size: cover;
      background-position: center;

      /* Optional: tint the image so text stays readable */
      /* If you want a pure image with no tint, remove the filter line */
      filter: saturate(1.3) brightness(1.05);
    }

    /* Semi-transparent overlay on top of image for readability (optional) */
    .highlight-wrap::after {
      content: '';
      position: absolute;
      inset: -10px;
      border-radius: 4px;
      transform: skewX(-6deg);
      z-index: 1;
    }

    /* Text sits above both layers */
    .highlight-wrap span {
      position: relative;
      z-index: 2;
    }

 @media (max-width: 480px) {
     .awardsScrollTrack {
         display: none;
     }

     .h2Heading {
         font-size: 30px;
     }

     .case-content h3 {
         font-size: 22px;
         line-height: 30px;
         font-weight: 700;
         margin-bottom: 14px;
         color: #111;
     }

     .case-content p {
         font-size: 16px;
         line-height: 24px;
         color: #666;
     }

     .contact-info-item {
         gap: 10px;
     }

     .contact-info-item svg {
         margin-top: 6px;
     }
 }

 .view-more-btn{
    display:none;
    width:fit-content;
    margin-top:15px;
    padding:10px 18px;
    background:#f58220;
    color:#fff;
    font-size:14px;
    font-weight:500;
    text-decoration:none;
    border-radius:15px;
    transition:.3s ease;
}

.view-more-btn:hover{
    opacity:.9;
}

/* Show only on tablet & mobile */
    .view-more-btn{
        display:inline-flex;
        align-items:center;
        justify-content:center;
    }

     /* ── ORANGE BG LAYER — image sits here ── */
  .spark-card {
    position: relative;
    background: #f97316;
    border-radius: 27px;
    display: inline-block;
    z-index: 3;
  }

  /* ── Corner image on the ORANGE bg, top-right ── */
  .spark-card-corner-img {
    position: absolute;
    top: -156px;      /* peeks above the white card */
    right: -149px;    /* peeks to the right of the white card */
    width: 300px;
    height: 300px;
    object-fit: cover;
    border-radius: 50%;
    z-index: -1;     /* above white card */
    pointer-events: none;
  }

  /* ── White inner card — sits on top of orange bg ── */
  .spark-card-inner {
    position: relative;
    background: #fff;
    border: 2.5px solid #111;
    border-radius: 20px;
    transform: translate(-16px, -16px);
    min-width: 300px;
    min-height: 400px;
    padding: 32px;
    z-index: 1;
  }

  .faq-heading-wrap{
    display:inline-block;
}

.faq-letters{
    display:flex;
    align-items:flex-end;
    gap:10px;
    margin-bottom:8px;
}

.faq-q{
    width:160px;
    height:auto;
    object-fit:contain;
}

.faq-a{
    /* width:70px; */
    height:auto;
    object-fit:contain;
}

.faq-title{
    display:inline-block;
    background:#fff;
    color:#f58220;
    /* font-size:24px; */
    /* font-weight:700; */
    line-height:1;
    padding:12px 18px;
    border-radius:6px;
    padding-left: 0;
}

.faqbottomimage{position: absolute; bottom: 0px; left: 0; }

@media(max-width:890px){

    .faqbottomimage{display: none;}
      .faq-wrapper {
    gap: 2rem;
    grid-template-columns: 1fr;
    margin-left: auto;
    max-width: 85%;
  }
  .faq-left {
  padding-left: 0px;
}
}
@media(max-width:767px){

    .faq-q{
        width:70%;
    }

    .faq-a{
        width:50px;
    }

   
    .faqbottomimage{display: none;}
}

@media (max-width: 480px) {
  .faq-wrapper {
    max-width: 90%;
    margin: 40px auto;
  }
  .spark-card-inner {
  position: relative;
  background: #fff;
  border: 2.5px solid #111;
  border-radius: 20px;
  transform: translate(0px, 17px);
  min-width: 300px;
  min-height: 400px;
  padding: 20px;
  z-index: 1;
}
  .faq-q {
    width: 50%;
  }
  .faq-letters{display: none;}
  .contact-left p{margin-bottom: 15px;}
  .contact-wrapper{padding: 0px;}
  .contact-left p br{display: none;}
     .contact-left-visual{top: 83px !important; opacity: 1;}

}