/* ============================================================
   B2C ADVERTISERS — DESIGN SYSTEM
   Typography · Spacing · Alignment · Mobile UX
   Load order: after main.css (last stylesheet)
   ============================================================ */

/* ------------------------------------------------------------
   SKELETON SCREEN LOADER
   Replaces the old spinning-dot preloader.
   The JS still targets #preloader and calls fadeOut(500) on
   window load — no JS changes needed.
   ------------------------------------------------------------ */

/* Override main.css white background */
#preloader {
  background: #0d0d0d !important;
  z-index: 99999;
}

/* Shimmer sweep */
@keyframes b2c-shimmer {
  0%   { background-position: -800px 0; }
  100% { background-position:  800px 0; }
}

.b2c-sk-block {
  border-radius: 6px;
  background: linear-gradient(
    90deg,
    #1c1c1c 25%,
    #2e2e2e 50%,
    #1c1c1c 75%
  );
  background-size: 800px 100%;
  animation: b2c-shimmer 1.6s infinite linear;
}

/* Outer wrapper fills the fixed overlay */
.b2c-sk-wrap {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
}

/* ---- Navbar row ---- */
.b2c-sk-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 26px 48px;
  border-bottom: 1px solid #1e1e1e;
  flex-shrink: 0;
}

.b2c-sk-logo {
  width: 150px;
  height: 30px;
}

.b2c-sk-nav-links {
  display: flex;
  gap: 28px;
}

.b2c-sk-nav-links .b2c-sk-block {
  width: 64px;
  height: 14px;
}

.b2c-sk-nav-cta {
  width: 110px;
  height: 40px;
  border-radius: 40px;
}

/* ---- Hero content area ---- */
.b2c-sk-hero {
  flex: 1;
  display: flex;
  align-items: center;
  padding: 0 48px;
}

.b2c-sk-hero-inner {
  display: flex;
  flex-direction: column;
  gap: 18px;
  width: 100%;
  max-width: 680px;
}

/* tag line */
.b2c-sk-tag  { width: 120px; height: 13px; }

/* two large heading lines */
.b2c-sk-h1-a { width: 85%;  height: 58px; }
.b2c-sk-h1-b { width: 70%;  height: 58px; }

/* sub-text line */
.b2c-sk-sub  { width: 55%;  height: 15px; margin-top: 6px; }

/* CTA button */
.b2c-sk-cta  { width: 164px; height: 52px; border-radius: 52px; margin-top: 12px; }

/* ---- Mobile ---- */
@media (max-width: 767px) {
  .b2c-sk-nav        { padding: 18px 20px; }
  .b2c-sk-nav-links  { display: none; }
  .b2c-sk-nav-cta    { display: none; }
  .b2c-sk-hero       { padding: 0 20px; }
  .b2c-sk-h1-a,
  .b2c-sk-h1-b       { height: 40px; }
  .b2c-sk-h1-b       { width: 88%; }
}

/* ------------------------------------------------------------
   0. SEO — VISUALLY HIDDEN H1
   Hides content from screen but keeps it fully readable by
   search engines and screen readers (clip technique, not display:none)
   ------------------------------------------------------------ */

/* The H1 itself — invisible but in the document flow */
.b2c-seo-h1 {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
  pointer-events: none;
}

/* Collapse the title box so it leaves no visual gap in the hero */
.b2c-hero-title-hidden {
  margin: 0 !important;
  padding: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
  line-height: 0 !important;
}


/* ------------------------------------------------------------
   1. DESIGN TOKENS
   ------------------------------------------------------------ */
:root {
  /* Spacing scale — fluid, clamp-based */
  --b2c-section-y:    clamp(60px, 8vw, 130px);
  --b2c-section-y-sm: clamp(40px, 5vw, 80px);
  --b2c-block-gap:    clamp(32px, 4vw, 64px);
  --b2c-inline-pad:   clamp(20px, 4vw, 40px);

  /* Typography */
  --b2c-body-size:  16px;
  --b2c-body-line:  1.75;
  --b2c-body-color: #3d3d4a;
  --b2c-heading-line: 1.15;
  --b2c-prose-max: 68ch;          /* max-width for readable paragraphs */

  /* Heading fluid scale */
  --b2c-h1: clamp(34px, 5vw,  72px);
  --b2c-h2: clamp(28px, 4vw,  52px);
  --b2c-h3: clamp(22px, 3vw,  38px);
  --b2c-h4: clamp(18px, 2.5vw,28px);
  --b2c-h5: clamp(16px, 2vw,  22px);
}


