/* Font Embed Start */
@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@200..800&display=swap");
/* Font Embed End */

/* ============================================================
   COLOR & SPACING DECLARATION
   ============================================================ */
:root {
  --primary: #323232;
  --secondary: #ffffff;
  --tertiary: #eee;
  --accent: #f35422;
  --text-color-light: rgba(50, 50, 50, 0.5);
  --stroke-color: rgba(50, 50, 50, 0.39);
  --stroke-color-lite: rgba(50, 50, 50, 0.3);
  --color-reset: transparent;

  --section-spacing: 100px 0;
  --section-spacing-higher: 150px 0;
  --content-spacing: 150px;

  --secondary-heading-size: 30px;
  --secondary-heading-height: 130%;
  --secondary-heading-weight: 600;
  --para-size: 18px;
  --para-height: 130%;
  --para-weight: 400;
  --title-weight: 500;

  --light-text-primary: 255 255 255;
  --dark-text-primary: #383838;

  --light-bg-primary: #ffffff;
  --dark-bg-primary: rgba(31, 31, 31, 1);
  /* --dark-bg-primary: #1a1a1a; */
}

/* ============================================================
   GENERAL
   ============================================================ */
* {
  font-family: "Manrope", sans-serif !important;
  box-sizing: border-box;
}
html {
  overflow-x: hidden;
}
body {
  margin: 0;
  max-width: 100vw;
  overflow-x: hidden;
}
img {
  max-width: 100%;
  display: block;
}
.container {
  max-width: 1440px;
  width: 90%;
  margin: 0 auto;
}
h1,
h2,
h3,
h4,
h5,
h6,
ul,
ol {
  margin: 0;
  padding: 0;
}

/* ============================================================
   HEADER
   ============================================================ */
.main-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 998;
  background: var(--secondary, #fff);
  transition:
    box-shadow 0.3s ease,
    padding 0.3s ease;
}

.main-header.scrolled {
  box-shadow: 0 2px 16px rgba(0, 0, 0, 0.08);
}

/* .main-header.scrolled .header-content {
  padding: 12px 0;
} */

.header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 5px 0 0 0;
  transition: padding 0.3s ease;
}
.nav-menu ul {
  display: flex;
  gap: 30px;
}
.nav-menu ul li {
  list-style: none;
}
.nav-menu ul li a {
  color: var(--primary);
  text-decoration: none;
  text-transform: uppercase;
  font-weight: 700;
  line-height: 100%;
  font-size: 18px;
  border-bottom: 1px solid var(--color-reset);
  transition: transform 0.25s ease, color 0.25s ease;
  display: inline-block;
  position: relative;
}

/* Animated underline */
.nav-menu ul li a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -7px;
    width: 100%;
    height: 2px;
    background: var(--primary);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform 0.25s ease;
}

.nav-menu ul li a:hover::after {
    transform: scaleX(1);
}

/* Hover effect */
.nav-menu ul li a:hover {
    transform: translateY(-2px);
}

.header-logo li {
  list-style: none;
}

/* Active menu item - Light theme */
.nav-menu ul li.current-menu-item > a,
.nav-menu ul li.current_page_item > a {
    font-weight: 900;
    position: relative;
}

.nav-menu ul li.current-menu-item > a::after,
.nav-menu ul li.current_page_item > a::after {
    /* width: 50%;
    left: 25%; */
    bottom: -7px;         
    transform: scaleX(1);
}
.nav-menu ul li.current-menu-item > a:hover,
.nav-menu ul li.current_page_item > a:hover {
    transform: none;
}

/* Dark theme */
body.dark-mode .nav-menu ul li a::after {
    background: #fff;
}

/* Respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce) {
    .nav-menu ul li a,
    .nav-menu ul li a::after {
        transition: none;
    }
}

/* HAMBURGER */
.menu-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  z-index: 1100;  
  position: relative;
}
.nav-mobile-header {
  display: none;
}
/* .nav-menu .menu-toggle {
  display: none !important;
} */
.menu-toggle span {
  width: 25px;
  height: 2px;
  background: #000;
  transition: 0.3s;
  display: block;
}

.menu-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  opacity: 0;
  visibility: hidden;
  transition: 0.3s;
  z-index: 999;
}
.menu-overlay.active {
  opacity: 1;
  visibility: visible;
}

/* ==========================================
   HOME PAGE START
   ========================================== */

/* ============================================================
   BANNER
   ============================================================ */
section.banner {
  padding-top: var(--content-spacing);
  padding-bottom: 0;
  position: relative;
  overflow: hidden;
}
h1.page-title {
  font-size: clamp(35px, 7vw, 86px);
  line-height: 110%;
  color: var(--primary);
  width: 90%;
  font-weight: var(--title-weight);
  margin-bottom: var(--content-spacing);
}

.page-title {
  opacity: 0;
  transform: translateX(-80px);
}

.bg-lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}
.bg-lines line {
  stroke: var(--stroke-color);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}
.line-text {
  position: absolute;
  left: 80%;
  top: 50%;
  transform: translate(-50%, -50%);
  padding: 0 20px;
  font-size: 16px;
  color: var(--text-color-light);
  white-space: nowrap;
  z-index: 0;
  pointer-events: none;
}
.banner .container {
  position: relative;
  z-index: 3;
}

/* ============================================================
   SLIDER
   ============================================================ */
.slider-wrapper {
  display: flex;
  align-items: flex-end;
  gap: 0;
  position: relative;
  z-index: 2;
}

/* LEFT COLUMN */
.image-slider-col {
  width: 60%;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow:0 20px 50px rgba(0,0,0,.2);
}

/* .image-slider {
    width: 100%;
} */
.image-slider {
  height: 512px;
  overflow: hidden;
  position: relative;
}

.image-slider .slick-list {
  height: 100% !important;
  overflow: hidden;
}

.image-slider .slick-track {
  height: 100% !important;
  display: flex !important; 
}

.image-slider .slick-slide {
  height: 100% !important; 
  overflow: hidden;
  position: relative;
  min-width: 0;
}

.image-slider .slick-slide > div {
  height: 100% !important;
  width: 100%;
  position: relative;
}

.image-slider .slick-slide img,
.image-slider .slick-slide video {
  position: absolute; 
  top: 0;
  left: 0;
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  object-fit: cover;
  object-position: center 20%;
  display: block;
}

.image-slider .slick-dots,
.content-slider .slick-dots {
  display: none !important;
}

/* Progress bar  full width of the image column, flush below image */
.slider-progress-bar {
  display: flex;
  width: 100%;
  gap: 0;
  align-items: center;
  height: 3px;
}

.progress-segment {
  flex: 1;
  height: 100%;
  background: rgba(50, 50, 50, 0.25);
  transition:
    height 0.3s ease,
    background 0.3s ease;
}
.progress-segment.active {
  background: #323232;
}

/*  RIGHT COLUMN  */
.content-slider-wrapper {
  width: 40%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 0 60px 0 40px;
  padding-bottom: 20px;
}
.content-slider-wrapper h2 {
  font-size: var(--secondary-heading-size);
  line-height: var(--secondary-heading-height);
  font-weight: var(--secondary-heading-weight);
  text-transform: uppercase;
  margin-bottom: 16px;
}
.content-slider-wrapper p {
  font-size: var(--para-size);
  font-weight: var(--para-weight);
  line-height: var(--para-height);
  color: var(--text-color-light);
  margin-bottom: 0;
}

/* Nav row: < 01/10 > */
.slider-nav {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 28px;
}
button.slick-prev.slick-arrow,
button.slick-next.slick-arrow {
  position: static !important;
  transform: none !important;
  width: auto;
  height: auto;
  background: transparent;
  border: none;
  cursor: pointer;
  line-height: 1;
  padding: 0;
}
.slick-prev:before {
  content: "<";
  font-size: 18px;
  color: var(--primary);
  opacity: 1;
}
.slick-next:before {
  content: ">";
  font-size: 18px;
  color: var(--primary);
  opacity: 1;
}
span.counter {
  font-size: 18px;
  line-height: 130%;
  white-space: nowrap;
  color: var(--primary);
}

/* ============================================================
   MARQUEE
   ============================================================ */
.marquee-track {
  position: absolute;
  bottom: 360px;
  left: 0;
  width: 200%;
  display: flex;
  gap: 0;
  white-space: nowrap;
  z-index: 0;
  pointer-events: none;
  animation: marqueeScroll 25s linear infinite;
  background: var(--primary);
  padding: 10px 0;
}
.marquee-track span {
  font-size: var(--para-size);
  text-transform: uppercase;
  color: var(--secondary);
  font-weight: var(--secondary-heading-weight);
  letter-spacing: 2px;
  padding: 0 30px;
}
@keyframes marqueeScroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

/* ============================================================
   ABOUT
   ============================================================ */
section.about-us {
  padding: 100px;
}
section.about-us .about-inner-container {
  margin: auto;
  width: 80%;
}
.about-text {
  opacity: 0;
  transform: translateX(-80px);
}

.about-btn {
  opacity: 0;
  transform: translateX(-40px);
}
section.about-us p {
  font-size: var(--secondary-heading-size);
  font-weight: var(--para-weight);
  line-height: 180%;
  color: var(--primary);
  margin: 0;
}
.about-us p a {
  color: var(--primary);
  text-decoration: none;
  border: 1px solid var(--primary);
  border-radius: 50px;
  padding: 0 20px;
  text-transform: uppercase;
  display: inline-block;
  font-size: var(--para-size);
  transition: all 0.3s ease-in-out;
}
.about-us p a:hover {
  color: var(--secondary);
  background: var(--primary);
}

/* ============================================================
   COUNTER
   ============================================================ */
/* layout */
.counters-wrapper {
  display: flex;
  justify-content: space-between;
  gap: 50px;
}

.increamental-counter {
  width: 100%;
}

/* number (bottom → up) */
.start-number {
  font-size: clamp(35px, 7vw, 86px);
  color: var(--primary);
  opacity: 0;
  transform: translateY(50px);
}

/* line wrapper */
.counter-text {
  position: relative;
  display: block;
  padding-top: 30px;
}

/* animated line (clean way) */
.counter-text::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 1px;
  width: 100%;
  background: var(--primary);

  transform: scaleX(var(--line-scale, 0));
  transform-origin: left;
}

/* text (top → down) */
.counter-text p {
  font-size: var(--secondary-heading-size);
  line-height: var(--secondary-heading-height);
  font-weight: var(--secondary-heading-weight);
  color: var(--primary);
  margin: 0;

  opacity: 0;
  transform: translateY(-30px);
}

/* ============================================================
   ABOUT CTA
   ============================================================ */
.about-cta {
  padding: var(--section-spacing);
}
.about-cta-text {
  opacity: 0;
  transform: translateY(80px);
}
.about-cta-button {
  white-space: nowrap;
}
.about-cta-button a {
  color: var(--primary);
  text-decoration: none;
  border: 1px solid var(--primary);
  border-radius: 40px;
  padding: 19px 26px;
  text-transform: uppercase;
  display: inline-block;
  font-size: var(--para-size);
  transition: all 0.3s ease-in-out;
}
.about-cta-button a:hover {
  color: var(--secondary);
  background: var(--primary);
}
.about-cta-text {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 30px;
}
.about-cta-text p {
  margin: 0;
  font-size: var(--para-size);
  font-weight: var(--para-weight);
  line-height: var(--para-height);
  color: var(--primary);
}

