/* =============================================================
   Mawatrix Brand Theme Overrides
   Primary: #F3500F (Mawatrix Orange)
   Typography: Poppins (body/UI text), Rajdhani (headings/display)
   ============================================================= */

/* --- Brand Color Variables
     Loaded after all other styles AND re-declared in wp_head/999
     to override any Redux color preset inline blocks              --- */
:root {
  --primary: #F3500F;
  --gradient1: radial-gradient(50% 50% at 50% 50%, #FB8F10 0%, #F3500F 100%);
  --gradient2: linear-gradient(144.12deg, #FB8F10 14.68%, #F3500F 81.68%);
  --gradient3: linear-gradient(136.55deg, #FB8F10 5.49%, #F3500F 100%);
  --gradient4: linear-gradient(213.44deg, #000000 43.78%, #BA4811 124.39%);
  --gradient5: linear-gradient(150deg, #000000 29.69%, #FB8F10 51.45%, #F3500F 82.71%);
  --gradient6: linear-gradient(125.1deg, #232323 28.16%, #A23F1E 120.37%);
}

/* Ensure Redux data-color-primary attribute overrides cannot change the color */
[data-color-primary] {
  --primary: #F3500F;
}

/* ---------------------------------------------------------------
   Typography
   Body / UI text  → Poppins
   Headings / display → Rajdhani (kept for visual impact)
--------------------------------------------------------------- */
body,
p,
li,
td,
th,
label,
input,
select,
textarea,
button,
a {
  font-family: "Poppins", "Rajdhani", serif;
}

h1, h2, h3, h4, h5, h6,
.heading,
.title {
  font-family: "Rajdhani", serif;
}

/* ---------------------------------------------------------------
   Active right-nav dots
   Default: white background + black icon
   Mawatrix: orange background + white icon
--------------------------------------------------------------- */
.right-nav a.active {
  background-color: #F3500F !important;
  color: #ffffff !important;
}

/* ---------------------------------------------------------------
   Hero CTA arrow button icon circle
   Default: white circle background
   Mawatrix: orange circle background
--------------------------------------------------------------- */
.section-banner .bottom .btns-link .icon {
  background-color: #F3500F !important;
  color: #ffffff !important;
}

/* Hover: keep the orange and invert the arrow */
.section-banner .bottom .btns-link:hover .icon {
  background-color: #ffffff !important;
  color: #F3500F !important;
}

/* ---------------------------------------------------------------
   Contact form "Send Message" button icon circle
   Default: dark background
   Mawatrix: orange accent
--------------------------------------------------------------- */
.form-contact .bot-btn button .icon {
  background: #F3500F !important;
  color: #ffffff !important;
}

.form-contact .bot-btn button:hover .icon {
  background: #ffffff !important;
  color: #F3500F !important;
}

/* Pricing plan / other bot-btn anchor buttons */
.pricing-item .bot-btn a .icon {
  background: #F3500F !important;
  color: #ffffff !important;
}

/* ---------------------------------------------------------------
   Active accordion item — left orange accent border
   (services accordion and FAQ accordion)
--------------------------------------------------------------- */
.accordion-item:not(.collapsed) {
  border-left: 3px solid #F3500F;
  padding-left: 20px;
}

/* Active accordion icon ring — orange border */
.accordion-item:not(.collapsed) .accordion-head span.icon {
  border-color: #F3500F !important;
}

/* ---------------------------------------------------------------
   Status / availability dot — already uses var(--primary),
   confirmed here explicitly as a safety net
--------------------------------------------------------------- */
.box-status .dot {
  background-color: #F3500F !important;
}

/* ---------------------------------------------------------------
   Hover underline / link accent — orange
--------------------------------------------------------------- */
.section-banner .bottom .btns-link:hover,
.section-banner .bottom .btns-link1:hover,
.form-contact .bot-btn button:hover,
.right-nav a:hover {
  color: #F3500F !important;
}

/* ---------------------------------------------------------------
   Service icon backgrounds — always orange gradient
--------------------------------------------------------------- */
.section-services .services-wrap .heading .icon {
  background: var(--gradient3) !important;
}

/* Avatar ring gradient — always Mawatrix orange */
.avatar-wrap {
  background: var(--gradient1) !important;
}

/* =============================================================
   Mawatrix Responsive Overrides
   Fixes overlay stacking, text scaling, and layout on all devices
   ============================================================= */

/* ---------------------------------------------------------------
   1. OVERLAY / Z-INDEX FIXES
   Sidebar canvas and its overlay must sit above all content
--------------------------------------------------------------- */
.tf-canvas {
  z-index: 9999 !important;
}

.tf-sidebar-menu .overlay,
.tf-canvas .overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  z-index: 9998 !important;
  display: none;
}

.tf-sidebar-menu.open .overlay,
.tf-canvas.open .overlay {
  display: block;
}

/* Section background overlays — prevent content bleed */
.section-banner,
.section-hero,
.section-services,
.section-contact {
  position: relative;
  overflow: hidden;
}
/* section-about intentionally omitted — overflow:hidden breaks scroll animations */

/* ---------------------------------------------------------------
   2. HEADER — 3-column layout: logo | status | location+time
   Stack on small screens, space evenly on medium+
--------------------------------------------------------------- */
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
}

.header-inner .logo-wrap { flex: 0 0 auto; }
.header-inner .box-status { flex: 0 0 auto; }
.header-inner .header-right { flex: 0 0 auto; text-align: right; }

/* ---------------------------------------------------------------
   3. HAMBURGER MENU BUTTON — always visible on mobile
--------------------------------------------------------------- */
.tf-btn-menu {
  position: fixed;
  top: 20px;
  left: 20px;
  z-index: 9990;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.6);
  border-radius: 8px;
  cursor: pointer;
}

/* ---------------------------------------------------------------
   4. HERO / BANNER — scale avatar and text for every breakpoint
--------------------------------------------------------------- */
.section-banner .image .avatar {
  max-width: 100%;
  overflow: hidden;
}

.section-banner .image .avatar img {
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* ---------------------------------------------------------------
   5. RESPONSIVE BREAKPOINTS
--------------------------------------------------------------- */

/* --- Large tablets (max 1024px) --- */
@media (max-width: 1024px) {
  .section-banner .infor .text p {
    font-size: 15px !important;
    line-height: 1.6 !important;
  }

  .header-inner {
    gap: 6px;
  }
}

/* --- Tablets (max 768px) --- */
@media (max-width: 768px) {
  /* Header: stack to 2 rows on tablets */
  .section-header .header-inner {
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
    text-align: center;
  }

  .section-header .header-inner .logo-wrap {
    width: 100%;
    text-align: center;
    margin-bottom: 4px;
  }

  .section-header .header-inner .box-status,
  .section-header .header-inner .header-right {
    flex: 1 1 auto;
    text-align: center;
  }

  /* Hero image constrained */
  .section-banner .image .avatar {
    max-width: 90vw;
    margin: 0 auto;
  }

  /* CTA buttons stack on mobile */
  .section-banner .bottom {
    flex-direction: column;
    align-items: center;
    gap: 12px;
  }

  .section-banner .bottom .btns-link,
  .section-banner .bottom .btns-link1 {
    width: 100%;
    max-width: 280px;
    justify-content: center;
  }

  /* Hero tagline text */
  .section-banner .infor .text p {
    font-size: 14px !important;
    line-height: 1.6 !important;
  }

  /* Counter indicators wrap on mobile */
  .indicators .indicators-wrap {
    flex-direction: column;
    gap: 20px;
  }

  /* Section padding reduced */
  .wrap-section {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  /* Works grid: single column */
  .works-wrap {
    grid-template-columns: 1fr !important;
  }

  /* Accordion: remove left border padding on very small screens */
  .accordion-item:not(.collapsed) {
    padding-left: 12px;
  }

  /* Process section steps */
  .section-process .row > [class*="col-"] {
    margin-bottom: 20px;
  }

  /* Pricing: single column */
  .section-pricing .row > [class*="col-"] {
    margin-bottom: 24px;
  }

  /* Footer: center everything */
  .tf-footer .coppyright {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 8px;
  }
}

/* --- Mobile (max 576px) --- */
@media (max-width: 576px) {
  /* Header: single column stacked */
  .section-header .header-inner {
    flex-direction: column;
    align-items: center;
    padding: 10px 0;
    gap: 8px;
  }

  .section-header .header-inner .header-right {
    text-align: center;
  }

  /* Display headings — aggressive scale-down */
  .text-display-1 {
    font-size: 48px !important;
    line-height: 52px !important;
    letter-spacing: -1px !important;
  }

  .text-display-2 {
    font-size: 36px !important;
    line-height: 40px !important;
    letter-spacing: -1px !important;
  }

  h1, .h1 {
    font-size: 32px !important;
    line-height: 38px !important;
  }

  h2, .h2 {
    font-size: 24px !important;
    line-height: 30px !important;
  }

  h3, .h3 {
    font-size: 20px !important;
    line-height: 26px !important;
  }

  h4, .h4 {
    font-size: 18px !important;
    line-height: 24px !important;
  }

  h5, .h5 {
    font-size: 16px !important;
    line-height: 22px !important;
  }

  h6, .h6 {
    font-size: 15px !important;
    line-height: 20px !important;
  }

  .sub-heading {
    font-size: 14px !important;
    line-height: 22px !important;
  }

  .text-body-1 {
    font-size: 13px !important;
    line-height: 20px !important;
  }

  .text-body-2 {
    font-size: 12px !important;
    line-height: 18px !important;
  }

  /* Hero avatar image */
  .section-banner .image .avatar {
    max-width: 85vw;
  }

  /* Hero tagline */
  .section-banner .infor .text p {
    font-size: 13px !important;
    line-height: 1.65 !important;
  }

  /* Social links — compact on small screens */
  .social-links {
    gap: 10px !important;
  }

  .social-links li a {
    width: 40px !important;
    height: 40px !important;
    font-size: 16px !important;
  }

  /* Services accordion inner padding */
  .section-services .section-services-inner {
    padding: 20px 12px !important;
  }

  .section-services .services-wrap .heading .title {
    font-size: 22px !important;
    line-height: 28px !important;
  }

  /* Tech stack items */
  .section-tech-stack .tech-stack-inner {
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
  }

  /* Testimonial card */
  .section-testimonial-inner {
    padding: 20px 16px 36px !important;
  }

  /* Contact form */
  .section-contact-inner {
    padding: 20px 16px 30px !important;
  }

  .section-contact-inner .heading {
    margin-bottom: 28px !important;
  }

  /* CTA / marquee section */
  .cta .title {
    font-size: 36px !important;
    line-height: 42px !important;
  }

  /* Playground image slider — let Next.js fill image stretch to 100%×100% */
  .box-playground .swiper-slide img {
    width: 100% !important;
    height: 100% !important;
    border-radius: 0 !important;
  }

  /* Footer */
  .tf-footer .social-links {
    flex-wrap: wrap;
    justify-content: center;
  }
}

/* ---------------------------------------------------------------
   6. SERVICES ACCORDION — fluid responsive titles, all breakpoints
--------------------------------------------------------------- */

/* Desktop base: use clamp so it scales between large and medium screens */
.section-services .services-wrap .heading .title,
.section-services .services-wrap .heading .title span {
  font-size: clamp(20px, 3vw, 40px) !important;
  line-height: 1.25 !important;
  letter-spacing: -0.02em !important;
  word-spacing: normal !important;
  gap: 4px !important;
}

.section-services .accordion-item.collapsed .accordion-head > .title {
  font-size: clamp(18px, 2.5vw, 36px) !important;
  line-height: 1.25 !important;
  letter-spacing: -0.02em !important;
  word-spacing: normal !important;
  gap: 4px !important;
}

/* --- 1150px: medium desktop / landscape tablet --- */
@media (max-width: 1150px) {
  .section-services .services-wrap .heading .title,
  .section-services .services-wrap .heading .title span {
    font-size: 30px !important;
    line-height: 36px !important;
  }

  .section-services .accordion-item.collapsed .accordion-head > .title {
    font-size: 26px !important;
    line-height: 32px !important;
  }
}

/* --- 991px: tablet portrait --- */
@media (max-width: 991px) {
  .section-services .services-wrap .heading .title,
  .section-services .services-wrap .heading .title span {
    font-size: 26px !important;
    line-height: 32px !important;
  }

  .section-services .accordion-item.collapsed .accordion-head > .title {
    font-size: 22px !important;
    line-height: 28px !important;
  }
}

@media (max-width: 767px) {
  /* Active (open) service item title */
  .section-services .services-wrap .heading .title,
  .section-services .services-wrap .heading .title span {
    font-size: 26px !important;
    line-height: 32px !important;
    letter-spacing: -0.5px !important;
  }

  /* Collapsed (inactive) service item title */
  .section-services .accordion-item.collapsed .accordion-head > .title {
    font-size: 22px !important;
    line-height: 28px !important;
    letter-spacing: 0px !important;
  }
}

@media (max-width: 576px) {
  .section-services .services-wrap .heading .title,
  .section-services .services-wrap .heading .title span {
    font-size: 20px !important;
    line-height: 26px !important;
    letter-spacing: 0px !important;
  }

  .section-services .accordion-item.collapsed .accordion-head > .title {
    font-size: 18px !important;
    line-height: 24px !important;
  }

  /* Tighten icon and inner padding */
  .section-services .services-wrap .heading .icon {
    width: 40px !important;
    height: 40px !important;
    font-size: 16px !important;
    flex-shrink: 0;
  }

  .section-services .services-wrap .list-text {
    padding-left: 0 !important;
    margin-left: 0 !important;
  }
}

@media (max-width: 400px) {
  .section-services .services-wrap .heading .title,
  .section-services .services-wrap .heading .title span {
    font-size: 18px !important;
    line-height: 22px !important;
  }

  .section-services .accordion-item.collapsed .accordion-head > .title {
    font-size: 16px !important;
    line-height: 20px !important;
  }
}

/* --- Small phones (max 400px) global --- */
@media (max-width: 400px) {
  .text-display-1 {
    font-size: 38px !important;
    line-height: 44px !important;
  }

  .text-display-2 {
    font-size: 30px !important;
    line-height: 36px !important;
  }

  h1, .h1 { font-size: 28px !important; line-height: 34px !important; }
  h2, .h2 { font-size: 22px !important; line-height: 28px !important; }
  h3, .h3 { font-size: 18px !important; line-height: 24px !important; }

  /* Header status badge: hide location on tiny phones, keep status */
  .section-header .header-inner .header-right .place {
    display: none;
  }

  .section-banner .image .avatar {
    max-width: 95vw;
  }

  /* Buttons */
  .section-banner .bottom .btns-link,
  .section-banner .bottom .btns-link1 {
    max-width: 100%;
    font-size: 13px;
  }
}

/* ---------------------------------------------------------------
   7. SECTION SEPARATION — global vertical spacing
   Root cause: Jayden theme relies on Elementor's
   .wrapper-content-1 .elementor-widget-container > * { padding: 80px 0 }
   Our front-page.php sections sit directly in .wrapper-content-1
   without Elementor wrappers → they get zero automatic spacing.
   Fix: replicate that padding on every section, at all viewports.
--------------------------------------------------------------- */

/* ── Reset ALL theme negative margins on sections and their inner .wrap-section ── */
.section-about,
.section-about .wrap-section,
.section-about.v2 .wrap-section,
.section-tech-stack,
.section-tech-stack .wrap-section,
.section-tech-stack.v2 .wrap-section,
.section-partners,
.section-partners .wrap-section,
.section-partners.v2 .wrap-section,
.section-partners.v3 .wrap-section,
.section-process,
.section-process .wrap-section,
.section-process.v2 .wrap-section,
.section-awards,
.section-awards .wrap-section,
.section-blog-teaser,
.section-blog-teaser .wrap-section,
.section-faqs,
.section-faqs .wrap-section,
.section-testimonial,
.section-testimonial .wrap-section,
.section-selected-works,
.section-selected-works .wrap-section,
.section-all-projects,
.section-all-projects .wrap-section,
.section-services,
.section-services .wrap-section,
.section-contact,
.section-contact .wrap-section,
.section-experiences .wrap-section,
.section-experiences.v2 .wrap-section {
  margin-top: 0 !important;
}

/* ── Global base padding: enough to separate sections, not airy ── */
.section-has-dot:not(.section-banner) {
  padding-top: 40px !important;
  padding-bottom: 40px !important;
}

/* section-hero: placed AFTER the global rule (same specificity 0,2,0
   via .section-has-dot.section-hero), cascade order makes this win */
.section-has-dot.section-hero {
  padding: 28px 0 40px !important;
}

/* section-services: zero bottom padding so the next section's
   padding-top handles the gap. Placed after the global rule so
   cascade order ensures this wins (same specificity 0,2,0). */
.section-has-dot.section-services {
  padding-bottom: 0 !important;
}

/* ── Playground: only the card itself clips to its border-radius ── */
.box-playground {
  overflow: hidden !important;
}

/* ── Playground slide desktop defaults (overridden on mobile below) ── */
.box-playground .swiper-slide { width: 300px; }
/* Override theme's .slider-playground a { max-width:191px; display:flex } at all sizes */
.box-playground .swiper-slide a,
.box-playground .swiper-slide > div {
  display: block !important;
  width: 300px !important;
  max-width: 300px !important;
  height: 375px !important;
  cursor: zoom-in;
}

/* ── Every section creates its own stacking context ── */
.section-has-dot {
  isolation: isolate;
  position: relative;
}

/* ── Text-tab headings: proportional line-height at all sizes ── */
.text-tab,
.section-experiences.v2 .text-tab,
.section-partners.v3 .wrap-section .text-tab,
.section-process.v2 .wrap-section .text-tab {
  line-height: 1.3 !important;
  letter-spacing: -0.5px !important;
}

/* ── Tablet (≤991px) ── */
@media (max-width: 991px) {
  .section-has-dot:not(.section-banner) {
    padding-top: 32px !important;
    padding-bottom: 32px !important;
  }

  .section-has-dot.section-hero {
    padding: 20px 0 32px !important;
  }

  .section-has-dot.section-services {
    padding-bottom: 0 !important;
  }

  /* Text-tab: remove negative top margin that causes bleed on narrow screens */
  .text-tab,
  .section-experiences.v2 .text-tab,
  .section-partners.v3 .wrap-section .text-tab,
  .section-process.v2 .wrap-section .text-tab {
    margin-top: 0 !important;
  }

  /* Section headings */
  .section-process .heading.text-display-2,
  .wrap-section > .text-display-2,
  .wrap-section > .heading.text-display-2 {
    font-size: 36px !important;
    line-height: 1.2 !important;
    letter-spacing: -1px !important;
    margin-bottom: 24px !important;
  }

  /* section-experiences: reduce paragraph spacing */
  .experiences-wrap .item {
    padding-top: 12px !important;
    padding-bottom: 16px !important;
  }

  /* Section about: reduce heading gap */
  .section-about .heading {
    margin-bottom: 40px !important;
  }

  /* Services inner box */
  .section-services .section-services-inner {
    padding: 32px 24px !important;
  }
  .section-services .subtitle {
    margin-bottom: 28px !important;
  }
}

/* About intro → gallery CTA */
.section-about .about-more-wrap {
  margin-top: 24px;
}

/* /about page hero */
.about-page-hero .about-page-hero-p {
  margin-top: 14px;
}
.about-page-hero .about-page-principles {
  list-style: none;
  margin: 28px 0 0;
  padding: 0;
}
.about-page-hero .about-page-principles li {
  margin-bottom: 18px;
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.about-page-hero .about-page-principles li:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}
.about-page-hero .about-page-principles-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
  margin-bottom: 6px;
}
.about-page-hero .about-page-principles-line {
  display: block;
  font-size: 15px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.82);
}

.about-services-intro-section .about-services-intro-title {
  margin-top: 12px;
  margin-bottom: 0;
  font-size: clamp(1.75rem, 4vw, 2.25rem) !important;
  line-height: 1.2 !important;
  letter-spacing: -0.02em !important;
}
.about-services-intro-section .about-services-intro-body {
  margin-top: 16px;
  margin-bottom: 0;
  max-width: 720px;
  color: rgba(255, 255, 255, 0.65);
  line-height: 1.65;
}

/* ── Mobile (≤767px) ── */
@media (max-width: 767px) {
  .section-has-dot:not(.section-banner) {
    padding-top: 24px !important;
    padding-bottom: 24px !important;
  }

  .section-has-dot.section-hero {
    padding: 16px 0 24px !important;
  }

  .section-has-dot.section-services {
    padding-bottom: 0 !important;
  }

  .text-tab,
  .section-experiences.v2 .text-tab,
  .section-partners.v3 .wrap-section .text-tab,
  .section-process.v2 .wrap-section .text-tab {
    line-height: 1.25 !important;
    margin-top: 0 !important;
    margin-bottom: 16px !important;
  }

  .section-process .heading.text-display-2,
  .wrap-section > .text-display-2,
  .wrap-section > .heading.text-display-2 {
    font-size: 28px !important;
    line-height: 1.2 !important;
    margin-bottom: 20px !important;
  }

  .wrap-section > .text-body-2.subtitle,
  .wrap-section > .dot-before.subtitle {
    margin-bottom: 8px !important;
  }

  .section-services .section-services-inner {
    padding: 20px 16px !important;
  }
  .section-services .subtitle {
    margin-bottom: 20px !important;
  }
}

/* ── Small phones (≤576px) ── */
@media (max-width: 576px) {
  .section-has-dot:not(.section-banner) {
    padding-top: 16px !important;
    padding-bottom: 16px !important;
  }

  .section-has-dot.section-hero {
    padding: 12px 0 16px !important;
  }

  .section-has-dot.section-services {
    padding-bottom: 0 !important;
  }

  .section-process .heading.text-display-2,
  .wrap-section > .text-display-2,
  .wrap-section > .heading.text-display-2 {
    font-size: 24px !important;
    line-height: 1.2 !important;
    margin-bottom: 16px !important;
  }

  .section-services .section-services-inner {
    padding: 16px 12px !important;
  }
  .section-services .subtitle {
    margin-bottom: 16px !important;
  }
}

/* ── Footer logo: override theme avatar-wrap img stretch ── */
.tf-footer .avatar .image.avatar-wrap img {
  position: static !important;
  top: auto !important;
  left: auto !important;
  transform: none !important;
  width: 180px !important;
  height: auto !important;
  object-fit: contain !important;
}

/* ── Works section: View All Projects button ── */
.works-view-more {
  display: flex;
  justify-content: center;
  margin-top: 48px;
}

.works-more-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 36px;
  border-radius: 50px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  transition: gap 0.3s ease, transform 0.3s ease;
}

.works-more-btn i {
  font-size: 14px;
  transition: transform 0.3s ease;
}

.works-more-btn:hover {
  gap: 16px;
}

.works-more-btn:hover i {
  transform: translate(2px, -2px);
}

/* ── All Projects page ── */
.projects-page-hero {
  padding-top: 12px;
  padding-bottom: 28px;
  text-align: center;
}

.projects-page-hero .sub-heading {
  margin-bottom: 10px;
}

.projects-page-hero h1 {
  margin-bottom: 14px;
  line-height: 1.1;
}

.projects-page-desc {
  color: rgba(255,255,255,0.5);
  max-width: 540px;
  margin: 0 auto;
}

.section-all-projects {
  padding-bottom: 20px;
}

/* Project cards: fixed aspect frame + fill image so previews paint full area
   immediately (avoids lazy blank + min-height / height:auto layout gaps). */
.works-wrap .works-item .image {
  position: relative;
}
.works-wrap .works-item .image > .works-image-inner {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 7 / 5;
  overflow: hidden;
}
@media (max-width: 767px) {
  .works-wrap .works-item .image > .works-image-inner img {
    min-height: 0 !important;
  }
}

/* Title links white on project cards (matches home page) */
.section-all-projects .works-item .title a,
.section-all-projects .works-item .title a:hover {
  color: #fff !important;
}

/* ── Footer CTA marquee — pure CSS replacement for infinityslide.js ── */
@keyframes cta-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.cta-marquee-track {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 29px;
  width: max-content;
  animation: cta-marquee 18s linear infinite;
  will-change: transform;
}

/* Pause on hover for accessibility */
.cta:hover .cta-marquee-track {
  animation-play-state: paused;
}

/* Re-use the existing dot style even without infiniteslide_wrap selector */
.cta-marquee-track .dot {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background-color: #fff;
  flex-shrink: 0;
}

/* ── Services accordion: alignment fix + arrow indicator ── */

/* When collapsed: collapse icon to zero width so title truly left-aligns */
.section-services .accordion-item.collapsed .accordion-head > .icon {
  width: 0 !important;
  min-width: 0 !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
  opacity: 0 !important;
  visibility: hidden !important;
}

/* Remove the negative-margin left-shift hack — no longer needed */
.section-services .accordion-item.collapsed .accordion-head > .title {
  margin-left: 0 !important;
}

/* Arrow chevron indicator — replaces (01) (02) etc. */
.svc-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  line-height: 1;
  font-weight: 300;
  color: rgba(255, 255, 255, 0.4);
  margin-left: auto;
  transition: transform 0.35s ease, color 0.35s ease;
  transform: rotate(0deg);
  align-self: center;
}

/* Open state: rotate 90° so › points downward */
.accordion-item:not(.collapsed) .svc-arrow {
  transform: rotate(90deg);
  color: var(--primary);
}

/* Title div must fill the remaining space so margin-left:auto works on arrow */
.section-services .services-wrap .heading .title {
  flex: 1 !important;
  min-width: 0;
}

/* ── Hero indicator counters: large fill on mobile ── */
@media (max-width: 767px) {
  .indicators .wg-counter.style-1 span.text-display-2 {
    font-size: clamp(80px, 27vw, 120px) !important;
    line-height: 1 !important;
    letter-spacing: -2px !important;
  }
  /* Ensure the counter row stretches full width */
  .indicators .wg-counter.style-1 > div {
    width: 100%;
  }
  /* Give the label more space at the top so the number has room */
  .indicators .indicators-item .indicators-title {
    margin-bottom: 24px !important;
  }
}

/* ── About / playground section: full-bleed responsive slides ── */
@media (max-width: 767px) {
  /* Tighten heading gap above the playground card */
  .section-about .heading {
    margin-bottom: 20px !important;
    gap: 12px !important;
  }

  /* Card: no horizontal padding, clip overflow to border-radius */
  .box-playground {
    padding: 16px 0 0 !important;
    overflow: hidden !important;
  }
  .box-playground .top {
    margin-bottom: 12px !important;
    padding: 0 16px !important;
  }

  /* No side inset — image fills card edge to edge (overflow:hidden clips to border-radius) */
  .box-playground .wrap-swiper {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* Slides: full swiper width */
  .box-playground .swiper-slide {
    width: 100% !important;
    max-width: 100% !important;
  }
  /* Link/image container: fill slide, maintain 4:5 ratio */
  .box-playground .swiper-slide a,
  .box-playground .swiper-slide > div,
  .slider-playground.box-playground a {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    /* card ≈ 100vw - 30px container padding; no wrap-swiper inset */
    height: calc((100vw - 30px) * 1.25) !important;
  }
}

/* ── Hero "more-infor" pill bar: centred stacked layout on mobile ── */
@media (max-width: 767px) {
  .indicators .more-infor {
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    padding: 14px 20px !important;
    border-radius: 20px !important;
    text-align: center !important;
  }

  /* Centre the customer-box row */
  .indicators .more-infor .customer-box {
    justify-content: center !important;
  }

  /* Hide the vertical divider — looks odd in centred column layout */
  .indicators .more-infor .worldwide.style-1 .line {
    display: none !important;
  }

  /* Centre the worldwide row */
  .indicators .more-infor .worldwide.style-1 {
    justify-content: center !important;
    gap: 10px !important;
  }

  /* Slightly smaller globe icon */
  .indicators .more-infor .worldwide.style-1 .icon {
    font-size: 30px !important;
  }
}

/* ── Indicator cards: CSS-only fade-in (no WOW.js, no visibility:hidden flash) ── */
@keyframes mwx-fade-up {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.indicators-fade {
  animation: mwx-fade-up 0.55s ease both;
}