/* ------------------------------------------------------------
   2. BASE BODY TYPOGRAPHY
   ------------------------------------------------------------ */
body {
  font-size: var(--b2c-body-size) !important;
  line-height: var(--b2c-body-line) !important;
  color: var(--b2c-body-color);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* All paragraphs: comfortable reading defaults */
p {
  font-size: 16px;
  line-height: 1.75;
  color: var(--b2c-body-color);
  margin-bottom: 1.1em;
}

/* Content paragraphs: prevent stretched full-width lines */
.tp-service-content p,
.tp-work-content p,
.tp-testimonial-text p,
.b2c-about-desc,
.tp-contact-form-heading p,
.inner-service-1-right p,
.tp-section-description,
.ar-about-4-desc {
  max-width: var(--b2c-prose-max);
  line-height: 1.78;
}

/* Headings: unified hierarchy */
h1 { font-size: var(--b2c-h1); line-height: var(--b2c-heading-line); }
h2 { font-size: var(--b2c-h2); line-height: var(--b2c-heading-line); }
h3 { font-size: var(--b2c-h3); line-height: var(--b2c-heading-line); }
h4 { font-size: var(--b2c-h4); line-height: var(--b2c-heading-line); }
h5 { font-size: var(--b2c-h5); line-height: var(--b2c-heading-line); }

/* Section subtitle (pre tag) */
.tp-section-subtitle {
  font-size: 13px;
  letter-spacing: 0.1em;
  font-weight: 600;
  text-transform: uppercase;
  line-height: 1.4;
}

/* Section title base */
.tp-section-title {
  line-height: 1.08;
  letter-spacing: -0.03em;
}


/* ------------------------------------------------------------
   3. HEADER — MOBILE & TABLET ALIGNMENT
   ------------------------------------------------------------ */

/* Collapse the large desktop top-margin on smaller screens */
@media (max-width: 991px) {
  .tp-header-2-area {
    margin-top: 0 !important;
  }
  .tp-header-ptb {
    padding: 16px 0 !important;
  }
  #header-sticky {
    padding-top: env(safe-area-inset-top, 0px);
  }
}

/* Logo: constrain on all screens — override JS-injected data-width */
.tp-header-logo img,
.tp-header-logo a img {
  max-width: 200px !important;
  width: auto !important;
  height: auto !important;
  display: block;
}

@media (max-width: 767px) {
  .tp-header-logo img,
  .tp-header-logo a img {
    max-width: 150px !important;
  }
  .tp-header-2-right {
    align-items: center;
  }
  /* Both columns: flex so content sits vertically centred */
  .tp-header-2-area .col-6 {
    display: flex;
    align-items: center;
  }
  .tp-header-2-area .col-6:last-child {
    justify-content: flex-end;
  }
}


/* ------------------------------------------------------------
   4. CONTAINER — CONSISTENT HORIZONTAL PADDING ON MOBILE
   ------------------------------------------------------------ */
@media (max-width: 767px) {
  .container,
  .container-fluid,
  [class*="container-1"] {
    padding-left: var(--b2c-inline-pad) !important;
    padding-right: var(--b2c-inline-pad) !important;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .container,
  .container-fluid,
  [class*="container-1"] {
    padding-left: 30px !important;
    padding-right: 30px !important;
  }
}


/* ------------------------------------------------------------
   5. HERO SECTION (HOME) — Full-viewport height, video only
   ------------------------------------------------------------ */

/* Full screen on all breakpoints */
.tp-hero-area.tp-hero-ptb {
  min-height: 100vh !important;
  min-height: 100svh !important;   /* modern mobile (excludes browser chrome) */
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-end !important; /* keeps any remaining content at bottom */
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* Ensure the video fills the entire hero box */
.tp-hero-area.tp-hero-ptb video {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  z-index: -1 !important;
}

/* The inner container should not push height */
.tp-hero-area.tp-hero-ptb .container {
  position: relative;
  z-index: 1;
}

/* Title box is visually hidden — no residual spacing */
.b2c-hero-title-hidden {
  margin: 0 !important;
  padding: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
  line-height: 0 !important;
}

/* Optional: subtle dark overlay so any future caption text stays readable */
.tp-hero-area.tp-hero-ptb::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.05) 60%, rgba(0,0,0,0.25) 100%);
  z-index: 0;
  pointer-events: none;
}