/* ============================================================
   WHAT WE DO
   ============================================================ */
.wwd-section {
  padding-bottom: 120px;
}
.wwd-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: start;
}
.section-label {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 32px;
}
.section-label-line {
  width: 60px;
  height: 1px;
  background: var(--primary);
}
.section-label span {
  font-size: 30px;
  font-weight: 400;
  line-height: 43px;
  color: var(--primary);
  text-transform: uppercase;
}
.accordion-item {
  cursor: pointer;
}
.accordion-header {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 0;
}
.acc-num {
  font-size: 18px;
  color: var(--text-color-light);
  font-weight: 600;
  min-width: 20px;
  line-height: 28px;
}
.acc-title {
  font-size: 50px;
  font-weight: var(--title-weight);
  color: var(--text-color-light);
  transition: all 0.3s;
  line-height: 100%;
}
.accordion-item.active .acc-title {
  color: var(--primary);
  font-weight: var(--secondary-heading-weight);
}
.accordion-item.active .acc-num {
  color: var(--primary);
}
.wwd-right {
  overflow: hidden;
  position: relative;
  top: 40px;
  display: flex;
  flex-direction: column;
}
.wwd-right-spacer {
  height: 80px;
  flex-shrink: 0;
}
.content-panel {
  opacity: 0;
  pointer-events: none;
  position: absolute;
  width: 100%;
  top: 0;
  left: 0;
}
.content-panel.active {
  pointer-events: auto;
  position: relative;
}
.panel-image {
  width: 100%;
  margin-bottom: 24px;
}

.panel-image img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 6px;
  object-fit: cover;
}
.tags-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 40px;
}
.tag {
  border: 0.5px solid rgba(50, 50, 50, 0.1);
  border-radius: 60px;
  padding: 18px 20px;
  font-size: 18px;
  color: var(--primary);
  font-weight: 400;
  background: rgba(50, 50, 50, 0.1);
}
.content-desc {
  font-size: var(--para-size);
  line-height: var(--para-height);
  color: rgba(50, 50, 50, 1);
  margin-bottom: 0;
  font-weight: var(--para-weight);
}
.learn-more-btn {
  display: inline-block;
  border: 1px solid var(--primary);
  border-radius: 40px;
  padding: 19px 26px;
  font-size: 18px;
  font-weight: 400;
  text-decoration: none;
  text-transform: uppercase;
  color: var(--primary);
  cursor: pointer;
  background: transparent;
  transition: all 0.2s;
}
.learn-more-btn:hover {
  background: var(--primary);
  color: var(--secondary);
}
.btn-divider {
  width: 100%;
  height: 0.5px;
  background: var(--stroke-color-lite);
  margin-top: 18px;
}
.panel-bottom {
  margin-top: auto;
  padding-top: 48px;
}

/* ============================================================
   Video Section
   ============================================================ */

/* LEFT IMAGE */
.bc-media {
  width: 100%;
  height: 600px;
  position: relative;
  overflow: hidden;
}

.bc-video {
    width: 100%;
    height: 600px;
    object-fit: cover;
    object-position: center 40%;
}

/* ============================================================
   Client Section
   ============================================================ */

.clients-section {
  background: rgba(50, 50, 50, 0.1);
  padding: 100px 0;
}

/* HEADER */
.clients-header {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 60px;
  flex-wrap: nowrap;
}

.clients-header .line {
  width: 60px;
  height: 1px;
  background: var(--primary);
  opacity: 0.5;
  flex-shrink: 0;
}

.clients-header h2 {
  font-size: 30px;
  font-weight: 400;
  letter-spacing: 0%;
  color: var(--primary);
  line-height: 43px;
  text-transform: uppercase;
  position: relative;
  padding-left: 80px;
}

/* DASH / LINE */
.clients-header h2::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);

  width: 60px;
  height: 1px;
  background: var(--primary);
  opacity: 0.5;
}

/* LOGO GRID */
.collabs {
  padding-top: 100px;
}

.partnered-with {
  padding-top: 100px;
}

.clients-logos {
  display: flex;
  flex-wrap: wrap;
  gap: 30px 60px;
  justify-content: center;
  text-align: center;
  min-height: 100px;
}

/* LOGO ITEM */
.clients-logos img {
  max-height: 60px;
  width: auto;
  object-fit: contain;
  opacity: 0.8;
  transition: 0.3s;
  display: block;
  margin: 0 auto;
  will-change: opacity, transform;
}

.clients-logos img:hover {
  opacity: 1;
  transform: scale(1.05);
}

/* ============================================================
   SUCCESSFUL CELEBRITY SECTION
   ============================================================ */
.celebrity-section {
  padding: 100px 0;
}

.celebrity-section,
.celebrity-track-wrapper {
  overflow: hidden;
}

/* HEADER */
.celebrity-header h2 {
  font-size: 30px;
  font-weight: 400;
  color: var(--primary);
  text-transform: uppercase;
  line-height: 43px;
  letter-spacing: 0%;
  position: relative;
  padding-left: 80px;
  margin-bottom: 50px;
}

/* LINE */
.celebrity-header h2::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 60px;
  height: 1px;
  background: rgba(67, 96, 121, 1);
  opacity: 0.5;
}

.celebrity-section .container {
  overflow: hidden;
}

/* SLIDER */
.celebrity-slider {
  overflow: hidden;
  position: relative;
}

.celebrity-track {
  display: flex;
  gap: 20px;
  will-change: transform;
}

/* CARD - 3 visible at once on desktop */
.celebrity-card {
  flex: 0 0 calc(33.333% - 14px);
}

.celebrity-card img {
  width: 100%;
  height: 480px;
  object-fit: cover;
  display: block;
  object-position: top;
  transition: transform 0.4s ease;
  box-shadow:
    0px -2px 6px rgba(0, 0, 0, 0.08),
    0px 4px 4px rgba(0, 0, 0, 0.25);
}

.celebrity-card:hover img {
  transform: scale(1.05);
}

/* CONTENT */
.celebrity-content {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.celebrity-content h4 {
  font-size: 30px;
  font-weight: 400;
  line-height: 100%;
  margin: 8px 0;
  letter-spacing: 0%;
  text-transform: uppercase;
}

/* ============================================================
   CONTACT SECTION
   ============================================================ */
.contact-section {
  padding-bottom: 100px;
}

/* TITLE */
.contact-title {
  text-align: center;
  font-size: 48px;
  font-weight: 600;
  line-height: 63px;
  margin-bottom: 50px;
  letter-spacing: 0%;
  color: var(--primary);
}

/* LAYOUT */
.contact-row {
  display: flex;
  gap: 30px;
}

/* LEFT */
.form-left {
  width: 50%;
}

.form-group {
  margin-bottom: 25px;
}

.form-group input,
.form-group textarea {
  width: 100%;
  border: none;
  border-bottom: 1px solid var(--stroke-color);
  padding: 10px 0;
  font-size: var(--para-size);
  background: transparent;
  font-weight: 400;
  line-height: 28px;
  letter-spacing: 0%;
  outline: none;
}

.form-group textarea {
  height: 80px;
  resize: none;
}

/* RIGHT */
.form-right {
  width: 50%;
}

.form-label {
  font-size: 14px;
  margin-bottom: 15px;
  display: block;
  color: var(--primary);
}

/* CHIPS */
.checkbox-group {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.chip {
  position: relative;
  cursor: pointer;
}

.chip input {
  display: none;
}

.chip span {
  display: inline-block;
  padding: 10px 18px;
  border-radius: 30px;
  background: rgba(50, 50, 50, 0.1);
  font-size: 18px;
  font-weight: 400;
  transition: 0.3s;
  line-height: 100%;
  letter-spacing: -2%;
}

/* ACTIVE STATE */
.chip input:checked + span {
  background: var(--primary);
  color: #fff;
}

/* BUTTON */
.form-submit {
  text-align: center;
  margin-top: 40px;
}

.form-submit button {
  border: 1px solid var(--primary);
  padding: 10px 30px;
  border-radius: 30px;
  background: transparent;
  cursor: pointer;
  transition: 0.3s;
}

.form-submit button:hover {
  background: var(--primary);
  color: #fff;
}

/* ============================================================
   QUOTE SECTION
   ============================================================ */

.quote-section {
  padding: 100px 0px;
}

.inner-quote {
  width: 90%;
  margin-left: 0;
}

/* REMOVE RIGHT GAP ISSUE */
.quote-box {
  position: relative;
  width: 100%;
  /* max-width: 1134px; */
  margin: 0 auto;
}

/* TEXT */
.quote-text {
  font-size: 70px;
  line-height: 92px;
  font-weight: 400;
  margin: 0;
  width: 100%;
}

.quote-line {
  display: block;
  width: 100%;
  position: relative;
  color: rgba(50, 50, 50, 0.2);
  background: linear-gradient(
    to right,
    #000 0%,
    #000 var(--fill, 0%),
    rgba(50, 50, 50, 0.2) var(--fill, 0%)
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* QUOTE IMAGES */
.quote-img {
  position: absolute;
  width: 76px;
  height: auto;
}

/* TOP LEFT */
.quote-left {
  top: -90px;
  left: 0px;
}

/* BOTTOM RIGHT */
.quote-right {
  bottom: -90px;
  right: 0px;
}

.inner-quote {
  max-width: 1134px;
  width: 100%;
  margin: 0 auto;
}

.quote-text .word {
  display: inline-block;
}

/* ============================================================
   OUR WORK SECTION
   ============================================================ */

.work-section {
  padding: 100px 0px;
}

/* HEADER */
.section-header {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 40px;
}

.section-header .line {
  width: 60px;
  height: 1px;
  background: rgba(50, 50, 50, 1);
}

.section-header h3 {
  font-size: 30px;
  letter-spacing: 0%;
  font-weight: 400;
  line-height: 43px;
}

/* GRID */
.work-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px;
}

/* CARD */
.work-card {
  will-change: transform;
  overflow: hidden;
}

.work-card video,
.work-card img {
  width: 100%;
  aspect-ratio: 288 / 409;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
}

.work-card:hover img {
  transform: scale(1.05);
}

/* CONTENT */
.work-content {
  margin-top: 20px;
}

/* NUMBER */
.work-number {
  display: inline-flex;
  width: 50px;
  height: 50px;
  background: #333;
  color: #fff;
  border-radius: 50%;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  margin-top: 10px;
  margin-bottom: 10px;
}

/* TITLE */
.work-content h4 {
  font-size: 20px;
  font-weight: 400;
  line-height: 27px;
  letter-spacing: 0%;
  margin: 8px 0;
}

/* TEXT */
.work-content p {
  font-size: 18px;
  color: rgba(50, 50, 50, 0.5);
  line-height: 25px;
  letter-spacing: 0%;
  font-weight: 400;
}

/* CTA */
.work-cta {
  margin-top: 50px;
}

.btn-outline {
  display: inline-block;
  padding: 19px 26px;
  border: 1px solid rgba(50, 50, 50, 1);
  border-radius: 40px;
  font-size: 18px;
  line-height: 100%;
  font-weight: 400;
  letter-spacing: -2%;
  text-decoration: none;
  color: rgba(50, 50, 50, 1);
  transition: 0.3s;
}

.btn-outline:hover {
  background: var(--primary);
  color: #fff;
}

/* Modal Css */
/* Work card image wrap */
.work-img-wrap {
    position: relative;
    display: block;
    width: 100%;
    overflow: hidden;
    cursor: zoom-in;
}

.work-img-wrap img {
    width: 100%;
    height: 100%;
    padding: 8px;
    object-fit: cover;
    display: block;
}

.term-media-planning-pr .work-img-wrap img {
  object-position: 25% 50%;
}

.work-img-wrap .wwd-expand-btn {
    position: absolute;
    bottom: 10px;
    right: 10px;
    width: 30px;
    height: 30px;
    background: rgba(0, 0, 0, 0.55);
    border: none;
    border-radius: 3px;
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px;
    opacity: 0;
    transition: opacity 0.2s ease;
    z-index: 5;
    pointer-events: auto;
}

.work-img-wrap:hover .wwd-expand-btn {
    opacity: 1;
}

.work-img-wrap .wwd-expand-btn svg {
    width: 14px;
    height: 14px;
    display: block;
    flex-shrink: 0;
}

/* ============================================================
   FAQ SECTION
   ============================================================ */

.faq-section {
  padding-bottom: 100px;
}

/* ITEM  */
.faq-item {
  border-bottom: 1px solid rgba(50, 50, 50, 0.1);
  transition:
    background 0.35s ease,
    padding 0.35s ease;
  cursor: pointer;
}

/* Dark-mode border override */
body.dark-mode .faq-item {
  border-color: rgb(46, 46, 46) !important;
}

.faq-item:not(.active) {
  padding: 28px 0;
}

.faq-item.active {
  background: rgba(50, 50, 50, 0.08);
  padding: 50px 30px;
  cursor: default;
}

/*  ROW  */
.faq-row {
  display: flex;
  gap: 30px;
  align-items: flex-start;
}

/*  NUMBER  */
.faq-number {
  font-size: 14px;
  color: rgba(50, 50, 50, 0.45);
  width: 40px;
  flex-shrink: 0;
  padding-top: 10px;
}

/*  IMAGE  */
.faq-image {
  width: 448px;
  flex-shrink: 0;
  border-radius: 4px;
  overflow: hidden;
  opacity: 0;
  transition: none;
}

.faq-image img {
  width: 100%;
  height: 250px;
  object-fit: cover;
  object-position: top;
  border-radius: 4px;
  display: block;
}

/* CONTENT */
.faq-content {
  flex: 1;
  min-width: 0;
}

/* HEADER */
.faq-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
}

.faq-header h3 {
  margin: 0;
  font-weight: 400;
  letter-spacing: -1px;
  line-height: 1.1;
  font-size: 50px;
}

/* TOGGLE BUTTON  */
.faq-toggle {
  width: 44px;
  height: 44px;
  min-width: 44px;
  border-radius: 50%;
  background: #333;
  color: #fff;
  font-size: 24px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
  transition:
    background 0.2s ease,
    transform 0.25s ease;
  user-select: none;
}

.faq-toggle:hover {
  background: var(--primary, #555);
}

/* Subtle rotation hint on icon swap */
.faq-icon {
  display: inline-block;
  transition: transform 0.25s ease;
  line-height: 1;
}

.faq-item.active .faq-icon {
  transform: rotate(0deg);
}

/* DESCRIPTION */
.faq-desc {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  margin-top: 0;
  font-size: 18px;
  line-height: 25px;
  color: rgba(50, 50, 50, 0.5);
  max-width: 580px;
  transition:
    max-height 0.45s ease,
    opacity 0.35s ease,
    margin-top 0.35s ease;
}

.faq-item.active .faq-desc {
  max-height: 600px; 
  opacity: 1;
  margin-top: 20px;
}


/* ==========================================
   HOME PAGE END
   ========================================== */

/* ============================================================
   FOOTER START
   ============================================================ */
.site-footer {
  background: var(--primary);
  padding: 80px 0 0 0;
}

/* TOP BLOCK */
.footer-top {
  padding-bottom: 60px;
}

.footer-heading {
  font-size: clamp(32px, 5vw, 50px);
  font-weight: 400;
  color: var(--secondary);
  line-height: 60px;
  letter-spacing: 0%;
  margin-bottom: 24px;
}

.footer-talk-btn {
  display: inline-block;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 40px;
  padding: 19px 26px;
  font-size: 18px;
  font-weight: 400;
  color: rgba(255, 255, 255, 1);
  text-decoration: none;
  line-height: 100%;
  text-transform: uppercase;
  letter-spacing: -2%;
  transition: all 0.3s ease;
}

.footer-talk-btn:hover {
  background: var(--secondary);
  color: var(--primary);
  border-color: var(--secondary);
}

.footer-email {
  display: block;
  font-size: 50px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.5);
  text-decoration: none;
  line-height: 100%;
  letter-spacing: -2%;
  transition: color 0.3s ease;
  margin-top: 24px;
}

.footer-email:hover {
  color: rgba(255, 255, 255, 0.8);
}

/* DIVIDER */
.footer-divider {
  width: 100%;
  height: 1px;
  background: rgba(255, 255, 255, 0.15);
}

/* NAV COLUMNS */
.footer-nav {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px;
  padding: 60px 0;
}

.footer-col-title {
  font-size: 20px;
  font-weight: 600;
  color: var(--secondary);
  text-transform: uppercase;
  letter-spacing: 0%;
  line-height: 32px;
  margin-bottom: 24px;
}

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

.footer-col ul li a {
  font-size: var(--para-size);
  font-weight: var(--para-weight);
  color: rgba(255, 255, 255, 1);
  text-decoration: none;
  letter-spacing: -2%;
  line-height: 100%;
  transition: color 0.25s ease;
}

.footer-col ul li a:hover {
  color: rgba(255, 255, 255, 0.5);
}

.footer-col address {
  font-style: normal;
  font-size: var(--para-size);
  font-weight: var(--para-weight);
  color: rgba(255, 255, 255, 1);
  line-height: 130%;
  letter-spacing: -2%;
}

/* BOTTOM BAR */
.footer-bottom {
  /* border-top: 1px solid rgba(255, 255, 255, 0.15); */
  padding: 24px 0;
}

.footer-bottom p {
  font-size: 18px;
  font-weight: 400;
  color: rgba(255, 255, 255, 1);
  text-align: center;
  line-height: 100%;
  letter-spacing: 0%;
}

.footer-bottom a {
  text-decoration: none;
  color: rgba(255, 255, 255, 1);
}

/* ==========================================
   FOOTER END
   ========================================== */

/* ==========================================
   CONTACT PAGE START
   ========================================== */
.contact-banner {
  padding: var(--section-spacing-higher);
  text-align: center;
}

.contact-banner h1,
.contact-banner .subtitle,
.contact-banner .description {
  opacity: 0;
  transform: translateY(40px);
}

/* CONTENT WRAPPER */
.contact-banner__content {
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* TITLE */
.contact-banner h1 {
  width: 1175px;
  max-width: 100%;
  font-size: 86px;
  font-weight: 500;
  line-height: 84px;
  color: var(--primary);
  margin-bottom: 30px;
}

.contact-banner .inr-banner-content {
  width: 1076px;
  max-width: 80%;
}

.contact-banner .subtitle {
  margin-bottom: 20px !important;
}

/* SUBTITLE (First paragraph) */
.contact-banner .subtitle,
.contact-banner .description {
  text-align: center;
  font-size: 30px;
  font-weight: 400;
  line-height: 43px;
  color: var(--primary);
  margin: 0 auto;
}

/* Marquee Section */
.contact-marquee-section {
  padding-bottom: 100px;
}

/* LIST */
.contact-marquee {
  overflow: hidden;
}

.contact-marquee-track {
  display: flex;
  gap: 50px;
  width: max-content;
  animation: celebrityMarquee 60s linear infinite;
}

.contact-marquee-track span {
  white-space: nowrap;
  font-size: var(--para-size);
  color: var(--text-color-light);
}

span.contact-marquee-list {
  font-size: 100px;
  line-height: 100%;
  font-weight: 400;
  letter-spacing: -2%;
  color: rgba(50, 50, 50, 1);
}

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

/* Map Section */
.contact-map {
  padding-bottom: 200px;
}

.contact-map__inner {
  position: relative;
  width: fit-content;
  margin: 0 auto;
}

.contact-map__wrapper {
  width: 747px;
  height: 527px;
}

/* IFRAME */
.contact-map__wrapper iframe {
  filter: grayscale(100%);
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* LOCATION TEXT */
.contact-map__info {
  position: absolute;
  right: -130px;
  bottom: -105px;
  max-width: 140px;
}

/* LINE */
.contact-map__info .line {
  display: block;
  width: 40px;
  height: 1px;
  background: var(--primary);
  margin-bottom: 12px;
}

/* TEXT */
.contact-map__info p {
  font-size: 18px;
  font-weight: 400;
  line-height: 130%;
  letter-spacing: -2%;
  color: rgba(131, 131, 131, 1);
  margin: 0;
}

/* ==========================================
   CONTACT PAGE END
   ========================================== */

/* ==========================================
   CLIENTS PAGE START
   ========================================== */
/* Heading */
.page-title.client-page {
  margin-bottom: 30px;
}

.learn-more-btn.client-page {
  margin-bottom: 100px;
}

/* Marquee track */
.inner-marquee-track {
  position: unset;
  bottom: 420px;
  left: 0;
  width: 200%;
  display: flex;
  gap: 0;
  white-space: nowrap;
  z-index: 0;
  pointer-events: none;
  animation: marqueeScroll 25s linear infinite;
  background: var(--primary);
  padding: 10px 0;
}
.inner-marquee-track span {
  font-size: var(--para-size);
  text-transform: uppercase;
  color: var(--secondary);
  font-weight: var(--secondary-heading-weight);
  letter-spacing: 2px;
  padding: 0 30px;
}
@keyframes marqueeScroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

/* Counter Sec */
section.clients-counters {
  padding-top: 100px;
}

.clients-start-number {
  font-size: clamp(35px, 7vw, 86px);
  color: var(--primary);
}

.counter-suffix {
  opacity: 0;
  transform: translateY(5px);
  transition: all 0.4s ease;
  display: inline-block;
}

.counter-suffix.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Quote Section */
.quote-section.clients-page {
  padding-bottom: 200px;
}

/* ==========================================
   CLIENTS PAGE END
   ========================================== */

/* ================================================================
   OUR WORKS PAGE START
================================================================ */

.lb-works-section {
  background: #ffffff;
  min-height: 100vh;
  padding: 50px 0 100px;
  font-family: "Manrope", sans-serif;
}

.lb-page-header {
  min-height: 200px;
  display: flex;
  align-items: center;
  padding: 80px 0 40px;
}

.lb-all-tab-header{
  display: flex;
  flex-direction: column;
  margin-bottom: 20px;
}

.lb-cat-header {
  opacity: 0;
  padding: 0;
}
.lb-cat-header h2, .lb-main-title {
  font-family: "Manrope", sans-serif;
  font-size: clamp(30px, 4.5vw, 48px);
  font-weight: 700;
  color: #323232;
  margin: 0 0 16px;
  line-height: 1.15;
  letter-spacing: 0%;
}

.lb-cat-header p, .lb-main-desc {
  font-family: "Manrope", sans-serif;
  font-size: 18px;
  color: rgba(50, 50, 50, 0.5);
  max-width: 660px;
  line-height: 1.75;
  margin: 0;
}

.lb-filter-bar .lb-filter-btn:first-child {
  padding-left: 0;
}

/* FILTER BAR */
.lb-filter-outer {
  position: sticky;
  top: 0;
  overflow-x: hidden;
  overflow-y: visible;
  width: 100%;
  z-index: 100;
}
.lb-filter-bar {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
  gap: 12px;
  padding-bottom: 8px;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.lb-filter-bar::-webkit-scrollbar {
  display: none;
}

.lb-filter-btn {
  display: inline-block;
  padding: 18px 22px;
  font-size: 30px;
  font-weight: 400;
  letter-spacing: 0.02em;
  color: rgba(50, 50, 50, 0.4);
  cursor: pointer;
  background: none;
  border: none;
  position: relative;
  transition: color 0.2s;
  flex-shrink: 0;
  white-space: nowrap;
}
/* .lb-filter-btn::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0; right: 0;
  height: 1.5px;
  background: transparent;
  transition: background 0.25s;
} */

.lb-filter-btn:hover {
  color: rgba(50, 50, 50, 0.75);
}
.lb-filter-btn.active {
  color: #323232;
  font-weight: 600;
}
.lb-filter-btn.active::after {
  background: #323232;
}

/* ================= WORKS GRID (3 col, equal cards) ================= */

.lb-works-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: 30px;
  row-gap: 56px;
  margin-top: 48px;
  align-items: start;
}

.lb-work-item {
  display: block;
  min-width: 0;
}
.lb-work-item.hidden {
  display: none;
}

/* Card */
.lb-work-inner {
  display: flex;
  flex-direction: column;
  gap: 30px; /* Figma frame gap */
  text-decoration: none;
  overflow: hidden;
  opacity: 0; /* keep: your JS reveals it */
}
.lb-work-inner:hover .lb-work-img {
  transform: scale(1.04);
}

/* Media (same size for every card) */
.lb-work-img {
  width: 100%;
  aspect-ratio: 393 / 450;
  background: #e8e8e8 center / cover no-repeat;
  display: block;
  overflow: hidden;
  position: relative;
  transition: transform 0.55s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.15);
}

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

/* Info */
.lb-work-info {
  padding: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.lb-work-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  flex-shrink: 0;
  background: #323232;
  border-radius: 50%;
  font-family: "Manrope", sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: #ffffff;
  margin-bottom: 20px;
  letter-spacing: 0.02em;
}
.lb-work-info h3 {
  font-family: "Manrope", sans-serif;
  font-size: 20px;
  font-weight: 400;
  text-transform: uppercase;
  color: #323232;
  margin: 0 0 10px;
  line-height: 28px;
}
.lb-work-info p,
.lb-work-info .lb-work-cat {
  font-family: "Manrope", sans-serif;
  font-size: 18px;
  font-weight: 400;
  color: #32323280;
  margin: 0;
  line-height: 25px;
}

/* SHOW MORE button */
.lb-showmore-wrap {
  display: flex;
  justify-content: center;
  padding: 20px 0 0;
  margin-top: 20px;
}
.lb-showmore-btn {
  display: inline-block;
  padding: 19px 26px;
  border: 1px solid rgba(50, 50, 50, 1);
  border-radius: 40px;

  background: transparent;
  cursor: pointer;

  font-family: "Manrope", sans-serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 100%;
  letter-spacing: -0.2px;
  text-transform: uppercase;

  color: rgba(50, 50, 50, 1);

  transition: all 0.3s ease;
}
.lb-showmore-text {
  position: static;
  font-size: inherit;
  font-weight: inherit;
  color: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
}
.lb-showmore-btn:hover {
  background: rgba(50, 50, 50, 1);
  color: #fff;
}

/* Posts section modal image */
.lb-work-img img:fullscreen {
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: #000;
}

/* Safari */
.lb-work-img img:-webkit-full-screen {
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: #000;
}

/* Our work sec */
.wwd-section.our-work {
  padding-top: 100px;
}

/* Clebrity seeding sec */
.celebrity-section.our-work {
  padding-top: unset;
}


/* ================================================================
   OUR WORK PAGE END
   ================================================================ */

/* ================================================================
   ABOUT PAGE START
   ================================================================ */

/* About Sec Below Small Text  */
p.about-not-just-explore {
  font-family: Manrope;
  font-weight: 400;
  font-style: Regular;
  font-size: 18px !important;
  line-height: 28px;
  letter-spacing: 0%;
  color: #323232;
  padding-top: 20px !important;
}

/* Video Sec */

.beyond-campaign {
  padding-top: 0px;
  padding-bottom: 100px;
  padding-left: 0;
}

/* WRAPPER */
.bc-wrapper {
  display: flex;
  gap: 30px;
  max-width: 1340px;
  margin-left: 0;
  margin-right: auto;
  align-items: center;
}

.bc-media,
.bc-content {
  overflow: hidden;
}

/* LEFT IMAGE */
.about-page .bc-media {
  width: 811px;
  height: 500px;
  position: relative;
  overflow: hidden;
}

.about-page .bc-video {
    width: 100%;
    height: 500px;
    object-fit: cover;
    object-position: center 40%;
}

.beyond-campaign .bc-video:fullscreen {
    object-fit: contain !important;
    width: 100vw !important;
    height: 100vh !important;
}

.beyond-campaign .bc-video:-webkit-full-screen {
    object-fit: contain !important;
    width: 100vw !important;
    height: 100vh !important;
}

/* PLAY BUTTON */
.play-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 96px;
  height: 96px;
  background: rgb(157 151 151 / 25%);
  backdrop-filter: blur(7px);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  color: white;
  cursor: pointer;
  transition: 0.3s;
}

.play-btn:hover {
  transform: translate(-50%, -50%) scale(1.1);
}

.fullscreen-btn {
    position: absolute;
    bottom: 10px;
    right: 10px;
    background: rgba(0, 0, 0, 0.5);
    color: #fff;
    border: none;
    border-radius: 4px;
    width: 25px;
    height: 25px;
    font-size: 15px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    transition: background 0.2s ease;
    line-height: 1;
}

.fullscreen-btn:hover {
    background: rgba(0, 0, 0, 0.8);
}

/* RIGHT CONTENT */
.bc-content {
  width: calc(100% - 811px);
}

.bc-content h2 {
  font-size: 48px;
  line-height: var(--secondary-heading-height);
  font-weight: var(--secondary-heading-weight);
  color: var(--primary);
  margin-bottom: 20px;
}

.bc-content p {
  font-size: var(--para-size);
  line-height: 28px;
  font-weight: var(--para-weight);
  color: #323232;
}

/* Below Video Text Section */
.about-us.below-video-text-sec {
  padding-top: 0px;
  padding-bottom: 100px;
}

section.below-video-text-sec p {
  max-width: 500px;
}

/* Counter Section */
section.clients-counters.about-page {
  padding-top: 0px;
  padding-bottom: 100px;
}

/*Process - Section*/
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/*  Section Wrapper  */
.process-section {
  max-width: 100%;
  margin: 0;
  padding: 100px 0px;
}

/*  Label  */
.section-label {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 50px;
  padding-left: 12px;
}

.label-dash {
  display: block;
  width: 36px;
  height: 1px;
  background: #1a1a1a;
}

.label-text {
  font-size: 13px;
  font-weight: 400;
  color: #1a1a1a;
  letter-spacing: 0.02em;
}

/*  Steps Wrapper  */
.steps-wrap {
  position: relative;
  max-width: 950px;
  margin: 0 auto;
  padding: 0 48px;
}

/*  Single Step  */
.step {
  margin-bottom: 100px;
}

.step:last-child {
  margin-bottom: 0;
}

/*  Step Track (circle + body row)  */
.step-track {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 20px;
}

.step-odd .step-track {
  margin-left: 16%;
}
.step-even .step-track {
  margin-left: 43%;
}

/*  Circle  */
.step-num {
  flex-shrink: 0;
  width: 76px;
  height: 76px;
  border-radius: 50%;
  border: 1px solid #ccc;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
  font-weight: 400;
  letter-spacing: 0.04em;
  color: #323232;
  background: #ebebeb;
}

/*  Step Body  */
.step-body {
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding-top: 60px;
  max-width: 499px;
}

/*  Title  */
.step-title {
  font-family: Manrope;
  font-weight: 600;
  font-size: 48px;
  line-height: 63px;
  letter-spacing: 0%;
  color: #323232 !important;
}

/*  Description  */
.step-desc {
  font-family: Manrope;
  font-weight: 400;
  font-size: 18px;
  line-height: 28px;
  letter-spacing: 0%;
  color: #323232;
}

/* Process - Section END */

/* ================================================================
   ABOUT PAGE END
   ================================================================ */

/* ================================================================
   WHAT WE DO PAGE START
   ================================================================ */

/* ---------- Size variables (one place to control every breakpoint) ---------- */
.wwd-section.what-we-do-page,
.what-we-do-page.celebrity-section {
    --wwd-panel-h: 480px;     /* What We Do right-side media */
    --celeb-w: 440px;         /* celebrity slider card */
    --celeb-h: 620px;
    --celeb-radius: 0px;
}

/* What We Do Section */
.wwd-section.what-we-do-page {
    padding-bottom: 35px;
}

/* Counter Section */
.page-id-446 .clients-counters.what-we-do-page {
    padding-bottom: 100px;
}

/* ================================================================
   WHAT WE DO — Panel Media (Video + Image)
================================================================ */
.wwd-section .panel-media {
    width: 100%;
    height: 480px;
    overflow: hidden;
    position: relative;
    margin-bottom: 20px;
    border-radius: 8px;
}

.wwd-section .panel-media img {
    width: 100%;
    height: 480px;
    object-fit: cover;
    display: block;
}

.wwd-section .panel-media video {
    width: 100%;
    height: 480px;
    /* object-fit: cover; */
    object-position: center 20%;
}

.wwd-section .panel-media video:fullscreen {
    object-fit: contain !important;
    width: 100vw !important;
    height: 100vh !important;
}
.wwd-section .panel-media video:-webkit-full-screen {
    object-fit: contain !important;
    width: 100vw !important;
    height: 100vh !important;
}

/* ================================================================
   CELEBRITY SECTION — Cards (Video + Image)
================================================================ */
.what-we-do-page.celebrity-section .celebrity-card {
    width: var(--celeb-w);
    min-width: var(--celeb-w);
    height: var(--celeb-h);
    overflow: hidden;
    position: relative;
    flex-shrink: 0;
    /* background: #000; */
    /* border: 1px solid rgba(128, 128, 128, 0.35);    */
}

/* Images and videos fill the card */
.what-we-do-page.celebrity-section .celebrity-card img,
.what-we-do-page.celebrity-section .celebrity-card video {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

/* Only video cards get the dark frame */
/* .what-we-do-page.celebrity-section .celeb-video-wrap {
    background: #000;
    border: 1px solid rgba(128, 128, 128, 0.35);
} */

.what-we-do-page.celebrity-section .celebrity-card .celebrity-content h4 {
  display: none !important;
}

.what-we-do-page.celebrity-section .celebrity-card video {
    background: #000;
}

.what-we-do-page.celebrity-section .celebrity-card video:fullscreen {
    object-fit: contain !important;
    width: 100vw !important;
    height: 100vh !important;
}
.what-we-do-page.celebrity-section .celebrity-card video:-webkit-full-screen {
    object-fit: contain !important;
    width: 100vw !important;
    height: 100vh !important;
}

/* Video wrapper fills the card */
.what-we-do-page.celebrity-section .celebrity-card .celeb-video-wrap.panel-media {
    display: block;
    position: relative;
    width: 100%;
    height: 100%;
    margin: 0;
    border-radius: 0;
    overflow: hidden;
    background: #000;
}

/* Keep celebrity content overlay in place */
.what-we-do-page.celebrity-section .celebrity-content,
.what-we-do-page.celebrity-section .celebrity-contents {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    pointer-events: none;
}

.celebrity-empty {
    padding: 40px 20px;
    text-align: center;
    color: #999;
    font-size: 18px;
    width: 100%;
}

/* ---------- Slider pointer events ---------- */
.celebrity-track {
    pointer-events: none;
}
.celebrity-track .celebrity-card,
.celebrity-track .celeb-video-wrap,
.celebrity-track .celeb-video {
    pointer-events: auto;
}
.celebrity-track .celeb-video-wrap {
    cursor: pointer;
}
.celebrity-track .celeb-play-btn {
    cursor: pointer;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
}

/* ================================================================
   EXPAND BUTTON + MODAL (shared)
================================================================ */
.panel-media {
    position: relative;
    display: inline-block;
    width: 100%;
}

/* Expand icon button: bottom right */
.wwd-expand-btn {
    position: absolute;
    bottom: 10px;
    right: 10px;
    width: 30px;
    height: 30px;
    background: rgba(0, 0, 0, 0.55);
    border: none;
    border-radius: 3px;
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px;
    opacity: 0;
    transition: opacity 0.2s ease;
    z-index: 5;
    pointer-events: auto;
}
.panel-media:hover .wwd-expand-btn,
.lb-work-img:hover .wwd-expand-btn {
    opacity: 1;
}
.wwd-expand-btn svg {
    width: 15px;
    height: 15px;
    display: block;
}

/* Touch devices have no hover: always show the button */
@media (hover: none) {
    .wwd-expand-btn,
    .celeb-img-wrap .wwd-expand-btn {
        opacity: 1;
    }
}

/* Modal */
.wwd-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9999;
    align-items: center;
    justify-content: center;
}
.wwd-modal.is-open {
    display: flex;
}

.wwd-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.88);
    cursor: pointer;
}