/* ------------------------------------------------------------
   6. SERVICE SECTION (HOME) — container-fluid p-0 fix
   ------------------------------------------------------------ */

/* The service area uses container-fluid p-0 — needs side padding on mobile */
@media (max-width: 767px) {
  .tp-service-area .container-fluid.p-0 {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  /* Each service item gets its own horizontal breathing room */
  .tp-service-item {
    padding: 32px var(--b2c-inline-pad) !important;
  }
  .tp-service-title-box {
    padding: 0 var(--b2c-inline-pad) 28px !important;
  }
  /* Service content text */
  .tp-service-content .tp-section-title {
    font-size: clamp(24px, 6vw, 36px) !important;
    letter-spacing: -0.02em;
    margin-bottom: 14px !important;
  }
  .tp-service-content p {
    font-size: 15px;
    line-height: 1.7;
    margin-bottom: 20px !important;
    padding-right: 0 !important;
  }
  .tp-service-content .tp-service-btn {
    margin-bottom: 30px !important;
  }
  /* Hide oversized service thumb on very small screens */
  .tp-service-thumb {
    display: none;
  }
  /* Service number: small label at top */
  .tp-service-number {
    padding: 0 !important;
    margin-bottom: 6px;
  }
  .tp-service-number span {
    font-size: 13px;
    opacity: 0.5;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .tp-service-item {
    padding: 36px 30px !important;
  }
  .tp-service-content .tp-section-title {
    letter-spacing: -0.01em;
  }
  .tp-service-content p {
    font-size: 15px;
    padding-right: 0 !important;
  }
}


/* ------------------------------------------------------------
   7. SECTION SPACING — NORMALIZE EXCESSIVE pt/pb VALUES
   ------------------------------------------------------------ */

/* Project area pt-200 → fluid */
@media (max-width: 991px) {
  .tp-project-area.pt-200 {
    padding-top: var(--b2c-section-y) !important;
  }
}

/* Work area pb-145 → fluid */
@media (max-width: 991px) {
  .tp-work-area.pb-145 {
    padding-bottom: var(--b2c-section-y-sm) !important;
  }
}

/* Clients / brand area pt-20 pb-50 — ok on all screens */

/* Testimonial area: ensure inner container has space */
@media (max-width: 767px) {
  .tp-testimonial-area {
    padding-top: var(--b2c-section-y-sm);
    padding-bottom: var(--b2c-section-y-sm);
  }
}

/* Generic large spacings: scale down globally on mobile */
@media (max-width: 767px) {
  .pt-200 { padding-top: 70px !important; }
  .pt-160 { padding-top: 60px !important; }
  .pt-145 { padding-top: 55px !important; }
  .pt-120 { padding-top: 50px !important; }
  .pt-100 { padding-top: 45px !important; }
  .pb-200 { padding-bottom: 70px !important; }
  .pb-160 { padding-bottom: 60px !important; }
  .pb-145 { padding-bottom: 55px !important; }
  .pb-120 { padding-bottom: 50px !important; }
  .pb-100 { padding-bottom: 45px !important; }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .pt-200 { padding-top: 100px !important; }
  .pt-160 { padding-top: 80px !important; }
  .pt-120 { padding-top: 60px !important; }
  .pb-160 { padding-bottom: 80px !important; }
  .pb-145 { padding-bottom: 70px !important; }
  .pb-120 { padding-bottom: 60px !important; }
}


/* ------------------------------------------------------------
   8. FUNFACT SECTION — FIX HARDCODED LEFT PADDING
   ------------------------------------------------------------ */
@media (max-width: 991px) {
  .tp-funfact-content-wrap.pl-140,
  .tp-funfact-content-wrap[class*="pl-"] {
    padding-left: 0 !important;
  }
  .tp-funfact-title.pl-45,
  .tp-funfact-title[class*="pl-"] {
    padding-left: 0 !important;
  }
  .tp-funfact-title {
    font-size: clamp(22px, 4vw, 36px) !important;
    line-height: 1.25;
  }
  .tp-funfact-number span {
    font-size: clamp(60px, 15vw, 120px) !important;
    letter-spacing: -0.04em;
  }
  .tp-funfact-subtitle {
    font-size: 13px;
  }
}

@media (max-width: 767px) {
  .tp-funfact-content-wrap {
    margin-top: 24px;
  }
  .tp-funfact-panel {
    overflow: hidden;
  }
}


/* ------------------------------------------------------------
   9. WORK SECTION — TYPOGRAPHY & MOBILE STACK
   ------------------------------------------------------------ */
.tp-work-title {
  font-size: clamp(16px, 2.5vw, 22px);
  line-height: 1.3;
  letter-spacing: -0.01em;
  margin-bottom: 8px;
}

.tp-work-content p {
  font-size: 15px;
  line-height: 1.7;
  color: #5a5a68;
}

@media (max-width: 991px) {
  .tp-section-title.fs-140 {
    font-size: clamp(48px, 10vw, 80px) !important;
    letter-spacing: -0.02em !important;
    line-height: 1 !important;
  }
  .tp-work-title-box {
    margin-bottom: 32px;
  }
}

@media (max-width: 767px) {
  .tp-work-area .col-lg-6:first-child {
    margin-bottom: 32px;
  }
  .tp-work-item {
    padding: 20px 0;
  }
  .tp-work-number i {
    font-size: 18px;
    font-style: normal;
  }
}


/* ------------------------------------------------------------
   10. PROJECT / PORTFOLIO SECTION
   ------------------------------------------------------------ */
.tp-project-title-box {
  margin-bottom: clamp(24px, 4vw, 50px) !important;
}

@media (max-width: 767px) {
  .tp-project-item {
    margin-bottom: 40px;
  }
  /* Project section title subtitle */
  .tp-project-subtitle-wrap .tp-section-subtitle {
    font-size: 12px;
  }
  /* Remove excessive gutter on mobile */
  .row.gx-135 {
    --bs-gutter-x: 1rem;
  }
}


/* ------------------------------------------------------------
   11. TESTIMONIAL SECTION
   ------------------------------------------------------------ */
.tp-testimonial-item {
  padding: clamp(24px, 3vw, 40px) !important;
}

.tp-testimonial-text p {
  font-size: clamp(15px, 2vw, 17px);
  line-height: 1.7;
  font-style: italic;
}

.tp-testimonial-author-info span {
  font-size: 15px;
  font-weight: 600;
}
.tp-testimonial-author-info p {
  font-size: 13px;
  margin-bottom: 0;
  opacity: 0.7;
}

@media (max-width: 767px) {
  .tp-testimonial-title-box h4.tp-section-title {
    font-size: clamp(26px, 7vw, 40px) !important;
  }
}


/* ------------------------------------------------------------
   12. FOOTER — SPACING & ALIGNMENT
   ------------------------------------------------------------ */
@media (max-width: 767px) {
  .tp-footer-area.pt-160 {
    padding-top: 56px !important;
  }
  .tp-footer-widget {
    padding-bottom: 28px !important;
    text-align: left;
  }
  /* Footer columns: full-width stacking */
  .tp-footer-area .col-xl-4,
  .tp-footer-area .col-xl-5,
  .tp-footer-area .col-xl-3 {
    border-bottom: 1px solid rgba(0,0,0,0.07);
    padding-bottom: 24px;
    margin-bottom: 8px;
  }
  .tp-footer-area .col-xl-3:last-child {
    border-bottom: none;
  }
  .tp-footer-widget-title {
    font-size: clamp(22px, 6vw, 32px) !important;
    margin-bottom: 16px;
  }
  .tp-footer-widget-title-sm {
    font-size: 14px !important;
    margin-bottom: 14px !important;
  }
  .tp-footer-widget-menu ul li {
    margin-bottom: 10px;
  }
  .tp-footer-widget-menu ul li a {
    font-size: 15px;
  }
  .tp-footer-widget-info a {
    font-size: 14px;
    line-height: 1.6;
  }
  .tp-footer-widget-social {
    margin-top: 16px;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .tp-footer-area.pt-160 {
    padding-top: 80px !important;
  }
  .tp-footer-widget {
    padding-bottom: 32px !important;
  }
}

/* Copyright bar */
.tp-copyright-big-text {
  font-size: clamp(36px, 8vw, 120px) !important;
  letter-spacing: -0.04em;
  line-height: 1;
  overflow: hidden;
}

@media (max-width: 767px) {
  .tp-copyright-bottom .row {
    gap: 8px 0;
  }
  .tp-copyright-left,
  .tp-copyright-right {
    text-align: center !important;
  }
  .tp-copyright-right a {
    font-size: 12px;
  }
}


/* ------------------------------------------------------------
   13. SERVICES PAGE (Services.html)
   ------------------------------------------------------------ */

/* Hero: "Our Services" title */
@media (max-width: 767px) {
  .studio-hero-title.fs-400 {
    font-size: clamp(56px, 13vw, 80px) !important;
    letter-spacing: -0.03em !important;
  }
  .studio-hero-area {
    padding-top: 80px !important;
    padding-bottom: 50px !important;
  }
}

/* Banner tagline spans — wrap on mobile */
.studio-hero-banner-text {
  flex-wrap: wrap !important;
  gap: 4px 10px;
  line-height: 1.6;
}
@media (max-width: 767px) {
  .studio-hero-banner-text span {
    font-size: clamp(22px, 6vw, 36px) !important;
  }
  .studio-hero-banner-area {
    padding-bottom: 50px !important;
  }
  .studio-hero-banner {
    margin-bottom: 20px !important;
  }
}

/* Inner service area */
@media (max-width: 991px) {
  .tp-inner-service-area {
    padding-top: 60px !important;
    padding-bottom: 60px !important;
  }
  .inner-service-1-left {
    position: static !important;
    margin-bottom: 32px;
  }
  .inner-service-1-left > span {
    font-size: 14px;
  }
}
@media (max-width: 767px) {
  .tp-inner-service-area .col-lg-3,
  .tp-inner-service-area .col-lg-9 {
    padding-left: 0;
    padding-right: 0;
  }
}

/* Inner service right content */
.inner-service-1-right h3,
.inner-service-1-right h4 {
  font-size: clamp(22px, 4vw, 38px);
  line-height: 1.2;
  letter-spacing: -0.02em;
  margin-bottom: 16px;
}

.inner-service-1-right p {
  font-size: 16px;
  line-height: 1.75;
  color: #555560;
}

@media (max-width: 767px) {
  .inner-service-1-right h3,
  .inner-service-1-right h4 {
    font-size: clamp(20px, 5.5vw, 30px);
  }
}


/* ------------------------------------------------------------
   14. CONTACT PAGE
   ------------------------------------------------------------ */

/* Hero title "Any questions?" — scale down on mobile */
.tp-career-title.fs-100 {
  font-size: clamp(28px, 5vw, 68px) !important;
  line-height: 1.15 !important;
  letter-spacing: -0.025em;
}
@media (max-width: 767px) {
  .tp-career-title.fs-100 {
    font-size: clamp(28px, 8vw, 44px) !important;
  }
  .tp-contact-main-ptb {
    padding-top: 80px !important;
    padding-bottom: 60px !important;
  }
  /* Contact bottom funfact card: full width on mobile */
  .tp-contact-main-bottom .col-xl-9 {
    display: none;
  }
  .tp-contact-main-bottom .col-xl-3 {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
  }
}

/* Contact form improvements */
.tp-contact-form-input label {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom: 8px;
  display: block;
}

.tp-contact-form-input input,
.tp-contact-form-input textarea {
  font-size: 15px;
  line-height: 1.6;
  width: 100%;
}

@media (max-width: 767px) {
  .tp-contact-form-ptb {
    padding-top: 40px !important;
    padding-bottom: 60px !important;
  }
  .tp-contact-form-heading h3 {
    font-size: clamp(28px, 8vw, 44px) !important;
    line-height: 1.15;
    margin-bottom: 24px;
  }
}

/* Contact map */
@media (max-width: 767px) {
  .tp-contact-map-ptb {
    padding-top: 30px !important;
    padding-bottom: 50px !important;
  }
}

/* Contact location section subtitle label */
.tp-contact-form-heading .tp-section-subtitle {
  display: inline-block;
  margin-bottom: 10px;
}


/* ------------------------------------------------------------
   15. ABOUT PAGE
   ------------------------------------------------------------ */
@media (max-width: 767px) {
  /* About hero section */
  .tp-about-hero-ptb,
  .tp-breadcrumb-area {
    padding-top: 80px !important;
    padding-bottom: 50px !important;
  }
}


/* ------------------------------------------------------------
   16. SERVICE DETAIL PAGE
   ------------------------------------------------------------ */
@media (max-width: 767px) {
  .tp-service-details-content h3,
  .tp-service-details-content h4 {
    font-size: clamp(22px, 6vw, 34px);
    line-height: 1.2;
  }
  .tp-service-details-content p {
    font-size: 15px;
    line-height: 1.75;
  }
}


/* ------------------------------------------------------------
   17. CONSISTENT SECTION SUBTITLES (pre tag decoration)
   ------------------------------------------------------------ */
.tp-section-subtitle.pre {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  letter-spacing: 0.12em;
  font-weight: 700;
  text-transform: uppercase;
  color: #ED1C24;
}


/* ------------------------------------------------------------
   18. BUTTONS — CONSISTENT SIZING
   ------------------------------------------------------------ */
.tp-btn-black,
.btn-red-bg {
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

@media (max-width: 767px) {
  .tp-btn-black .tp-btn-black-text {
    font-size: 12px;
  }
}

/* b2c-about CTA button: inherit from b2c-system */
.b2c-about-cta {
  font-size: 12px;
  letter-spacing: 0.12em;
}


/* ------------------------------------------------------------
   19. BREADCRUMB / INNER PAGE HEADER
   ------------------------------------------------------------ */
.breadcrumb__area {
  padding-top: clamp(80px, 10vw, 140px) !important;
  padding-bottom: clamp(40px, 6vw, 80px) !important;
}

.breadcrumb__title {
  font-size: clamp(28px, 6vw, 72px) !important;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

@media (max-width: 767px) {
  .breadcrumb__list span {
    font-size: 13px;
  }
}


/* ------------------------------------------------------------
   20. IMAGE OVERFLOW PROTECTION
   ------------------------------------------------------------ */
img {
  max-width: 100%;
  height: auto;
}

.tp-project-thumb img,
.tp-service-thumb img,
.b2c-about-img-main img,
.b2c-about-img-sec img {
  display: block;
  max-width: 100%;
}


/* ------------------------------------------------------------
   21. OFFCANVAS MENU TYPOGRAPHY
   ------------------------------------------------------------ */
.tp-offcanvas-menu .tp-mainmenu > li > a,
.tp-offcanvas-menu .counter-row li > a {
  font-size: clamp(28px, 5vw, 52px);
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.tp-offcanvas-2-right-info-title {
  font-size: clamp(18px, 3vw, 26px);
  margin-bottom: 24px;
}

.tp-offcanvas-2-right-info-item label {
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 700;
  opacity: 0.6;
}

.tp-offcanvas-2-right-info-item a {
  font-size: 14px;
  line-height: 1.6;
}


/* ------------------------------------------------------------
   22. MOBILE NAV MENU (tp-mobile-menu-active)
   ------------------------------------------------------------ */
.tp-mobile-menu-active li a {
  font-size: 16px;
  line-height: 1.4;
  padding: 10px 0;
  display: block;
}
.tp-mobile-menu-active .tp-submenu li a {
  font-size: 14px;
  padding: 7px 0 7px 16px;
}


/* ------------------------------------------------------------
   23. ABOUT SECTION (HOME)
   ------------------------------------------------------------ */
@media (max-width: 767px) {
  .b2c-about-area {
    padding: 56px 0 64px !important;
  }
  .b2c-about-heading {
    font-size: clamp(28px, 7vw, 42px) !important;
    margin-top: 12px;
    margin-bottom: 18px;
  }
  .b2c-about-desc {
    font-size: 15px;
    line-height: 1.75;
  }
  .b2c-about-stats {
    margin: 24px 0 28px !important;
    padding: 20px 0 !important;
  }
  .b2c-about-stat strong {
    font-size: clamp(22px, 6vw, 32px) !important;
  }
  .b2c-about-stat span {
    font-size: 10px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .b2c-about-heading {
    font-size: clamp(30px, 5vw, 44px) !important;
  }
}


/* ------------------------------------------------------------
   24. GLOBAL MOBILE IMPROVEMENTS
   ------------------------------------------------------------ */

/* Prevent any horizontal scroll — do NOT touch .row margins (Bootstrap needs them) */
html, body {
  overflow-x: hidden;
}

@media (max-width: 767px) {
}

/* Text utility: prevent orphaned single words on final line */
h1, h2, h3, h4, h5, h6,
.tp-section-title,
.tp-work-title,
.b2c-about-heading,
.studio-hero-title {
  text-wrap: balance;
}

/* Smooth scroll */
html {
  scroll-behavior: smooth;
}

/* Focus outlines for accessibility */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 2px solid #ED1C24;
  outline-offset: 3px;
}


/* ------------------------------------------------------------
   HERO CTA BUTTON — "Let's Talk" floating bottom-right
   ------------------------------------------------------------ */

.b2c-hero-cta {
  position: absolute;
  bottom: 80px;
  right: 48px;
  z-index: 10;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  cursor: pointer;
}

/* Animated pulsing ring behind the button */
.b2c-hero-cta__ring {
  position: absolute;
  inset: -8px;
  border-radius: 60px;
  border: 1.5px solid rgba(255, 255, 255, 0.45);
  animation: b2c-cta-pulse 2.4s ease-in-out infinite;
  pointer-events: none;
}

@keyframes b2c-cta-pulse {
  0%   { transform: scale(1);    opacity: 0.7; }
  50%  { transform: scale(1.08); opacity: 0.3; }
  100% { transform: scale(1);    opacity: 0.7; }
}

/* Main pill button */
.b2c-hero-cta__inner {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #ED1C24;
  color: #ffffff;
  padding: 16px 28px;
  border-radius: 50px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition: background 0.28s ease, gap 0.28s ease, transform 0.28s ease;
  box-shadow: 0 8px 32px rgba(237, 28, 36, 0.45);
}

/* Arrow icon */
.b2c-hero-cta__arrow {
  flex-shrink: 0;
  transition: transform 0.28s ease;
}

/* Hover states */
.b2c-hero-cta:hover .b2c-hero-cta__inner {
  background: #ffffff;
  color: #111013;
  gap: 16px;
  transform: translateY(-2px);
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.22);
}

.b2c-hero-cta:hover .b2c-hero-cta__arrow {
  transform: translate(3px, -3px);
  stroke: #111013;
}

.b2c-hero-cta:hover .b2c-hero-cta__arrow path {
  stroke: #111013;
}

/* Mobile adjustments */
@media (max-width: 767px) {
  .b2c-hero-cta {
    bottom: 28px;
    right: 20px;
  }
  .b2c-hero-cta__inner {
    padding: 13px 22px;
    font-size: 12px;
    gap: 8px;
  }
  .b2c-hero-cta__ring {
    display: none; /* cleaner on small screens */
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .b2c-hero-cta {
    bottom: 32px;
    right: 32px;
  }
}

/* ------------------------------------------------------------
   HERO VIDEO — full-bleed responsive fix
   Ensures the video background fills the entire hero area on
   every screen size instead of appearing cut or misaligned.
   ------------------------------------------------------------ */
.tp-hero-area {
  min-height: 100svh;
  /* overflow: hidden already set inline; reinforce it here */
}

/* On tablet and up, allow taller content to expand past viewport height */
@media (min-width: 768px) {
  .tp-hero-area {
    min-height: clamp(600px, 100svh, 1000px);
  }
}