.wwd-modal-inner {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 100%;
}

.wwd-modal-content img {
    max-width: 90vw;
    max-height: 88vh;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
    border-radius: 4px;
}

.wwd-modal-video {
    display: block;
    width: auto;
    height: auto;
    max-width: 92vw;
    max-height: 85vh;
    object-fit: contain;
    background: #000;
}

.wwd-modal-close {
    position: absolute;
    top: -44px;
    right: 0;
    background: none;
    border: none;
    color: #fff;
    font-size: 38px;
    line-height: 1;
    cursor: pointer;
    padding: 0;
    opacity: 0.75;
    transition: opacity 0.2s;
}
.wwd-modal-close:hover {
    opacity: 1;
}

/* ================================================================
   CELEBRITY IMAGE CARDS
================================================================ */
.celeb-img-wrap {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    cursor: zoom-in;
}

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

.celeb-img-wrap .wwd-expand-btn {
    position: absolute;
    bottom: 10px;
    right: 15px;
    width: 30px;
    height: 30px;
    background: rgba(0, 0, 0, 0.55);
    border: none;
    border-radius: 3px;
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px;
    opacity: 0;
    transition: opacity 0.2s ease;
    z-index: 5;
    pointer-events: auto;
}
.celeb-img-wrap:hover .wwd-expand-btn {
    opacity: 1;
}
.celeb-img-wrap .wwd-expand-btn svg {
    width: 15px;
    height: 15px;
    display: block;
    flex-shrink: 0;
}

/* Allow clicks through the GSAP track */
.celebrity-track .celeb-img-wrap,
.celebrity-track .celeb-img-wrap .wwd-expand-btn {
    pointer-events: auto;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .wwd-expand-btn,
    .celeb-img-wrap .wwd-expand-btn,
    .wwd-modal-close {
        transition: none;
    }
}

/* ================================================================
   WHAT WE DO PAGE END
================================================================ */

/* ================================================================
SERVICE CATEGORY PAGE CSS START
================================================================ */

/* Service Category Banner Section Start  */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.section.service-cat-banner {
  max-width: 1440px;
  width: 90%;
  margin: 0 auto;
  padding-top: 120px;
  padding-bottom: 100px;
}

.label-row {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 28px;
}

.label-line {
  width: 40px;
  height: 2px;
  background: #111;
  flex-shrink: 0;
}

.label-text.service-cat {
  font-family: Manrope;
  font-weight: 400;
  font-style: Regular;
  font-size: 30px;
  leading-trim: CAP_HEIGHT;
  line-height: 43px;
  letter-spacing: 0%;
  text-transform: uppercase;
}

.hero-card {
  position: relative;
  border-radius: 4px;
  overflow: hidden;
  background-repeat: no-repeat;
  background-position: top center;
  background-size: cover;
  min-height: 600px !important;
  display: flex;
  align-items: flex-start;
}

.headline-block {
  position: absolute;
  top: 0;
  left: 30px;
  z-index: 2;
  background: #fff;
  padding: 25px 25px 25px 25px;
  max-width: 776px;
}

.headline-block h2 {
  font-family: Manrope;
  font-weight: 600;
  font-style: SemiBold;
  font-size: 50px;
  line-height: 50px;
  letter-spacing: -3%;
}

.images-area {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 40px;
  padding: 0 40px 0 200px;
}

.stroller-img {
  height: 340px;
  width: auto;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 8px 24px rgba(0, 0, 0, 0.12));
}

.stroller-img.folded {
  height: 280px;
  align-self: center;
}

/* Fallback illustrated strollers */
.stroller-placeholder {
  display: flex;
  align-items: flex-end;
  gap: 40px;
  padding: 40px 40px 0 220px;
  flex: 1;
}

/* Service Category Banner Section End  */

/* strategic-media-planning Start */

.smp-section {
  padding: 0px 0px 100px;
}

.smp-grid {
  max-width: 560px;
  padding: 0px 40px;
}

.smp-heading {
  font-family: Manrope;
  font-weight: 600;
  font-style: SemiBold;
  font-size: 50px;
  letter-spacing: 0%;
  width: 800px;
  margin-bottom: 40px;
  line-height: 65px;
  color: #323232;
}

.smp-body {
  font-family: Manrope;
  font-weight: 400;
  font-style: Regular;
  font-size: 18px;
  line-height: 28px;
  letter-spacing: 0%;
  width: 800px;
}

/* Video Section Start */

.beyond-campaign.service-cat {
  padding-bottom: 100px;
}

.tax-service_cat .bc-video{
  object-fit: contain;
  object-position: center;
}

.tax-service_cat .bc-media.service-cat{
  background: black;
}

.service-cat .video-inner {
  padding: 0px 40px;
}
/* Video Section End */

/* Service Post Section Start */
.work-section.service-cat{
  padding-top: 0px;
}
.work-section h3 {
  font-size: 30px;
  letter-spacing: 0%;
  font-weight: 400;
  line-height: 43px;
  text-transform: uppercase;
}
/* Load more button */
.work-cta.service-cat {
  text-align: center;
}

.service-cat .btn-outline {
  background: #fff;
}

.service-cat .btn-outline:hover {
  background: var(--primary);
  color: #fff;
}

/* Contact Section */
.contact-section.service-cat {
  padding-top: 100px;
}
/* Service Post Section End */

/* ================================================================
   SERVICE CATEGORY PAGE CSS END
   ================================================================ */


/* ================================================================
   THANK YOU PAGE CSS START
   ================================================================ */
   .thank-you-btn{
    margin-top: 10px;
   }

   /* ================================================================
   THANK YOU PAGE CSS END
   ================================================================ */


/* ================================================================
   404 PAGE CSS START
   ================================================================ */
   .not-found-page .contact-banner__content h1{
    font-size: 111px;
    line-height: 115px;
   }

   .not-found-page .thank-you-btn{
    margin-top: 15px;
   }

   /* ================================================================
   404 PAGE CSS END
   ================================================================ */



/* ================================================================
   OUR WORK CUSTOM VIDEO CONTROLLER CSS START
   ================================================================ */
.lb-video {
  --lb-play: 64px;
  position: absolute;
  inset: 0;
  background: #000;
  overflow: hidden;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.lb-video video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Centered play / pause button */
.lb-vplay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: var(--lb-play);
  height: var(--lb-play);
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: url("https://labliss.jhseo-web.com/wp-content/uploads/2026/10/Play-pause-btn-black.png") center / contain no-repeat;
  cursor: pointer;
  z-index: 3;
  transition: opacity 0.2s ease;
  -webkit-tap-highlight-color: transparent;
}
.lb-vplay::before,
.lb-vplay::after { display: none; }

/* Playing: show a pause icon (white circle, black bars), hidden until hover */
.lb-video.is-playing .lb-vplay {
  background: #fff;
  opacity: 0;
  pointer-events: none;
}
.lb-video.is-playing .lb-vplay::before,
.lb-video.is-playing .lb-vplay::after {
  display: block;
  content: "";
  position: absolute;
  top: 33%;
  width: 9%;
  height: 34%;
  background: #111;
  border-radius: 1px;
}
.lb-video.is-playing .lb-vplay::before { left: 36%; }
.lb-video.is-playing .lb-vplay::after  { left: 55%; }

@media (hover: hover) {
  .lb-video.is-playing:hover .lb-vplay { opacity: 1; }
}

/* Bottom controls: time, fullscreen, progress */
.lb-vc {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 4;
  padding: 28px 16px 8px;
  color: #fff;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0));
  cursor: default;
}
.lb-vc-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.lb-vc-time {
  font-family: "Manrope", sans-serif;
  font-size: 14px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.lb-vc-fs {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #fff;
  cursor: pointer;
}
.lb-vc-fs svg { width: 18px; height: 18px; }

/* Progress bar */
.lb-vc-seek {
  -webkit-appearance: none;
  appearance: none;
  display: block;
  width: 100%;
  height: 20px;
  margin: 0;
  background: transparent;
  cursor: pointer;
}
.lb-vc-seek:focus { outline: none; }
.lb-vc-seek::-webkit-slider-runnable-track {
  height: 3px;
  border-radius: 3px;
  background: linear-gradient(to right, #fff var(--p, 0%), rgba(255, 255, 255, 0.4) var(--p, 0%));
}
.lb-vc-seek::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 12px;
  height: 12px;
  margin-top: -4.5px;
  border: 0;
  border-radius: 50%;
  background: #fff;
}
.lb-vc-seek::-moz-range-track {
  height: 3px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.4);
}
.lb-vc-seek::-moz-range-progress {
  height: 3px;
  border-radius: 3px;
  background: #fff;
}
.lb-vc-seek::-moz-range-thumb {
  width: 12px;
  height: 12px;
  border: 0;
  border-radius: 50%;
  background: #fff;
}

@media (max-width: 1024px) {
  .lb-video { --lb-play: 56px; }
}
@media (max-width: 767px) {
  .lb-video { --lb-play: 48px; }
  .lb-vc { padding: 24px 12px 6px; }
  .lb-vc-time { font-size: 12px; }
}




/* ================================================================
   OUR WORK VIDEO CONTROLLER CSS END
   ================================================================ */









/* ================================================================
   TOGGLE WRAPPER POSITIONING
   ================================================================ */
.header-content {
  display: flex;
  align-items: center;
  gap: 16px;
  position: relative;
  z-index: 1002; 
}

.nav-menu {
  display: flex;
  align-items: center;
  margin-left: auto;
  margin-right: 0px;
  flex: 0;
}

.header-right-controls {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-left: 20px;
}

.dark-mode-toggle-wrapper {
  display: flex;
  align-items: center;
  z-index: 999;
}

/* ===== TOGGLE SWITCH STYLE ===== */
.theme-pill {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  border: 1px solid rgba(0, 0, 0, 0.18);
  background: rgba(0, 0, 0, 0.07);
  padding: 3px;
}

body.dark-mode .theme-pill {
  border-color: rgba(255, 255, 255, 0.15);
  background: rgba(255, 255, 255, 0.08);
}

.theme-pill__btn {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px 11px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border: none;
  background: transparent;
  color: rgba(0, 0, 0, 0.35);
  cursor: pointer;
  transition:
    background 0.2s,
    color 0.2s,
    box-shadow 0.2s;
  line-height: 1;
}

body.dark-mode .theme-pill__btn {
  color: rgba(255, 255, 255, 0.35);
}

.theme-pill__btn.active {
  background: #ffffff;
  color: #111111;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}

body.dark-mode .theme-pill__btn.active {
  background: #2a2a2a;
  color: #f0f0f0;
}

/* Amber moon when dark is active */
.theme-pill__btn--dark.active svg path {
  fill: #f5c842;
  opacity: 1;
}

/* ===== MOBILE (max 900px) ===== */
@media (max-width: 900px) {
  .theme-pill__btn {
    padding: 4px 8px !important;
    font-size: 10px !important;
    gap: 4px !important;
  }
}

/* ===== MENU FIX ===== */
.nav-menu ul {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
}

.nav-menu ul li a {
  white-space: nowrap;
}

/* ===== NAV GAP ===== */

/* DESKTOP LARGE */
/* @media (min-width: 1460px) and (max-width: 2560px) {
  .nav-menu ul {
    gap: 70px !important;
  }
} */

/* LAPTOP */
/* @media (min-width: 1220px) and (max-width: 1459px) {
  .nav-menu ul {
    gap: 40px !important;
  }
} */

/* TABLET */
/* @media (min-width: 900px) and (max-width: 1220px) {
  .nav-menu ul {
    gap: 30px !important;
  }
} */

/* ===== MOBILE (max 900px) ===== */
@media (max-width: 900px) {
  .toggle-switch {
    width: 44px !important;
    height: 22px !important;
  }

  .slider::before {
    height: 15px !important;
    width: 15px !important;
  }

  .toggle-switch input:checked + .slider::before {
    transform: translateX(22px) !important;
  }
}


/* ================================================================
   LA BLISS — DARK MODE FINAL CSS
   ================================================================ */
body.dark-mode {
  background-color: #1f1f1f !important;
  color: #ffffff !important;
}

/*  HEADER */
body.dark-mode .main-header {
  background-color: var(--dark-bg-primary);
  /* background-color: #1a1a1a !important; */
  /* border-bottom: 1px solid #2e2e2e !important; */
  /* padding-bottom: 5px; */
}
body.dark-mode .main-header.scrolled{
  border-bottom: 1px solid #2e2e2e !important;
}
body.dark-mode .nav-menu {
  background-color: var(--dark-bg-primary) !important;
}

body.dark-mode .nav-mobile-close{
  color: #fff;
}

body.dark-mode .nav-menu li a{
  color: #ffffff !important;
}

body.dark-mode .nav-menu li a:hover {
  color: #ffffff !important;
}

/* Remove this rule if your logo already works on dark */
body.dark-mode .header-logo img {
  filter: brightness(0) invert(1);
}
body.dark-mode .nav-mobile-logo img {
  filter: brightness(0) invert(1);
}

body.dark-mode .theme-pill {
  background-color: #2a2a2a !important;
  border-color: #3a3a3a !important;
}

body.dark-mode .theme-pill__btn {
  color: #ffffff !important;
}

body.dark-mode .theme-pill__btn.active {
  background-color: #3a3a3a !important;
  color: #ffffff !important;
}

body.dark-mode .menu-toggle span {
  background-color: #e5e5e5 !important;
}

body.dark-mode #menu-header-menu{
  background-color: var(--dark-bg-primary);
}

/* BANNER full override */

/* 1. Nuke all backgrounds inside banner */
body.dark-mode .banner {
  background-color: var(--dark-bg-primary) !important;
  /* background-color: #1a1a1a !important; */
}
/* 2. Restore images */
body.dark-mode .banner img {
  opacity: 1 !important;
  filter: none !important;
}

/* Solid marquee strip */
body.dark-mode .banner .marquee-track {
  background-color: #ffffff !important;
  opacity: 1 !important;
}

/* 3. All text white */
body.dark-mode .banner h1,
body.dark-mode .banner h2,
body.dark-mode .banner p {
  color: #ffffff !important;
}

/* 4. Page title */
body.dark-mode .banner .page-title {
  color: #ffffff !important;
}

/* 5. Line text */
body.dark-mode .banner .line-text {
  color: #ffffff !important;
}

/* 6. SVG grid lines */
body.dark-mode .bg-lines line {
  stroke: #2e2e2e !important;
}

/*  MARQUEE FIX  */

body.dark-mode .banner .marquee-track {
  background-color: #ffffff !important;
}

body.dark-mode .banner .marquee-track span {
  color: #111111 !important;
  opacity: 1 !important;
  visibility: visible !important;
}
/* PROGRESS BAR */
body.dark-mode .slider-progress-bar {
  background-color: #2e2e2e !important;
}
body.dark-mode .progress-segment {
  background-color: #2e2e2e !important;
}
body.dark-mode .progress-fill {
  background-color: #888888 !important;
}

/*  SLIDER NAV FINAL */

body.dark-mode .slider-nav .counter {
  color: rgba(255, 255, 255, 0.7) !important;
  font-weight: 400 !important;
}

/* Arrows */
body.dark-mode .slider-nav button {
  background: transparent !important;
  border: none !important;
  color: #ffffff !important;
  box-shadow: none !important;
  opacity: 0.9 !important;
}

body.dark-mode .slick-prev:before,
body.dark-mode .slick-next:before {
  color: #ffffff !important;                                                                                        
}
                                       
/* Hover */
body.dark-mode .slider-nav button:hover {
  color: #ffffff !important;
  opacity: 1 !important;
}
/* ABOUT */
body.dark-mode .about-us,
body.dark-mode .about-inner-container {
  background-color: var(--dark-bg-primary) !important;
  /* background-color: #1a1a1a !important; */
}

body.dark-mode .about-text p{
  color: #ffffff !important;
}

body.dark-mode .about-btn {
  color: #ffffff !important;
  border-color: #555555 !important;
}

/* COUNTERS */
body.dark-mode .counters,
body.dark-mode .counters-wrapper {
  background-color: var(--dark-bg-primary);
  /* background-color: #1a1a1a !important; */
}

body.dark-mode .increamental-counter {
  border-color: #2e2e2e !important;
}

body.dark-mode .start-number,
body.dark-mode .counter-number h2 {
  color: #ffffff !important;
}

body.dark-mode .counter-text p {
  color: #ffffff !important;
}

/*  ABOUT CTA */
body.dark-mode .about-cta {
  background-color: var(--dark-bg-primary) !important;
  /* background-color: #1a1a1a !important; */
}

body.dark-mode .about-cta p {
  color: #ffffff !important;
}

body.dark-mode .about-cta-button a {
  color: #ffffff !important;
  border-color: #555555 !important;
}

/* WHAT WE DO */
body.dark-mode .wwd-section,
body.dark-mode .wwd-inner,
body.dark-mode .wwd-left,
body.dark-mode .wwd-right,
body.dark-mode .wwd-right-spacer {
  background-color: var(--dark-bg-primary) !important;
  /* background-color: #1a1a1a !important; */
}
body.dark-mode .wwd-section .wwd-left .accordion{
  background-color: var(--dark-bg-primary) !important;
}

body.dark-mode .section-label span {
  color: #ffffff !important;
}

body.dark-mode .section-label-line {
  background-color: #ffffff !important;
}

/* Accordion */
body.dark-mode .accordion-item {
  border-color: #2a2a2a !important;
  background-color: var(--dark-bg-primary) !important;
}

body.dark-mode .accordion-item.active .acc-title,
body.dark-mode .accordion-item.active .acc-num {
  color: #ffffff !important;
}

body.dark-mode .accordion-item:not(.active) .acc-title {
  color: #666666 !important;
}

body.dark-mode .accordion-item:not(.active) .acc-num {
  color: #444444 !important;
}

body.dark-mode .accordion-item:hover .acc-title {
  color: #ffffff !important;
}

/* Beyond the Campaign */
body.dark-mode.tax-service_cat{
  background: var(--dark-bg-primary) !important;
}

body.dark-mode .section.service-cat-banner,
body.dark-mode .smp-section,
body.dark-mode section.beyond-campaign,
body.dark-mode section.smp-section,
body.dark-mode section.work-section.service-cat {
background: var(--dark-bg-primary);
}

body.dark-mode section.beyond-campaign h2 {
    color: var(--light-text-primary);
}

body.dark-mode section.beyond-campaign p {
    color: var(--light-text-primary);
}

/* Content panel (right side) */
body.dark-mode .content-panel,
body.dark-mode .content-panel.active {
  background-color: var(--dark-bg-primary) !important;
  /* background-color: #1a1a1a !important; */
}

body.dark-mode .panel-image {
  background-color: #242424 !important;
  border-radius: 8px;
  overflow: hidden;
}

body.dark-mode .tags-row .tag {
  background-color: #2a2a2a !important;
  color: #fff !important;
  border: 1px solid #3a3a3a !important;
}

body.dark-mode .content-desc {
  color: #fff !important;
}

body.dark-mode .learn-more-btn {
  color: #fff !important;
  border-color: #555555 !important;
  background: transparent !important;
}

body.dark-mode .learn-more-btn:hover {
  background-color: #2a2a2a !important;
}

body.dark-mode .btn-divider {
  background-color: #2e2e2e !important;
}

/* CLIENTS */
body.dark-mode .clients-section,
body.dark-mode .clients,
body.dark-mode .collabs,
body.dark-mode .partnered-with {
  background-color: #4c4c4c !important;
}

body.dark-mode .client-heading span {
  color: #ffffff !important;
}

body.dark-mode .clients-logos img,
body.dark-mode .collabs img,
body.dark-mode .partnered-with img {
  filter: brightness(0) invert(1);
  opacity: 1;
}

body.dark-mode .clients-logos img.jan-jul-logo {
    filter: none;
}

body.dark-mode .clients-header .line,
body.dark-mode .clients-header .section-line,
body.dark-mode .clients-header hr {
  background-color: #ffffff !important;
  border-color: #ffffff !important;
}
body.dark-mode .client-heading::before {
  background-color: #ffffff !important;
  opacity: 1 !important;
}
body.dark-mode .quote-img,
body.dark-mode .quote-left,
body.dark-mode .quote-right {
  opacity: 1 !important;
  filter: brightness(0) invert(1) !important;
}
/* CELEBRITY SECTION */

body.dark-mode .celebrity-heading {
  color: #ffffff !important;
}
body.dark-mode .celebrity-heading::before {
  background-color: #ffffff !important;
  opacity: 1 !important;
}

/*  CONTACT FORM */

body.dark-mode .contact-title {
  color: #ffffff !important;
}

body.dark-mode .fluentform input:not([type="checkbox"]),
body.dark-mode .fluentform textarea {
  color: #e0e0e0 !important;
  border-bottom-color: #444444 !important;
  background: transparent !important;
}

body.dark-mode .fluentform input::placeholder,
body.dark-mode .fluentform textarea::placeholder {
  color: #ffffff !important;
}

body.dark-mode .fluentform .ff-el-form-check-label {
  background: rgba(255, 255, 255, 0.08) !important;
  color: #ffffff !important;
}

body.dark-mode .fluentform .ff-el-form-check-label.chip-active {
  background: var(--primary, #000000) !important;
  color: #ffffff !important;
}

body.dark-mode .fluentform button[type="submit"] {
  color: #ffffff !important;
  border-color: #555555 !important;
  background: transparent !important;
}

body.dark-mode .fluentform button[type="submit"]:hover {
  background-color: #333333 !important;
  color: #ffffff !important;
}

body.dark-mode .custom-interest-label {
  color: #ffffff !important;
}

/* QUOTE SECTION */
body.dark-mode .quote-text {
  background: transparent !important;
}
body.dark-mode .quote-img {
  opacity: 0.4;
}
/* Main quote text */
body.dark-mode .quote-text {
  color: #ffffff !important;
}

/* Preserve original fill animation/hierarchy */
body.dark-mode .quote-line {
  color: rgba(255, 255, 255, 0.28) !important;
  -webkit-text-fill-color: rgba(255, 255, 255, 0.28) !important;
}

/* Filled lines */
body.dark-mode .quote-line[style*="100%"] {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

/* Partial fill */
body.dark-mode .quote-line[style*="91%"] {
  color: rgba(255, 255, 255, 0.7) !important;
  -webkit-text-fill-color: rgba(255, 255, 255, 0.7) !important;
}

/* Quote icons */
body.dark-mode .quote-img {
  opacity: 0.15;
}

/* OUR WORK */

/* Remove unwanted dark backgrounds */
body.dark-mode .work-grid,
body.dark-mode .work-card,
body.dark-mode .work-content {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* Images */
body.dark-mode .work-card img {
  opacity: 1 !important;
  filter: none !important;
}

/* Heading */
body.dark-mode .section-header h3 {
  color: #ffffff !important;
}

/* Left line */
body.dark-mode .section-header .line,
body.dark-mode .work-header::before {
  background-color: #ffffff !important;
  opacity: 1 !important;
}

/* Numbers */
body.dark-mode .work-number {
  color: rgba(255, 255, 255, 0.18) !important;
}

/* Content */
body.dark-mode .work-content h4,
body.dark-mode .work-content p {
  color: #ffffff !important;
}

/* Button */
body.dark-mode .work-cta .btn-outline {
  color: #ffffff !important;
  border-color: rgba(255, 255, 255, 0.3) !important;
  background: transparent !important;
}

body.dark-mode .work-cta .btn-outline:hover {
  background: rgba(255, 255, 255, 0.08) !important;
}
body.dark-mode .work-number {
  background: #ffffff !important;
  color: #111111 !important;
  opacity: 1 !important;
  border: none !important;
}
/* faq */

/* FAQ Section */
body.dark-mode .faq-section {
  background-color: transparent !important;
}

/* FAQ Item */
body.dark-mode .faq-item {
  border-color: #2e2e2e !important;
}

/* Active FAQ */
body.dark-mode .faq-item.active {
  background-color: rgba(255, 255, 255, 0.08) !important;
}

/* FAQ Row */
body.dark-mode .faq-row {
  background-color: transparent !important;
}

/* FAQ Number */
body.dark-mode .faq-number {
  color: #ffffff !important;
  opacity: 1 !important;
}

/* FAQ Heading */
body.dark-mode .faq-content h3 {
  color: #ffffff !important;
}

/* FAQ Description */
body.dark-mode .faq-desc {
  color: #aaaaaa !important;
}

/* FAQ Toggle Button (+ / -) */
body.dark-mode .faq-toggle {
  background: #ffffff !important;
  color: #111111 !important;
  border-color: #ffffff !important;
  opacity: 1 !important;
}

/* footer */
body.dark-mode .site-footer,
body.dark-mode .footer-top,
body.dark-mode .footer-nav {
  background-color: #353535 !important;
}

body.dark-mode .site-footer {
  border-top: 1px solid #2e2e2e !important;
}

body.dark-mode .footer-heading {
  color: #ffffff !important;
}

body.dark-mode .footer-talk-btn {
  color: #ffffff !important;
  border-color: #555555 !important;
  background: transparent !important;
}

body.dark-mode .footer-talk-btn:hover {
  background-color: #222222 !important;
}

body.dark-mode .footer-email {
  color: #ffffff !important;
}

body.dark-mode .footer-divider {
  background-color: #FFFFFF !important;
}

body.dark-mode .footer-col-title {
  color: #ffffff !important;
}

body.dark-mode .footer-nav a,
body.dark-mode .footer-nav li a,
body.dark-mode .footer-col ul li a {
  color: #ffffff !important;
}

body.dark-mode .footer-nav a:hover,
body.dark-mode .footer-col ul li a:hover {
  color: #ffffff !important;
}

body.dark-mode address {
  color: #ffffff !important;
}

body.dark-mode .footer-bottom {
  background-color: #353535 !important;
}

body.dark-mode .footer-bottom p {
  color: #ffffff !important;
}

/* WHAT WE DO PAGE DARK MODE (page-id-446) */

body.dark-mode.page-id-446 {
  background-color: var(--dark-bg-primary) !important;
  color: #ffffff !important;
}

body.dark-mode.page-id-446 .nav-menu a {
  color: #ffffff !important;
}
body.dark-mode.page-id-446 .header-logo img {
  filter: brightness(0) invert(1);
}
body.dark-mode.page-id-446 .theme-pill {
  background-color: #2a2a2a !important;
  border-color: #3a3a3a !important;
}
body.dark-mode.page-id-446 .theme-pill__btn {
  color: #ffffff !important;
}
body.dark-mode.page-id-446 .theme-pill__btn.active {
  background-color: #3a3a3a !important;
}
body.dark-mode.page-id-446 .menu-toggle span {
  background-color: #e5e5e5 !important;
}

/*  BANNER / HERO  */
body.dark-mode.page-id-446 .banner,
body.dark-mode.page-id-446 .inner-banner,
body.dark-mode.page-id-446 .page-hero,
body.dark-mode.page-id-446 .hero-section {
  background-color: var(--dark-bg-primary) !important;
}
body.dark-mode.page-id-446 .banner h1,
body.dark-mode.page-id-446 .banner h2,
body.dark-mode.page-id-446 .banner p,
body.dark-mode.page-id-446 .banner .page-title {
  color: #ffffff !important;
}
body.dark-mode.page-id-446 .banner img {
  opacity: 1 !important;
  filter: none !important;
}
body.dark-mode.page-id-446 .bg-lines line {
  stroke: #2e2e2e !important;
}

/*  INNER MARQUEE */
body.dark-mode.page-id-446 .inner-marquee-track {
  background: #ffffff !important;
  display: flex !important;
  align-items: center !important;
  overflow: hidden !important;
}
body.dark-mode.page-id-446 .inner-marquee-track span {
  color: #111111 !important;
}

/*  WHAT WE DO SECTION  */
body.dark-mode.page-id-446 .wwd-section,
body.dark-mode.page-id-446 .wwd-inner,
body.dark-mode.page-id-446 .wwd-left,
body.dark-mode.page-id-446 .wwd-right,
body.dark-mode.page-id-446 .wwd-right-spacer,
body.dark-mode.page-id-446 .content-panel,
body.dark-mode.page-id-446 .content-panel.active {
  background-color: var(--dark-bg-primary) !important;
}
body.dark-mode.page-id-446 .section-label span {
  color: #ffffff !important;
}
body.dark-mode.page-id-446 .section-label-line {
  background-color: #ffffff !important;
}

/* Accordion */
body.dark-mode.page-id-446 .accordion-item {
  border-color: #2a2a2a !important;
  background-color: var(--dark-bg-primary) !important;
}
body.dark-mode.page-id-446 .accordion-item.active .acc-title,
body.dark-mode.page-id-446 .accordion-item.active .acc-num {
  color: #ffffff !important;
}
body.dark-mode.page-id-446 .accordion-item:not(.active) .acc-title {
  color: #666666 !important;
}
body.dark-mode.page-id-446 .accordion-item:not(.active) .acc-num {
  color: #444444 !important;
}
body.dark-mode.page-id-446 .accordion-item:hover .acc-title {
  color: #ffffff !important;
}

/* Panel right side */
body.dark-mode.page-id-446 .panel-image {
  background-color: #242424 !important;
  border-radius: 8px;
  overflow: hidden;
}
body.dark-mode.page-id-446 .tags-row .tag {
  background-color: #2a2a2a !important;
  color: #fff !important;
  border: 1px solid #3a3a3a !important;
}
body.dark-mode.page-id-446 .content-desc {
  color: #fff !important;
}
body.dark-mode.page-id-446 .learn-more-btn {
  color: #fff !important;
  border-color: #555555 !important;
  background: transparent !important;
}
body.dark-mode.page-id-446 .btn-divider {
  background-color: #2e2e2e !important;
}

/*  COUNTERS  */
body.dark-mode.page-id-446 .counters,
body.dark-mode.page-id-446 .counters-wrapper {
  background-color: var(--dark-bg-primary) !important;
}
body.dark-mode.page-id-446 .clients-counters.what-we-do-page .counters-wrapper {
  background: transparent !important;
}
body.dark-mode.page-id-446 .increamental-counter {
  border-color: #2e2e2e !important;
}
body.dark-mode.page-id-446 .start-number,
body.dark-mode.page-id-446 .counter-number h2,
body.dark-mode.page-id-446 .clients-start-number,
body.dark-mode.page-id-446 .counter-suffix {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}
body.dark-mode.page-id-446 .counter-text p {
  color: #ffffff !important;
}

/*  ABOUT / CTA */
body.dark-mode.page-id-446 .about-us,
body.dark-mode.page-id-446 .about-inner-container,
body.dark-mode.page-id-446 .about-cta {
  background-color: var(--dark-bg-primary) !important;
}
body.dark-mode.page-id-446 .about-text,
body.dark-mode.page-id-446 .about-cta p {
  color: #ffffff !important;
}
body.dark-mode.page-id-446 .about-btn,
body.dark-mode.page-id-446 .about-cta-button a {
  color: #ffffff !important;
  border-color: #555555 !important;
}

/* CELEBRITY */
body.dark-mode.page-id-446 .celebrity-section,
body.dark-mode.page-id-446 .celebrity-section .container,
body.dark-mode.page-id-446 .celebrity-slider,
body.dark-mode.page-id-446 .celebrity-track-wrapper,
body.dark-mode.page-id-446 .celebrity-header,
body.dark-mode.page-id-446 .celebrity-card,
body.dark-mode.page-id-446 .celebrity-card-content {
  background: var(--dark-bg-primary) !important;
}
body.dark-mode.page-id-446 .celebrity-heading,
body.dark-mode.page-id-446 .celebrity-content h4 {
  color: #ffffff !important;
}
body.dark-mode.page-id-446 .celebrity-heading::before {
  background-color: #ffffff !important;
}

/* CONTACT  */
body.dark-mode.page-id-446 .contact-section {
  background-color: var(--dark-bg-primary) !important;
}
body.dark-mode.page-id-446 .contact-title {
  color: #ffffff !important;
}
body.dark-mode.page-id-446 .ff-t-container {
  background-color: var(--dark-bg-primary) !important;
}
body.dark-mode.page-id-446 .fluentform input:not([type="checkbox"]),
body.dark-mode.page-id-446 .fluentform textarea {
  color: #e0e0e0 !important;
  border-bottom-color: #444444 !important;
  background: transparent !important;
}
body.dark-mode.page-id-446 .fluentform input::placeholder,
body.dark-mode.page-id-446 .fluentform textarea::placeholder {
  color: #ffffff !important;
}
body.dark-mode.page-id-446 .fluentform .ff-el-form-check-label {
  background: rgba(255, 255, 255, 0.08) !important;
  color: #ffffff !important;
}
body.dark-mode.page-id-446 .fluentform button[type="submit"] {
  color: #ffffff !important;
  border-color: #555555 !important;
  background: transparent !important;
}
body.dark-mode.page-id-446 .custom-interest-label {
  color: #ffffff !important;
}

/* FAQ  */
body.dark-mode.page-id-446 .faq-section {
  background-color: var(--dark-bg-primary) !important;
}
body.dark-mode.page-id-446 .faq-item {
  border-color: #2e2e2e !important;
  background-color: var(--dark-bg-primary) !important;
}
body.dark-mode.page-id-446 .faq-item.active {
  background-color: rgba(255, 255, 255, 0.08) !important;
}
body.dark-mode.page-id-446 .faq-number,
body.dark-mode.page-id-446 .faq-content h3 {
  color: #ffffff !important;
}
body.dark-mode.page-id-446 .faq-desc {
  color: #aaaaaa !important;
}
body.dark-mode.page-id-446 .faq-toggle {
  background: #ffffff !important;
  color: #111111 !important;
  border-color: #ffffff !important;
}

/* OUR WORK */
body.dark-mode.page-id-446 .work-section {
  background-color: var(--dark-bg-primary) !important;
}
body.dark-mode.page-id-446 .work-grid,
body.dark-mode.page-id-446 .work-card,
body.dark-mode.page-id-446 .work-content {
  background: transparent !important;
  border: none !important;
}
body.dark-mode.page-id-446 .section-header h3,
body.dark-mode.page-id-446 .work-content h4,
body.dark-mode.page-id-446 .work-content p {
  color: #ffffff !important;
}
body.dark-mode.page-id-446 .section-header .line {
  background-color: #ffffff !important;
}
body.dark-mode.page-id-446 .work-number {
  background: #ffffff !important;
  color: #111111 !important;
}
body.dark-mode.page-id-446 .work-cta .btn-outline {
  color: #ffffff !important;
  border-color: rgba(255, 255, 255, 0.3) !important;
  background: transparent !important;
}

/* QUOTE */
body.dark-mode.page-id-446 .quote-section,
body.dark-mode.page-id-446 .inner-quote,
body.dark-mode.page-id-446 .quote-box {
  background-color: var(--dark-bg-primary) !important;
}
body.dark-mode.page-id-446 .quote-text {
  color: #ffffff !important;
  background: transparent !important;
}
body.dark-mode.page-id-446 .quote-img,
body.dark-mode.page-id-446 .quote-left,
body.dark-mode.page-id-446 .quote-right {
  filter: brightness(0) invert(1) !important;
  opacity: 0.15;
}

/*  MISC */
body.dark-mode.page-id-446 .menu-overlay {
  background-color: rgba(0, 0, 0, 0.85) !important;
}
body.dark-mode.page-id-446 img {
  opacity: 1;
}
body.dark-mode.page-id-446 .header-logo img,
body.dark-mode.page-id-446 .banner img,
body.dark-mode.page-id-446 .celebrity-card img {
  opacity: 1;
}

/**** About Page Dark mode Css Start ****/

body.dark-mode.page-id-327 section.about-us p.about-not-just-explore {
  color: var(--light-text-primary);
}
body.dark-mode.page-id-327 section.beyond-campaign h2 {
  color: var(--light-text-primary);
}
body.dark-mode.page-id-327 section.beyond-campaign p {
  color: var(--light-text-primary);
}
body.dark-mode.page-id-327
  section.clients-counters.about-page
  .increamental-counter
  span.clients-counter-number
  h2.clients-start-number {
  color: var(--light-text-primary);
}
body.dark-mode.page-id-327
  .process-section
  .steps-wrap
  .step
  .step-body
  h2.step-title {
  color: var(--light-text-primary) !important;
}
body.dark-mode.page-id-327
  .process-section
  .steps-wrap
  .step
  .step-body
  p.step-desc {
  color: var(--light-text-primary);
}
body.dark-mode.page-id-327 section.banner .inner-marquee-track {
  background: var(--light-bg-primary);
}
body.dark-mode.page-id-327 section.banner .inner-marquee-track span {
  color: var(--dark-text-primary);
}

body.dark-mode.page-id-327 .section-label .label-dash{
   background: #fff !important;
   border-color: #fff !important;
}

body.dark-mode.page-id-327 .section-label span{
   color: #fff !important;
}

body.dark-mode.page-id-327 section:is(
  .beyond-campaign,
  .clients-counters.about-page,
  .contact-section,
  .quote-section,
  .process-section,
  .celebrity-section,
  .faq-section
){
  background: var(--dark-bg-primary);
}

/**** About Page Dark mode Css End ****/

/**** Client Page Dark mode Css Start ****/

body.dark-mode.page-id-225 section.banner .inner-marquee-track {
  background: var(--light-bg-primary);
}
body.dark-mode.page-id-225 section.banner .inner-marquee-track span {
  color: var(--dark-text-primary);
}
body.dark-mode.page-id-225
  section.clients-counters
  .counters-wrapper
  .increamental-counter
  span.clients-counter-number
  h2.clients-start-number {
  color: var(--light-text-primary);
}

/**** Client Page Dark mode Css End ****/

/**** Contact Page Dark mode Css Start ****/

/* body.dark-mode.page-id-206 section.contact-banner,
body.dark-mode.page-id-206 section.contact-section,
body.dark-mode.page-id-206 section.contact-marquee-section,
body.dark-mode.page-id-206 section.contact-map{
  background-color: #1a1a1a !important;
} */

body.dark-mode.page-id-206 section.contact-banner .contact-banner__content h1 {
  color: var(--light-text-primary);
}
body.dark-mode.page-id-206 section.contact-banner .contact-banner__content p {
  color: var(--light-text-primary);
}
body.dark-mode.page-id-206
  section.contact-marquee-section
  .contact-marquee
  .contact-marquee-track
  span.contact-marquee-list {
  color: var(--light-text-primary);
}

body.dark-mode.page-id-206 .contact-map__info p{
  color: #fff;
}

body.dark-mode.page-id-206 .contact-map__info .line {
    background: #fff !important;
}

/**** Contact Page Dark mode Css End ****/

/*client page dark mode css  start*/
body.page-id-225.dark-mode .counters,
body.page-id-225.dark-mode .counters-wrapper {
  background-color: transparent !important;
}
/*client page dark mode css  end */

/* our work page dark mode css start */

body.dark-mode.page-id-283 section.lb-works-section {
  background: var(--dark-bg-primary);
}
body.dark-mode.page-id-283
  section.lb-works-section
  .lb-filter-outer
  div.lb-filter-bar
  button.lb-filter-btn {
  color: rgb(var(--light-text-primary) / 70%);
}
body.dark-mode.page-id-283
  section.lb-works-section
  .lb-filter-outer
  div.lb-filter-bar
  button.lb-filter-btn.active {
  color: rgb(var(--light-text-primary));
}
body.dark-mode.page-id-283
  section.lb-works-section
  .lb-works-grid
  .lb-work-item
  a.lb-work-inner
  .lb-work-info
  h3 {
  color: rgb(var(--light-text-primary));
}
body.dark-mode.page-id-283
  section.lb-works-section
  .lb-works-grid
  .lb-work-item
  a.lb-work-inner
  .lb-work-info
  p {
  color: rgb(var(--light-text-primary) / 70%);
}
body.dark-mode.page-id-283
  section.lb-works-section
  .lb-page-header
  .lb-cat-header
  h2,
  body.dark-mode.page-id-283
  section.lb-works-section
  .lb-page-header
  .lb-all-tab-header
  h1 {
  color: rgb(var(--light-text-primary));
}
body.dark-mode.page-id-283
  section.lb-works-section
  .lb-page-header
  .lb-cat-header
  p,
  body.dark-mode.page-id-283
  section.lb-works-section
  .lb-page-header
  .lb-all-tab-header
  p {
  color: rgb(var(--light-text-primary) / 70%);
}
body.dark-mode.page-id-283
  section.lb-works-section
  .lb-showmore-wrap
  button.lb-showmore-btn {
  border: 1px solid rgb(var(--light-text-primary) / 50%);
  color: rgb(var(--light-text-primary));
}
body.dark-mode.page-id-283 section.contact-section {
  background: var(--dark-bg-primary);
}
body.dark-mode.page-id-283 section.celebrity-section{
  background: var(--dark-bg-primary);
}

body.dark-mode.page-id-283 .lb-works-section .lb-work-info h3{
  color: rgb(var(--light-text-primary) / 95%);
}

body.dark-mode.page-id-283 .lb-works-section .lb-work-info .lb-work-cat{
  color: rgb(var(--light-text-primary) / 70%);
}

/* our work page dark mode css end */


/* Category pages dark mode css start */

body.dark-mode.tax-service_cat .label-line{
  background: var(--light-bg-primary) !important;
}
body.dark-mode.tax-service_cat .label-text{
  color: var(--light-bg-primary);
}
body.dark-mode.tax-service_cat .headline-block h2{
  color: var(--dark-bg-primary);
}
body.dark-mode.tax-service_cat .smp-heading{
  color: var(--light-bg-primary);
}
/* Category pages dark mode css end */


/* Thank You Page css start*/
body.dark-mode .thank-you-page .contact-banner__content h1{
  color: var(--light-bg-primary);
}
body.dark-mode .thank-you-page .inr-banner-content .subtitle{
  color: var(--light-bg-primary);
}
/* Thank You Page css end*/