/*
Theme Name: PixelTX
Author: Beuve
Description: Tema WordPress clásico PixelTX con Portfolio, Blog, Contact Form 7, menús, assets y plantillas personalizadas.
Version: 1.8.7.49
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: pixeltx
Tags: custom-logo, custom-menu, featured-images, translation-ready
*/


@font-face {
  font-family: "Museo 300";
  src: url("assets/fonts/Museo300-Regular.woff") format("woff");
  font-style: normal;
  font-weight: 300;
  font-display: swap;
}

@font-face {
  font-family: "Museo 700";
  src: url("assets/fonts/Museo700-Regular.woff") format("woff");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

:root {
  --pixeltx-primary: #ffc629;
  --pixeltx-accent: #ffe36c;
  --pixeltx-arrow-color: #ffe36c;
  --pixeltx-ink: #0c0d0e;
  --pixeltx-paper: #f1f1f1;
  --pixeltx-dark-background: #171819;
  --pixeltx-on-dark: #ffffff;
  --pixeltx-muted: #6c7074;
  --pixeltx-light-surface: #f2f6f9;
  --pixeltx-light-border: #dce4ec;
  --pixeltx-dark-surface: #1e2022;
  --pixeltx-dark-border: #393939;
  --pixeltx-sticky-solid: #ffc629;
  --pixeltx-sticky-background: rgba(255, 198, 41, 0.8);
  --pixeltx-submenu-background: rgba(255, 198, 41, 0.8);
  --pixeltx-mobile-menu-background: #171819;
  --pixeltx-navigation-hover: rgba(255, 255, 255, 0.18);
  --pixeltx-button-primary: var(--pixeltx-primary);
  --pixeltx-button-primary-text: var(--pixeltx-on-dark);
  --pixeltx-button-hover: var(--pixeltx-accent);
  --pixeltx-button-hover-text: var(--pixeltx-ink);
  --pixeltx-button-secondary: var(--pixeltx-light-surface);
  --pixeltx-button-secondary-text: var(--pixeltx-ink);
  --pixeltx-button-border: var(--pixeltx-light-border);
  --pixeltx-button-image: var(--pixeltx-button-primary);
  --pixeltx-button-image-hover: var(--pixeltx-button-hover);
  --pixeltx-button-image-text: var(--pixeltx-button-primary-text);
  --pixeltx-button-play-ring: var(--pixeltx-accent);
  --pixeltx-button-image-shadow: rgba(255, 198, 41, 0.4);
  --pixeltx-font-heading: "Museo 700", "Museo-700", sans-serif;
  --pixeltx-font-body: "Museo 300", "Museo-300", sans-serif;
}

html {
  scroll-behavior: smooth;
}

body {
  background: var(--pixeltx-dark-background);
}

.site-main {
  min-height: 55vh;
  padding-top: 92px;
}

.site-branding,
.mobile-branding,
.footer-branding {
  display: inline-flex;
  align-items: center;
}

.site-branding .custom-logo-link,
.mobile-branding .custom-logo-link,
.footer-branding .custom-logo-link {
  display: inline-flex;
  align-items: center;
}

.site-branding .custom-logo,
.mobile-branding .custom-logo,
.footer-branding .custom-logo {
  width: auto;
  max-height: 48px;
}

.pixeltx-wordmark {
  color: #ffffff;
  font-family: "Fahkwang", sans-serif;
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  line-height: 1;
  text-transform: uppercase;
}

.footer .pixeltx-wordmark {
  color: var(--pixeltx-ink);
}

.mobile-header-wrapper-style .pixeltx-wordmark {
  color: var(--pixeltx-paper);
  font-size: 1rem;
}

.header-account {
  align-items: center;
  display: flex;
}

.header .main-header .header-account .menu-mobile {
  appearance: none;
  background: transparent;
  border: 0;
  color: #ffffff;
  cursor: pointer;
  display: none;
  font-family: "Fahkwang", sans-serif;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  padding: 10px;
  text-transform: uppercase;
}

.menu-mobile:focus-visible,
.btn-close:focus-visible,
.scroll-to-top:focus-visible,
.menu-expand:focus-visible {
  outline: 2px solid var(--pixeltx-accent);
  outline-offset: 4px;
}

.mobile-header-wrapper-style .mobile-menu .sub-menu {
  display: none;
}

.mobile-header-wrapper-style .mobile-menu .is-open > .sub-menu {
  display: block;
}

.mobile-header-wrapper-style .mobile-menu .menu-expand {
  appearance: none;
  background: transparent;
  border: 0;
  color: var(--pixeltx-paper);
}

.mobile-header-wrapper-style .mobile-menu .menu-expand::before {
  content: "+";
  font-size: 1.5rem;
}

.mobile-header-wrapper-style .mobile-menu .is-open > .menu-expand::before {
  content: "−";
}

.site-main .pixeltx-entry {
  color: var(--pixeltx-paper);
  margin: 0 auto;
  max-width: 1200px;
  padding: 76px 24px;
}

.site-main .pixeltx-entry a {
  color: var(--pixeltx-accent);
}

.site-main .pixeltx-entry .entry-title {
  color: var(--pixeltx-paper);
  margin-bottom: 1rem;
}

.site-main .pixeltx-entry .entry-title a {
  color: inherit;
  text-decoration: none;
}

.site-main .pixeltx-entry .entry-content > *:last-child {
  margin-bottom: 0;
}

.footer .footer-description {
  color: var(--pixeltx-ink);
  max-width: 25rem;
}

.footer .footer-menu-heading {
  color: var(--pixeltx-ink);
  margin-bottom: 0;
}

.footer .menu-footer,
.footer .menu-bottom {
  list-style: none;
  padding-left: 0;
}

.footer .menu-bottom li {
  list-style: none;
}

.scroll-to-top {
  align-items: center;
  border: 0;
  color: #ffffff;
  display: none;
  font-size: 1.4rem;
  justify-content: center;
  line-height: 1;
  position: fixed;
}

.screen-reader-text {
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  word-wrap: normal !important;
}

.screen-reader-text:focus {
  background-color: #ffffff;
  clip: auto !important;
  clip-path: none;
  color: var(--pixeltx-ink);
  display: block;
  font-size: 0.875rem;
  font-weight: 700;
  height: auto;
  left: 8px;
  line-height: normal;
  padding: 14px 18px;
  text-decoration: none;
  top: 8px;
  width: auto;
  z-index: 100000;
}

@media (max-width: 1199.98px) {
  .header {
    padding-left: 24px;
    padding-right: 24px;
  }

  .header .main-header .header-account .menu-mobile {
    display: inline-flex;
  }
}

@media (max-width: 575.98px) {
  .header {
    padding-left: 15px;
    padding-right: 15px;
  }

  .site-main {
    padding-top: 76px;
  }

  .site-main .pixeltx-entry {
    padding: 52px 20px;
  }
}

/* Portfolio — detail template based on portfolio-detail-3.html */
.pixeltx-portfolio-detail {
  padding-top: 0;
}

.pixeltx-portfolio-detail .banner-general-2 img.pixeltx-portfolio-hero-image {
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.pixeltx-portfolio-detail .pixeltx-portfolio-description > :first-child {
  margin-top: 0;
}

.pixeltx-portfolio-detail .pixeltx-portfolio-description > :last-child {
  margin-bottom: 0;
}

.pixeltx-portfolio-detail .horizontal-item img {
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.pixeltx-portfolio-detail .box-button-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
}

.pixeltx-portfolio-detail .box-button-tags .btn-tags {
  margin: 0;
}

@media (max-width: 991.98px) {
  .pixeltx-portfolio-detail .box-button-tags {
    justify-content: flex-start;
    margin-top: 30px;
  }
}

/* Portfolio Detail 3: applied automatically to every Portfolio project. */
.single-portfolio .pixeltx-portfolio-detail-3 {
  min-height: 55vh;
}

.single-portfolio .pixeltx-portfolio-detail-3 .pixeltx-portfolio-hero-image {
  display: block;
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.single-portfolio .pixeltx-portfolio-detail-3 .horizontal-item img {
  display: block;
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.single-portfolio .pixeltx-portfolio-detail-3 .pixeltx-portfolio-description > :first-child {
  margin-top: 0;
}

.single-portfolio .pixeltx-portfolio-detail-3 .pixeltx-portfolio-description > :last-child {
  margin-bottom: 0;
}


/*
 * Portfolio Detail 3 — viewport media rules.
 *
 * The featured image intentionally fills the viewport and crops from its
 * centre. Gallery images preserve their own aspect ratio and scale by height.
 */
.single-portfolio .pixeltx-portfolio-detail-3 .section-banner-portfolio-detail-3 {
  height: 100vh;
  height: 100svh;
  height: 100dvh;
  min-height: 100vh;
  min-height: 100svh;
  min-height: 100dvh;
  overflow: hidden;
}

.single-portfolio .pixeltx-portfolio-detail-3 .section-banner-portfolio-detail-3 .banner-general-2 {
  height: 100%;
  min-height: 100%;
  overflow: hidden;
  padding-top: 0;
}

.single-portfolio .pixeltx-portfolio-detail-3 .section-banner-portfolio-detail-3 .pixeltx-portfolio-hero-image {
  display: block;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center center;
  width: 100%;
}

.single-portfolio .pixeltx-portfolio-detail-3 .horizontal-wrap {
  height: 100vh;
  height: 100svh;
  height: 100dvh;
  overflow: hidden;
}

.single-portfolio .pixeltx-portfolio-detail-3 .horizontal-rail {
  align-items: center;
  height: 100%;
  width: max-content;
}

.single-portfolio .pixeltx-portfolio-detail-3 .horizontal-item {
  align-items: center;
  display: flex;
  flex: 0 0 auto;
  height: 100%;
  justify-content: center;
  width: auto;
}

.single-portfolio .pixeltx-portfolio-detail-3 .horizontal-item img {
  display: block;
  height: 100%;
  max-width: none;
  object-fit: contain;
  object-position: center center;
  width: auto;
}

@media (max-width: 767.98px) {
  .single-portfolio .pixeltx-portfolio-detail-3 .horizontal-wrap {
    height: auto;
    overflow: visible;
  }

  .single-portfolio .pixeltx-portfolio-detail-3 .horizontal-rail {
    display: block;
    height: auto;
    transform: none !important;
    width: 100%;
  }

  .single-portfolio .pixeltx-portfolio-detail-3 .horizontal-item {
    height: 100vh;
    height: 100svh;
    height: 100dvh;
    width: 100%;
  }
}


/* Portfolio — gallery spacing, related-work carousel and live home grid. */
.single-portfolio .pixeltx-portfolio-detail-3 .horizontal-rail {
  gap: 100px;
}

.single-portfolio .pixeltx-portfolio-detail-3 .horizontal-item {
  overflow: hidden;
}

.single-portfolio .pixeltx-other-projects .swiper-container {
  overflow: hidden;
}

.single-portfolio .pixeltx-other-projects .swiper-slide {
  height: auto;
}

.single-portfolio .pixeltx-other-projects .cardRecent {
  height: 100%;
}

.single-portfolio .pixeltx-other-projects .cardImage a,
.pixeltx-recent-works .pixeltx-portfolio-grid .cardImage a {
  display: block;
}

.single-portfolio .pixeltx-other-projects .cardImage img,
.pixeltx-recent-works .pixeltx-portfolio-grid .cardImage img {
  display: block;
  width: 100%;
}

.single-portfolio .pixeltx-other-projects .pixeltx-related-projects-nav {
  justify-content: flex-end;
}

.pixeltx-recent-works .pixeltx-portfolio-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
}

@media (max-width: 767.98px) {
  .single-portfolio .pixeltx-portfolio-detail-3 .horizontal-rail {
    gap: 0;
  }

  .single-portfolio .pixeltx-portfolio-detail-3 .horizontal-item {
    margin-bottom: 100px;
  }

  .single-portfolio .pixeltx-portfolio-detail-3 .horizontal-item:last-child {
    margin-bottom: 0;
  }

  .single-portfolio .pixeltx-other-projects .pixeltx-related-projects-nav {
    justify-content: flex-start;
    margin-top: 30px;
  }
}


/* --------------------------------------------------------------------------
   Global layout contract
   header.php opens .scroll-container and footer.php closes it. All theme
   templates use get_header() / get_footer(); never duplicate global markup.
   -------------------------------------------------------------------------- */
.pixeltx-global-layout .scroll-container {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.pixeltx-global-layout #primary {
  flex: 1 0 auto;
}

.pixeltx-page,
.pixeltx-index,
.pixeltx-posts-index,
.pixeltx-archive,
.pixeltx-search-results,
.pixeltx-404 {
  background: var(--pixeltx-paper);
  color: var(--pixeltx-ink);
  padding: 150px clamp(24px, 7vw, 120px) 100px;
}

.pixeltx-entry,
.pixeltx-archive-header {
  max-width: 960px;
  margin: 0 auto 50px;
}

.pixeltx-entry .entry-title,
.pixeltx-archive-header .entry-title {
  color: var(--pixeltx-ink);
}

.pixeltx-entry .entry-content {
  font-size: 1.125rem;
  line-height: 1.65;
}

.pixeltx-entry .entry-content a,
.pixeltx-portfolio-card a {
  color: inherit;
}

.pixeltx-portfolio-archive {
  padding: 150px 0 120px;
}

.pixeltx-portfolio-archive-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 48px 30px;
}

.pixeltx-portfolio-archive-grid .cardRecent {
  margin: 0;
}

.pixeltx-portfolio-archive-grid .cardImage img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

@media (max-width: 767px) {
  .pixeltx-page,
  .pixeltx-index,
  .pixeltx-posts-index,
  .pixeltx-archive,
  .pixeltx-search-results,
  .pixeltx-404 {
    padding: 120px 20px 80px;
  }

  .pixeltx-portfolio-archive {
    padding: 120px 0 80px;
  }

  .pixeltx-portfolio-archive-grid {
    grid-template-columns: 1fr;
    gap: 36px;
  }
}


/* --------------------------------------------------------------------------
   PixelTX 1.3.1 — Customizer-controlled dark background fallback.
   -------------------------------------------------------------------------- */
body.dark-mode {
  background-color: var(--pixeltx-dark-background) !important;
}

.dark-mode .banner-mode,
.dark-mode .is-mode.bg-0,
.dark-mode .is-mode .bg-0,
.dark-mode .footer.is-mode.bg-0 {
  background-color: var(--pixeltx-dark-background) !important;
}

.dark-mode .is-mode .stroke,
.dark-mode .is-mode .stroke-white {
  -webkit-text-stroke-color: var(--pixeltx-dark-background);
}

/* --------------------------------------------------------------------------
   PixelTX 1.3.0 — global navigation, selectable page templates and styles.
   -------------------------------------------------------------------------- */

/* Keep the original source-template hamburger visible at every breakpoint. */
.header .main-header .header-account .menu-mobile {
  align-items: center;
  display: inline-flex !important;
  justify-content: center;
}

/* Generic pages use the black source-header variant over their light canvas. */
.header.header-2:not(.is-mode) .header-logo img,
.header.header-2:not(.is-mode) .header-logo .custom-logo {
  display: block;
}

/* The loader is globally rendered from header.php; the compact navigation
   controller always clears it, even on pages without animation assets. */
.page-loader.is-hidden {
  opacity: 0;
  pointer-events: none;
  transition: opacity .35s ease, visibility .35s ease;
  visibility: hidden;
}

/* Standard Gutenberg pages preserve the global frame while making page content
   legible and useful without an HTML-specific page template. */
.pixeltx-page-standard .pixeltx-entry,
.pixeltx-page-wide .pixeltx-entry {
  max-width: 960px;
}

.pixeltx-page-wide .pixeltx-entry-wide {
  max-width: min(1440px, 100%);
}

.pixeltx-page-wide .entry-content > .alignwide {
  margin-left: auto;
  margin-right: auto;
  max-width: min(1240px, 100%);
}

.pixeltx-page-wide .entry-content > .alignfull {
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  max-width: 100vw;
  width: 100vw;
}

/* The colours are supplied by Appearance > Customize > PixelTX: Estilo. */
.btn.btn-brand-2,
.btn.btn-browse,
.btn.btn-live-preview,
.header .main-menu li ul,
.header .main-menu li div.sub-menu {
  background-color: var(--pixeltx-primary);
}

.btn.btn-brand-2:hover,
.btn.btn-browse:hover,
.btn.btn-live-preview:hover {
  background-color: var(--pixeltx-accent);
  color: var(--pixeltx-ink);
}

.color-linear {
  background: linear-gradient(267.12deg, var(--pixeltx-accent) 41.62%, var(--pixeltx-primary) 104.4%);
  -webkit-background-clip: text;
  background-clip: text;
}

@media (max-width: 575.98px) {
  .header .main-header .header-account .menu-mobile {
    padding: 8px 0 8px 10px;
  }
}


/* --------------------------------------------------------------------------
   PixelTX 1.4.0 — Customizer palette inheritance
   The inline Customizer CSS supplies variable values. These selectors remove
   the source template's residual fixed blues and use the shared palette.
   -------------------------------------------------------------------------- */
.header .main-header .header-account .menu-mobile .pixeltx-menu-icon {
  background-color: var(--pixeltx-accent);
  display: inline-block;
  height: 28px;
  margin-left: 10px;
  -webkit-mask: url("assets/imgs/template/icons/menu1.svg") no-repeat center / contain;
  mask: url("assets/imgs/template/icons/menu1.svg") no-repeat center / contain;
  vertical-align: middle;
  width: 28px;
}

.header .main-menu li.has-children > a::after,
.header.header-2 .main-menu > li.has-children > a::after,
.sticky-bar.stick.header-2 .main-menu > li.has-children > a::after {
  background: none !important;
  border-bottom: 2px solid currentColor;
  border-right: 2px solid currentColor;
  height: 8px;
  margin-top: -6px;
  transform: rotate(45deg);
  width: 8px;
}

.header .main-menu li a:hover {
  background-color: var(--pixeltx-navigation-hover) !important;
  color: var(--pixeltx-on-dark) !important;
}

.header .main-menu li ul,
.header .main-menu li div.sub-menu {
  background-color: var(--pixeltx-submenu-background) !important;
  border-color: var(--pixeltx-primary) !important;
}

.sticky-bar.stick {
  background: var(--pixeltx-sticky-background) !important;
  border-bottom-color: var(--pixeltx-primary) !important;
}

.sticky-bar.header-bg-2,
.box-get-quote,
.box-circle-customer .box-circle,
.box-button-slider-bottom .swiper-button-next-style1:hover,
.box-button-slider-bottom .swiper-button-prev-style1:hover,
.dark-mode .is-mode .box-button-slider-bottom .swiper-button-next-style1:hover,
.dark-mode .is-mode .box-button-slider-bottom .swiper-button-prev-style1:hover,
.card-corp-type-2:hover .card-icon span {
  background-color: var(--pixeltx-primary) !important;
}

.color-linear {
  background: linear-gradient(267.12deg, var(--pixeltx-accent) 41.62%, var(--pixeltx-primary) 104.4%) !important;
  -webkit-background-clip: text;
  background-clip: text;
}

.preloader-dots {
  --uib-color: var(--pixeltx-primary) !important;
}

.page-loader .bar,
.scroll-to-top {
  background-color: var(--pixeltx-dark-surface) !important;
}

.mobile-header-wrapper-style,
.mobile-header-wrapper-style .mobile-header-wrapper-inner {
  background-color: var(--pixeltx-mobile-menu-background) !important;
}

.mobile-header-wrapper-style .mobile-header-wrapper-inner .mobile-logo,
.mobile-header-wrapper-style .mobile-header-wrapper-inner .mobile-header-content-area .mobile-header-info-wrap {
  border-color: var(--pixeltx-light-border) !important;
}

.mobile-header-wrapper-style .mobile-header-wrapper-inner .mobile-header-content-area .mobile-menu-wrap nav .mobile-menu li a {
  color: var(--pixeltx-on-dark) !important;
}

.mobile-header-wrapper-style .mobile-header-wrapper-inner .mobile-header-content-area .mobile-menu-wrap nav .mobile-menu li ul li a {
  color: var(--pixeltx-muted) !important;
}

.mobile-header-wrapper-style .mobile-header-wrapper-inner .mobile-header-content-area .mobile-menu-wrap nav .mobile-menu li a:hover,
.mobile-header-wrapper-style .mobile-header-wrapper-inner .mobile-header-content-area .mobile-menu-wrap nav .mobile-menu li:hover > a,
.nav-tabs-mobile li a:hover,
.nav-tabs-mobile li a:hover *,
.nav-tabs-mobile li a.active {
  color: var(--pixeltx-accent) !important;
}

.nav-tabs-mobile li a:hover::before,
.nav-tabs-mobile li a.active::before {
  background-color: var(--pixeltx-accent) !important;
}

.color-0 { color: var(--pixeltx-on-dark) !important; }
.color-100 { color: var(--pixeltx-light-surface) !important; }
.color-200,
.color-300 { color: var(--pixeltx-light-border) !important; }
.color-600 { color: var(--pixeltx-muted) !important; }
.color-700 { color: var(--pixeltx-dark-surface) !important; }
.color-900,
.color-light-900 { color: var(--pixeltx-ink) !important; }
.color-dark-900 { color: var(--pixeltx-on-dark) !important; }

.dark-mode .is-mode .bg-100,
.dark-mode .is-mode.bg-100,
.dark-mode .is-mode .bg-200,
.dark-mode .box-banner-product,
.dark-mode .is-mode .box-button-slider-bottom .swiper-button-next-style1,
.dark-mode .is-mode .box-button-slider-bottom .swiper-button-prev-style1 {
  background-color: var(--pixeltx-dark-surface) !important;
}

.dark-mode .is-mode .color-900,
.dark-mode .is-mode .color-dark-900,
.footer.footer-2 .color-900,
.footer.footer-2 .menu-footer li a {
  color: var(--pixeltx-on-dark) !important;
}

.dark-mode .is-mode .color-600 { color: var(--pixeltx-muted) !important; }
.dark-mode .is-mode .color-300,
.dark-mode .is-mode .bd-200,
.dark-mode .header.header-3,
.dark-mode .box-overview,
.dark-mode .box-overview .head-overview,
.dark-mode .border-bottom {
  border-color: var(--pixeltx-dark-border) !important;
}

.box-button-slider-bottom .swiper-button-next-style1,
.box-button-slider-bottom .swiper-button-prev-style1 {
  background-color: var(--pixeltx-light-surface) !important;
}

.box-button-slider-bottom .swiper-button-next-style1:hover svg,
.box-button-slider-bottom .swiper-button-prev-style1:hover svg {
  color: var(--pixeltx-on-dark) !important;
}

/* Remaining source-template interaction colours inherit the global palette. */
::-moz-selection {
  background: var(--pixeltx-primary) !important;
  color: var(--pixeltx-on-dark) !important;
}

::selection {
  background: var(--pixeltx-primary) !important;
  color: var(--pixeltx-on-dark) !important;
}

.loader {
  color: var(--pixeltx-primary) !important;
}

.swiper-pagination .swiper-pagination-customs-active {
  background-color: var(--pixeltx-primary) !important;
}

.select2-container--default .select2-selection--single .select2-selection__rendered,
.select2-container--default .select2-selection--single .select2-selection__arrow b,
.select2-container--default .select2-results__option--highlighted[aria-selected] {
  color: var(--pixeltx-primary) !important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow b {
  border-color: var(--pixeltx-primary) transparent transparent transparent !important;
}

.list-locations .item-location:hover .location-info h6,
.menu-bottom li a:hover {
  color: var(--pixeltx-accent) !important;
}

.box-services-3 .list-projects .item-project:hover .item-project-icon {
  background-color: var(--pixeltx-primary) !important;
}

.header .main-header .header-account .menu-mobile .text-white {
  color: var(--pixeltx-on-dark) !important;
}

.header.header-2:not(.is-mode) .main-header .header-account .menu-mobile .color-900 {
  color: var(--pixeltx-ink) !important;
}

.sticky-bar.stick .main-header .header-account .menu-mobile .color-900 {
  color: var(--pixeltx-on-dark) !important;
}


/* PixelTX 1.5 — shared page shell and button palette fallbacks. */
body:not(.home) .header.sticky-bar:not(.header-2) {
  color: var(--pixeltx-on-dark);
}

.pixeltx-page,
.pixeltx-page-standard,
.pixeltx-page-wide {
  position: relative;
}

.pixeltx-page .wp-block-button__link,
.pixeltx-page .wp-element-button,
.pixeltx-page input[type="submit"],
.pixeltx-page button[type="submit"] {
  background-color: var(--pixeltx-button-primary);
  border-color: var(--pixeltx-button-primary);
  color: var(--pixeltx-button-primary-text);
}

.pixeltx-page .wp-block-button__link:hover,
.pixeltx-page .wp-element-button:hover,
.pixeltx-page input[type="submit"]:hover,
.pixeltx-page button[type="submit"]:hover {
  background-color: var(--pixeltx-button-hover);
  border-color: var(--pixeltx-button-hover);
  color: var(--pixeltx-button-hover-text);
}


/* --------------------------------------------------------------------------
   PixelTX 1.5.1 — Shared lightweight interactions for editor-created pages.
   -------------------------------------------------------------------------- */
.pixeltx-parallax-wrapper {
  display: inline-block;
  perspective: 800px;
  transform-style: preserve-3d;
}

.header-logo.pixeltx-parallax-item-ready,
.mobile-logo .pixeltx-parallax-item-ready,
.footer .pixeltx-parallax-item-ready {
  will-change: transform;
  transform-style: preserve-3d;
}

@media (prefers-reduced-motion: reduce) {
  .pixeltx-parallax-wrapper .parallax-item,
  .hover-rotate {
    transition: none !important;
  }
}


/* Home — dynamic Selected Projects Portfolio block. */
.pixeltx-selected-projects .pixeltx-selected-project {
  overflow: hidden;
}

.pixeltx-selected-projects .pixeltx-selected-project > a {
  display: block;
}

.pixeltx-selected-projects .pixeltx-selected-project img {
  display: block;
  height: auto;
  max-width: 100%;
  width: 100%;
}

.pixeltx-selected-projects .pixeltx-selected-project--featured {
  width: 100%;
}

@media (max-width: 991.98px) {
  .pixeltx-selected-projects-grid {
    margin-top: 30px;
  }
}


/* --------------------------------------------------------------------------
   PixelTX 1.5.4 — accessible dark article cards and centred Back to top icon.
   Article excerpts inside the dark Blog card use the configurable on-dark
   colour instead of the low-contrast muted grey. The icon is absolutely
   centred, so it remains aligned even when the legacy script switches the
   button from display:none to display:block.
   -------------------------------------------------------------------------- */
.dark-mode .is-mode .cardBlog .cardInfo .color-light-900,
.dark-mode .is-mode .cardBlog .cardInfo h1,
.dark-mode .is-mode .cardBlog .cardInfo h2,
.dark-mode .is-mode .cardBlog .cardInfo h3,
.dark-mode .is-mode .cardBlog .cardInfo h4,
.dark-mode .is-mode .cardBlog .cardInfo h5,
.dark-mode .is-mode .cardBlog .cardInfo h6 {
  color: var(--pixeltx-on-dark) !important;
}

.dark-mode .is-mode .cardBlog .cardInfo p,
.dark-mode .is-mode .cardBlog .cardInfo .color-600,
.dark-mode .is-mode .cardBlog .cardInfo .entry-excerpt,
.dark-mode .is-mode .cardBlog .cardInfo .excerpt,
.dark-mode .is-mode .cardBlog .cardInfo .wp-block-post-excerpt__excerpt {
  color: var(--pixeltx-on-dark) !important;
  opacity: 0.78;
}

.dark-mode .is-mode .cardBlog .cardInfo .tag-link {
  color: var(--pixeltx-accent) !important;
}

.scroll-to-top {
  line-height: 0 !important;
}

.scroll-to-top .scroll-to-top-icon {
  display: block;
  height: 21px;
  left: 50%;
  line-height: 0;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 22px;
}

.scroll-to-top .scroll-to-top-icon img {
  display: block;
  height: 21px;
  margin: 0;
  max-width: none;
  width: 22px;
}

/* --------------------------------------------------------------------------
   PixelTX 1.5.5 — Blog Single / Gutenberg article layout
   The standard WordPress post template is based on blog-single.html. Every
   editor paragraph, full-width image and one/two-column image layout follows
   the original editorial proportions without custom blocks or plugins.
   -------------------------------------------------------------------------- */
.pixeltx-blog-single-main {
  overflow: hidden;
}

.pixeltx-blog-single .section-banner-blogsingle .banner-general {
  padding-bottom: 20px;
}

.pixeltx-blog-single .box-breadcrumbs li:last-child span {
  display: inline-block;
  max-width: min(55vw, 560px);
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: bottom;
  white-space: nowrap;
}

.pixeltx-blog-featured-media,
.pixeltx-blog-featured-media .parallax-image-wrap,
.pixeltx-blog-featured-media .parallax-image-inner {
  width: 100%;
}

.pixeltx-blog-featured-media .parallax-image-wrap {
  margin: 0 !important;
}

.pixeltx-blog-featured-media img {
  display: block;
  height: auto;
  margin: 0 !important;
  width: 100%;
}

.pixeltx-blog-entry-content {
  clear: both;
}

/* Text blocks inherit the 8-column composition from blog-single.html. */
.pixeltx-blog-entry-content > p,
.pixeltx-blog-entry-content > h2,
.pixeltx-blog-entry-content > h3,
.pixeltx-blog-entry-content > h4,
.pixeltx-blog-entry-content > h5,
.pixeltx-blog-entry-content > h6,
.pixeltx-blog-entry-content > ul,
.pixeltx-blog-entry-content > ol,
.pixeltx-blog-entry-content > blockquote,
.pixeltx-blog-entry-content > pre,
.pixeltx-blog-entry-content > .wp-block-quote,
.pixeltx-blog-entry-content > .wp-block-pullquote,
.pixeltx-blog-entry-content > .wp-block-list,
.pixeltx-blog-entry-content > .wp-block-code,
.pixeltx-blog-entry-content > .wp-block-embed {
  margin-left: auto;
  margin-right: auto;
  max-width: 66.666667%;
}

.pixeltx-blog-entry-content > p {
  color: var(--pixeltx-ink);
  font-family: var(--pixeltx-font-body);
  font-size: 30px;
  font-weight: 400;
  line-height: 1.4;
  margin-bottom: 40px;
  margin-top: 50px;
}

.pixeltx-blog-entry-content > p + p {
  margin-top: 0;
}

.pixeltx-blog-entry-content > h2,
.pixeltx-blog-entry-content > h3,
.pixeltx-blog-entry-content > h4,
.pixeltx-blog-entry-content > h5,
.pixeltx-blog-entry-content > h6 {
  color: var(--pixeltx-ink);
  font-family: var(--pixeltx-font-heading);
  margin-bottom: 25px;
  margin-top: 65px;
}

.pixeltx-blog-entry-content > ul,
.pixeltx-blog-entry-content > ol,
.pixeltx-blog-entry-content > .wp-block-list {
  color: var(--pixeltx-ink);
  font-size: 22px;
  line-height: 1.55;
  margin-bottom: 40px;
  margin-top: 50px;
  padding-left: 1.3em;
}

.pixeltx-blog-entry-content > blockquote,
.pixeltx-blog-entry-content > .wp-block-quote,
.pixeltx-blog-entry-content > .wp-block-pullquote {
  border-left: 2px solid var(--pixeltx-primary);
  color: var(--pixeltx-ink);
  font-family: var(--pixeltx-font-heading);
  font-size: clamp(26px, 2.4vw, 40px);
  line-height: 1.25;
  margin-bottom: 55px;
  margin-top: 65px;
  padding-left: 36px;
}

.pixeltx-blog-entry-content a:not(.wp-element-button) {
  color: var(--pixeltx-primary);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.16em;
}

/* A standalone Gutenberg image follows the 10-column editorial image layout. */
.pixeltx-blog-entry-content > .wp-block-image,
.pixeltx-blog-entry-content > figure.wp-block-image,
.pixeltx-blog-entry-content > .wp-block-gallery,
.pixeltx-blog-entry-content > .wp-block-embed,
.pixeltx-blog-entry-content > .wp-block-video {
  margin-left: auto;
  margin-right: auto;
  max-width: 83.333333%;
  width: 100%;
}

.pixeltx-blog-entry-content > .wp-block-image,
.pixeltx-blog-entry-content > figure.wp-block-image,
.pixeltx-blog-entry-content > .wp-block-gallery,
.pixeltx-blog-entry-content > .wp-block-video {
  margin-bottom: 100px;
  margin-top: 60px;
}

.pixeltx-blog-entry-content > .wp-block-image img,
.pixeltx-blog-entry-content > figure.wp-block-image img,
.pixeltx-blog-entry-content > .wp-block-gallery img,
.pixeltx-blog-entry-content > .wp-block-video video {
  display: block;
  height: auto;
  margin: 0 !important;
  max-width: 100%;
  width: 100%;
}

.pixeltx-blog-entry-content .wp-element-caption,
.pixeltx-blog-entry-content figcaption {
  color: var(--pixeltx-muted);
  font-size: 15px;
  line-height: 1.45;
  margin-top: 14px;
  text-align: left;
}

/* The Columns block reproduces the two-image composition from the source. */
.pixeltx-blog-entry-content > .wp-block-columns,
.pixeltx-blog-entry-content > .pixeltx-blog-columns {
  gap: 30px;
  margin: 60px auto 70px;
  max-width: 83.333333%;
  width: 100%;
}

.pixeltx-blog-entry-content > .wp-block-columns .wp-block-column,
.pixeltx-blog-entry-content > .pixeltx-blog-columns .wp-block-column {
  min-width: 0;
}

.pixeltx-blog-entry-content > .wp-block-columns .wp-block-image,
.pixeltx-blog-entry-content > .pixeltx-blog-columns .wp-block-image,
.pixeltx-blog-entry-content > .wp-block-columns figure,
.pixeltx-blog-entry-content > .pixeltx-blog-columns figure {
  margin: 0 0 30px;
}

.pixeltx-blog-entry-content > .wp-block-columns .wp-block-image img,
.pixeltx-blog-entry-content > .pixeltx-blog-columns .wp-block-image img,
.pixeltx-blog-entry-content > .wp-block-columns figure img,
.pixeltx-blog-entry-content > .pixeltx-blog-columns figure img {
  display: block;
  height: auto;
  margin: 0 !important;
  width: 100%;
}

.pixeltx-blog-entry-content > .wp-block-columns .wp-block-column > p,
.pixeltx-blog-entry-content > .pixeltx-blog-columns .wp-block-column > p {
  color: var(--pixeltx-ink);
  font-size: 20px;
  line-height: 1.5;
  margin: 0 0 25px;
}

.pixeltx-post-pagination {
  display: block;
  margin: 60px auto 0;
  max-width: 66.666667%;
}

.dark-mode .is-mode .pixeltx-blog-entry-content > p,
.dark-mode .is-mode .pixeltx-blog-entry-content > h2,
.dark-mode .is-mode .pixeltx-blog-entry-content > h3,
.dark-mode .is-mode .pixeltx-blog-entry-content > h4,
.dark-mode .is-mode .pixeltx-blog-entry-content > h5,
.dark-mode .is-mode .pixeltx-blog-entry-content > h6,
.dark-mode .is-mode .pixeltx-blog-entry-content > ul,
.dark-mode .is-mode .pixeltx-blog-entry-content > ol,
.dark-mode .is-mode .pixeltx-blog-entry-content > blockquote,
.dark-mode .is-mode .pixeltx-blog-entry-content > .wp-block-quote,
.dark-mode .is-mode .pixeltx-blog-entry-content > .wp-block-pullquote,
.dark-mode .is-mode .pixeltx-blog-entry-content > .wp-block-columns .wp-block-column > p,
.dark-mode .is-mode .pixeltx-blog-entry-content > .pixeltx-blog-columns .wp-block-column > p {
  color: var(--pixeltx-on-dark);
}

.dark-mode .is-mode .pixeltx-blog-entry-content a:not(.wp-element-button) {
  color: var(--pixeltx-accent);
}

.dark-mode .is-mode .pixeltx-blog-entry-content > blockquote,
.dark-mode .is-mode .pixeltx-blog-entry-content > .wp-block-quote,
.dark-mode .is-mode .pixeltx-blog-entry-content > .wp-block-pullquote {
  border-color: var(--pixeltx-accent);
}

@media (max-width: 991.98px) {
  .pixeltx-blog-entry-content > p,
  .pixeltx-blog-entry-content > h2,
  .pixeltx-blog-entry-content > h3,
  .pixeltx-blog-entry-content > h4,
  .pixeltx-blog-entry-content > h5,
  .pixeltx-blog-entry-content > h6,
  .pixeltx-blog-entry-content > ul,
  .pixeltx-blog-entry-content > ol,
  .pixeltx-blog-entry-content > blockquote,
  .pixeltx-blog-entry-content > pre,
  .pixeltx-blog-entry-content > .wp-block-quote,
  .pixeltx-blog-entry-content > .wp-block-pullquote,
  .pixeltx-blog-entry-content > .wp-block-list,
  .pixeltx-blog-entry-content > .wp-block-code,
  .pixeltx-blog-entry-content > .wp-block-embed,
  .pixeltx-blog-entry-content > .wp-block-image,
  .pixeltx-blog-entry-content > figure.wp-block-image,
  .pixeltx-blog-entry-content > .wp-block-gallery,
  .pixeltx-blog-entry-content > .wp-block-video,
  .pixeltx-blog-entry-content > .wp-block-columns,
  .pixeltx-blog-entry-content > .pixeltx-blog-columns,
  .pixeltx-post-pagination {
    max-width: 100%;
  }

  .pixeltx-blog-entry-content > p {
    font-size: 25px;
    line-height: 1.42;
  }
}

@media (max-width: 767.98px) {
  .pixeltx-blog-single .section-banner-blogsingle .banner-general {
    padding-top: 150px;
  }

  .pixeltx-blog-single .box-breadcrumbs li:last-child span {
    max-width: 36vw;
  }

  .pixeltx-blog-entry-content > p {
    font-size: 21px;
    line-height: 1.48;
    margin-bottom: 28px;
    margin-top: 35px;
  }

  .pixeltx-blog-entry-content > h2,
  .pixeltx-blog-entry-content > h3,
  .pixeltx-blog-entry-content > h4,
  .pixeltx-blog-entry-content > h5,
  .pixeltx-blog-entry-content > h6 {
    margin-top: 45px;
  }

  .pixeltx-blog-entry-content > ul,
  .pixeltx-blog-entry-content > ol,
  .pixeltx-blog-entry-content > .wp-block-list {
    font-size: 18px;
    margin-bottom: 30px;
    margin-top: 35px;
  }

  .pixeltx-blog-entry-content > .wp-block-image,
  .pixeltx-blog-entry-content > figure.wp-block-image,
  .pixeltx-blog-entry-content > .wp-block-gallery,
  .pixeltx-blog-entry-content > .wp-block-video,
  .pixeltx-blog-entry-content > .wp-block-columns,
  .pixeltx-blog-entry-content > .pixeltx-blog-columns {
    margin-bottom: 55px;
    margin-top: 40px;
  }

  .pixeltx-blog-entry-content > .wp-block-columns,
  .pixeltx-blog-entry-content > .pixeltx-blog-columns {
    gap: 24px;
  }
}


/* Blog index — dynamic WordPress adaptation of blog.html. */
.pixeltx-blog-index-main .item-list-blog .item-blog-image img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

.pixeltx-blog-index-main .item-blog-title {
  margin-bottom: 22px;
}

.pixeltx-blog-index-main .item-blog-metas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 0;
}

.pixeltx-blog-index-main .item-blog-metas .link-tag {
  margin-right: 18px;
}

.pixeltx-blog-index-main .pagination-wrap .page-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.pixeltx-blog-index-main .pixeltx-blog-empty {
  padding: 70px 0 30px;
}

@media (max-width: 767px) {
  .pixeltx-blog-index-main .item-blog-metas .mr-50 {
    margin-right: 20px !important;
  }
}

/* --------------------------------------------------------------------------
   PixelTX 1.5.7 — Blog archive heading, media crop and post count
   The source blog.html artwork is 1250 x 555 px. The archive now preserves
   that visual maximum while portrait uploads fill the frame with a centred
   crop instead of stretching the card vertically.
   -------------------------------------------------------------------------- */
.pixeltx-blog-index-main .pixeltx-blog-index-title {
  background: none !important;
  color: var(--pixeltx-ink) !important;
  -webkit-text-fill-color: currentColor !important;
  margin-bottom: 0 !important;
}

.dark-mode .is-mode .pixeltx-blog-index-main .pixeltx-blog-index-title {
  color: var(--pixeltx-on-dark) !important;
}

.pixeltx-blog-index-main .item-list-blog-2 .item-blog-image {
  height: clamp(260px, 44.4vw, 555px);
  max-height: 555px;
  overflow: hidden;
}

.pixeltx-blog-index-main .item-list-blog-2 .item-blog-image > .bdrd-80,
.pixeltx-blog-index-main .item-list-blog-2 .item-blog-image > .bdrd-80 > a {
  display: block;
  height: 100%;
  width: 100%;
}

.pixeltx-blog-index-main .item-list-blog-2 .item-blog-image img {
  height: 100% !important;
  max-height: none;
  object-fit: cover;
  object-position: center center;
  width: 100%;
}

.pixeltx-blog-index-main .item-list-blog-2 .item-blog-title {
  color: var(--pixeltx-ink) !important;
}

.dark-mode .is-mode .pixeltx-blog-index-main .item-list-blog-2 .item-blog-title {
  color: var(--pixeltx-on-dark) !important;
}

@media (max-width: 767px) {
  .pixeltx-blog-index-main .item-list-blog-2 .item-blog-image {
    height: clamp(240px, 68vw, 360px);
  }
}

/* --------------------------------------------------------------------------
   PixelTX 1.5.8 — Contact Form 7, social links and dark Blog heading.
   -------------------------------------------------------------------------- */
/* The Blog index banner is intentionally dark: it always uses the configured
   "Texto sobre fondos oscuros" colour, regardless of the body mode state. */
.pixeltx-blog-index-main .section-banner-bloglist2 .pixeltx-blog-index-title,
.pixeltx-blog-index-main .section-banner-bloglist2 .font-2xl-bold {
  color: var(--pixeltx-on-dark) !important;
  -webkit-text-fill-color: var(--pixeltx-on-dark) !important;
}

/* Inline SVG alternatives for the editable social-network list. */
.box-socials .pixeltx-social-custom-icon {
  align-items: center;
  background: none !important;
  color: var(--pixeltx-ink);
  display: inline-flex;
  justify-content: center;
}

.box-socials .pixeltx-social-custom-icon svg {
  display: block;
  fill: currentColor;
  height: 22px;
  width: 22px;
}

.dark-mode .is-mode .box-socials .pixeltx-social-custom-icon,
.footer.is-mode .box-socials .pixeltx-social-custom-icon {
  color: var(--pixeltx-on-dark);
}

/* Dynamic contact-page adaptation of contact.html. */
.pixeltx-contact-page .pixeltx-contact-intro {
  max-width: 760px;
}

.pixeltx-contact-page .pixeltx-contact-intro > :first-child {
  margin-top: 0;
}

.pixeltx-contact-page .pixeltx-contact-intro p,
.pixeltx-contact-page .pixeltx-contact-intro li {
  color: inherit;
  font-family: var(--pixeltx-font-heading);
  font-size: clamp(28px, 3.25vw, 52px);
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1.12;
  margin-bottom: 0;
}

.pixeltx-contact-page .pixeltx-contact-socials {
  margin-top: 18px;
}

.pixeltx-contact-page .pixeltx-contact-socials .icon-socials {
  margin-right: 24px;
}

.pixeltx-contact-page .form-in-touch {
  min-height: 230px;
}

.pixeltx-contact-form {
  position: relative;
  z-index: 2;
}

.pixeltx-contact-form .wpcf7 {
  width: 100%;
}

.pixeltx-contact-form .wpcf7-form {
  display: grid;
  gap: 28px 30px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.pixeltx-contact-form .wpcf7-form > p {
  margin: 0;
  min-width: 0;
}

.pixeltx-contact-form .wpcf7-form > p:has(textarea),
.pixeltx-contact-form .wpcf7-form > p:has(input[type="submit"]),
.pixeltx-contact-form .wpcf7-form > p.pixeltx-cf7-full,
.pixeltx-contact-form .wpcf7-form .pixeltx-cf7-full,
.pixeltx-contact-form .wpcf7-form .wpcf7-response-output {
  grid-column: 1 / -1;
}

.pixeltx-contact-form .wpcf7-form-control-wrap {
  display: block;
}

.pixeltx-contact-form input[type="text"],
.pixeltx-contact-form input[type="email"],
.pixeltx-contact-form input[type="tel"],
.pixeltx-contact-form input[type="url"],
.pixeltx-contact-form input[type="number"],
.pixeltx-contact-form select,
.pixeltx-contact-form textarea {
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid var(--pixeltx-light-border) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: var(--pixeltx-on-dark) !important;
  font-size: 17px;
  line-height: 1.45;
  min-height: 58px;
  padding: 12px 0 !important;
  width: 100% !important;
}

.pixeltx-contact-form textarea {
  min-height: 162px;
  resize: vertical;
}

.pixeltx-contact-form input::placeholder,
.pixeltx-contact-form textarea::placeholder {
  color: var(--pixeltx-on-dark) !important;
  opacity: .65;
}

.pixeltx-contact-form input:focus,
.pixeltx-contact-form select:focus,
.pixeltx-contact-form textarea:focus {
  border-bottom-color: var(--pixeltx-accent) !important;
  outline: none !important;
}

.pixeltx-contact-form input[type="submit"],
.pixeltx-contact-form .wpcf7-submit {
  margin-top: 8px;
  min-width: 220px;
}

.pixeltx-contact-form .wpcf7-not-valid-tip {
  color: var(--pixeltx-accent);
  font-size: 13px;
  margin-top: 8px;
}

.pixeltx-contact-form .wpcf7-response-output {
  border-color: var(--pixeltx-accent) !important;
  color: var(--pixeltx-on-dark);
  margin: 0 !important;
  padding: 12px 15px !important;
}

.pixeltx-contact-form-notice {
  border: 1px solid var(--pixeltx-accent);
  color: var(--pixeltx-on-dark);
  padding: 22px;
}

.pixeltx-contact-form-notice p {
  margin: 8px 0 0;
}

@media (max-width: 767.98px) {
  .pixeltx-contact-form .wpcf7-form {
    grid-template-columns: 1fr;
  }

  .pixeltx-contact-form .wpcf7-form > p,
  .pixeltx-contact-form .wpcf7-form > p:has(textarea),
  .pixeltx-contact-form .wpcf7-form > p:has(input[type="submit"]),
  .pixeltx-contact-form .wpcf7-form > p.pixeltx-cf7-full,
  .pixeltx-contact-form .wpcf7-form .pixeltx-cf7-full,
  .pixeltx-contact-form .wpcf7-form .wpcf7-response-output {
    grid-column: auto;
  }
}



/* v1.5.9 — Contact Form 7: exact layout based on contact.html. */
.pixeltx-contact-page .pixeltx-contact-form .wpcf7-form {
  gap: 30px;
}

.pixeltx-contact-page .pixeltx-contact-form .wpcf7-form > p,
.pixeltx-contact-page .pixeltx-contact-form .pixeltx-cf7-field {
  margin: 0;
}

.pixeltx-contact-page .pixeltx-contact-form input[type="text"],
.pixeltx-contact-page .pixeltx-contact-form input[type="email"],
.pixeltx-contact-page .pixeltx-contact-form input[type="tel"],
.pixeltx-contact-page .pixeltx-contact-form input[type="url"],
.pixeltx-contact-page .pixeltx-contact-form input[type="number"],
.pixeltx-contact-page .pixeltx-contact-form select,
.pixeltx-contact-page .pixeltx-contact-form textarea {
  background-color: var(--pixeltx-dark-background) !important;
  border: 1px solid var(--pixeltx-dark-border) !important;
  border-radius: 12px !important;
  box-shadow: none !important;
  box-sizing: border-box;
  color: var(--pixeltx-on-dark) !important;
  font-family: var(--pixeltx-font-body) !important;
  font-size: 18px;
  font-weight: 700;
  line-height: 23px;
  min-height: 74px;
  padding: 25px 39px !important;
}

.pixeltx-contact-page .pixeltx-contact-form textarea {
  min-height: 204px;
}

.pixeltx-contact-page .pixeltx-contact-form input::placeholder,
.pixeltx-contact-page .pixeltx-contact-form textarea::placeholder {
  color: var(--pixeltx-on-dark) !important;
  opacity: .72;
}

.pixeltx-contact-page .pixeltx-contact-form input:focus,
.pixeltx-contact-page .pixeltx-contact-form select:focus,
.pixeltx-contact-page .pixeltx-contact-form textarea:focus {
  border-color: var(--pixeltx-accent) !important;
  outline: 2px solid transparent !important;
}

.pixeltx-contact-page .pixeltx-contact-form .wpcf7-submit.btn.btn-black {
  background-color: #0c0d0e !important;
  background-image: url("assets/imgs/template/icons/arrow.svg") !important;
  background-position: calc(100% - 38px) center !important;
  background-repeat: no-repeat !important;
  background-size: 16px 16px !important;
  border: 0 !important;
  color: var(--pixeltx-button-primary-text) !important;
  cursor: pointer;
  min-height: 72px;
  padding: 22px 78px 22px 40px !important;
}

.pixeltx-contact-page .pixeltx-contact-form .wpcf7-submit.btn.btn-black:hover,
.pixeltx-contact-page .pixeltx-contact-form .wpcf7-submit.btn.btn-black:focus {
  background-color: #171819 !important;
  color: #ffffff !important;
}

.pixeltx-contact-page .pixeltx-contact-form .wpcf7-spinner {
  margin: 0 0 0 12px;
  vertical-align: middle;
}

.pixeltx-contact-page .pixeltx-contact-form .screen-reader-text {
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  word-wrap: normal !important;
}

@media (max-width: 767.98px) {
  .pixeltx-contact-page .pixeltx-contact-form input[type="text"],
  .pixeltx-contact-page .pixeltx-contact-form input[type="email"],
  .pixeltx-contact-page .pixeltx-contact-form input[type="tel"],
  .pixeltx-contact-page .pixeltx-contact-form input[type="url"],
  .pixeltx-contact-page .pixeltx-contact-form input[type="number"],
  .pixeltx-contact-page .pixeltx-contact-form select,
  .pixeltx-contact-page .pixeltx-contact-form textarea {
    font-size: 16px;
    min-height: 66px;
    padding: 21px 24px !important;
  }

  .pixeltx-contact-page .pixeltx-contact-form textarea {
    min-height: 175px;
  }

  .pixeltx-contact-page .pixeltx-contact-form .wpcf7-submit.btn.btn-black {
    width: 100%;
  }
}

/* --------------------------------------------------------------------------
   PixelTX 1.6.0 — Portfolio archive based on portfolio-2.html.
   -------------------------------------------------------------------------- */
.pixeltx-portfolio-index-main .section-banner-portfolio .box-banner-title h1 {
  word-break: break-word;
}

.pixeltx-portfolio-index-main .pixeltx-portfolio-hero-image {
  height: 150px;
  max-width: min(40vw, 220px);
  object-fit: cover;
  object-position: center;
}

.pixeltx-portfolio-index-main .box-slide-portfolio {
  margin-top: 70px;
}

.pixeltx-portfolio-index-main .pixeltx-portfolio-latest-slider .swiper-slide {
  max-width: 354px;
  width: 354px !important;
}

.pixeltx-portfolio-index-main .pixeltx-portfolio-latest-slider .cardRecent .cardImage {
  border-radius: 120px;
  height: 561px;
  overflow: hidden;
}

.pixeltx-portfolio-index-main .pixeltx-portfolio-latest-slider .cardRecent .cardImage a,
.pixeltx-portfolio-index-main .pixeltx-portfolio-latest-slider .cardRecent .cardImage img {
  display: block;
  height: 100%;
  width: 100%;
}

.pixeltx-portfolio-index-main .pixeltx-portfolio-latest-slider .cardRecent .cardImage img {
  object-fit: cover;
  object-position: center;
}

.pixeltx-portfolio-index-main .pixeltx-portfolio-latest-slider .cardInfo {
  display: none;
}

.pixeltx-portfolio-filter-bar {
  background: transparent;
  position: relative;
  width: 100%;
}

.pixeltx-portfolio-filter-inner {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0 15px;
}

.pixeltx-portfolio-filter-inner .btn-tags {
  margin-bottom: 15px;
}

.pixeltx-portfolio-grid-wrap {
  transition: opacity .24s ease;
}

:is(.pixeltx-portfolio-index-main, .pixeltx-home-portfolio).is-loading .pixeltx-portfolio-grid-wrap {
  opacity: .45;
  pointer-events: none;
}

.pixeltx-portfolio-results {
  min-height: 1px;
}

.pixeltx-portfolio-results.is-updating {
  opacity: .01;
}

:is(.pixeltx-portfolio-index-main, .pixeltx-home-portfolio) .pixeltx-portfolio-project-grid {
  margin-left: -80px;
  margin-right: -80px;
}

:is(.pixeltx-portfolio-index-main, .pixeltx-home-portfolio) .pixeltx-portfolio-project {
  padding-left: 80px;
  padding-right: 80px;
}

:is(.pixeltx-portfolio-index-main, .pixeltx-home-portfolio) .pixeltx-portfolio-project .cardRecent .cardImage {
  overflow: hidden;
}

:is(.pixeltx-portfolio-index-main, .pixeltx-home-portfolio) .pixeltx-portfolio-project .cardRecent .cardImage a,
:is(.pixeltx-portfolio-index-main, .pixeltx-home-portfolio) .pixeltx-portfolio-project .cardRecent .cardImage img {
  display: block;
  width: 100%;
}

:is(.pixeltx-portfolio-index-main, .pixeltx-home-portfolio) .pixeltx-portfolio-project .cardRecent .cardImage img {
  aspect-ratio: 1.21 / 1;
  object-fit: cover;
  object-position: center;
}

:is(.pixeltx-portfolio-index-main, .pixeltx-home-portfolio) .pixeltx-portfolio-project .cardInfo h2 {
  margin-bottom: 18px;
}

:is(.pixeltx-portfolio-index-main, .pixeltx-home-portfolio) .pixeltx-portfolio-project .cardInfo h2 a {
  color: inherit;
  text-decoration: none;
}

@media (max-width: 991.98px) {
  :is(.pixeltx-portfolio-index-main, .pixeltx-home-portfolio) .pixeltx-portfolio-project-grid {
    margin-left: -15px;
    margin-right: -15px;
  }

  :is(.pixeltx-portfolio-index-main, .pixeltx-home-portfolio) .pixeltx-portfolio-project {
    padding-left: 15px;
    padding-right: 15px;
  }

  :is(.pixeltx-portfolio-index-main, .pixeltx-home-portfolio) .pixeltx-portfolio-project.mt-125 {
    margin-top: 0 !important;
  }
}

@media (max-width: 767.98px) {
  .pixeltx-portfolio-index-main .pixeltx-portfolio-hero-image {
    height: 104px;
    max-width: 130px;
  }

  .pixeltx-portfolio-index-main .pixeltx-portfolio-latest-slider .swiper-slide {
    max-width: min(82vw, 354px);
    width: min(82vw, 354px) !important;
  }

  .pixeltx-portfolio-index-main .pixeltx-portfolio-latest-slider .cardRecent .cardImage {
    border-radius: 66px;
    height: min(118vw, 500px);
  }


  .pixeltx-portfolio-filter-inner {
    gap: 0 10px;
  }

  .pixeltx-portfolio-filter-inner .btn.btn-tags {
    font-size: 15px;
    padding: 13px 18px;
  }

  :is(.pixeltx-portfolio-index-main, .pixeltx-home-portfolio) .pixeltx-portfolio-project .cardRecent .cardImage img {
    aspect-ratio: 1.12 / 1;
  }
}


/* --------------------------------------------------------------------------
   PixelTX 1.6.2 — Home Portfolio section uses the same dynamic gallery as
   the Portfolio archive: category filters, AJAX results and pagination.
   -------------------------------------------------------------------------- */
.pixeltx-home-portfolio .pixeltx-portfolio-filter-bar {
  margin-top: 60px;
}

.pixeltx-home-portfolio .pixeltx-portfolio-grid-wrap {
  transition: opacity .24s ease;
}

.pixeltx-home-portfolio .pixeltx-portfolio-results {
  min-height: 1px;
}

@media (max-width: 991.98px) {
  .pixeltx-home-portfolio .pixeltx-portfolio-project.mt-125 {
    margin-top: 0 !important;
  }
}


/* --------------------------------------------------------------------------
   PixelTX 1.6.3 — Portfolio AJAX loading spinner
   A global, theme-colour-aware overlay appears while category filters or
   project pagination request new cards. It is only activated by the Portfolio
   AJAX controller and stays below the custom pointer, so cursor behaviour
   remains consistent with the source template.
   -------------------------------------------------------------------------- */
.pixeltx-portfolio-loading-overlay {
  align-items: center;
  display: flex;
  inset: 0;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  position: fixed;
  transition: opacity .18s ease, visibility .18s ease;
  visibility: hidden;
  z-index: 999990;
}

.pixeltx-portfolio-loading-overlay::before {
  background: var(--pixeltx-dark-background);
  content: "";
  inset: 0;
  opacity: .52;
  position: absolute;
}

body:not(.dark-mode) .pixeltx-portfolio-loading-overlay::before {
  background: var(--pixeltx-paper);
  opacity: .68;
}

.pixeltx-portfolio-loading-overlay.is-visible {
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
}

.pixeltx-portfolio-loading-spinner {
  animation: pixeltx-portfolio-spinner .78s linear infinite;
  border: 4px solid var(--pixeltx-light-border);
  border-radius: 50%;
  border-right-color: var(--pixeltx-primary);
  border-top-color: var(--pixeltx-accent);
  box-shadow: 0 0 0 10px rgba(0, 0, 0, .08);
  height: 64px;
  position: relative;
  width: 64px;
  z-index: 1;
}

body:not(.dark-mode) .pixeltx-portfolio-loading-spinner {
  box-shadow: 0 0 0 10px rgba(255, 255, 255, .42);
}

body.pixeltx-portfolio-loading {
  cursor: progress;
}

@keyframes pixeltx-portfolio-spinner {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .pixeltx-portfolio-loading-spinner {
    animation-duration: 1.8s;
  }
}


/* --------------------------------------------------------------------------
   PixelTX 1.6.4 — Portfolio archive outlined title contrast
   The outlined word in the Portfolio banner must remain readable over the
   configured dark background. It follows "Text on dark backgrounds" so it
   stays in sync with the adjacent filled title and the Customizer settings.
   -------------------------------------------------------------------------- */
.pixeltx-portfolio-index-main .section-banner-portfolio .stroke.stroke-900 {
  -webkit-text-stroke-color: var(--pixeltx-on-dark) !important;
  text-stroke-color: var(--pixeltx-on-dark);
}


/* PixelTX 1.7.1 — preloader restoration.
   The loader remains visible until its own animation completes. */
.page-loader[data-pixeltx-preloader] {
  opacity: 1;
  visibility: visible;
}

.page-loader[data-pixeltx-preloader].pixeltx-preloader-leaving {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .45s ease, visibility .45s ease;
}

@media (prefers-reduced-motion: reduce) {
  .page-loader[data-pixeltx-preloader] .bar,
  .page-loader[data-pixeltx-preloader] .page-loader-logo img {
    transition: none !important;
    animation: none !important;
  }
}

/* --------------------------------------------------------------------------
   PixelTX 1.8.1 — Service 1 adaptation
   -------------------------------------------------------------------------- */
.pixeltx-service-template .box-service-section-1 {
  background: none;
  min-height: min(1080px, calc(100vh - 74px));
}

.pixeltx-service-template .pixeltx-service-hero-box {
  overflow: hidden;
}

.pixeltx-service-template .pixeltx-service-hero-media {
  align-items: center;
  display: flex;
  justify-content: center;
  min-height: 560px;
  padding: 40px 0;
}

.pixeltx-service-template .pixeltx-service-hero-image {
  display: block;
  height: min(62vw, 720px);
  max-width: 100%;
  object-fit: contain;
  width: 100%;
}

.pixeltx-service-template .pixeltx-service-secondary-image {
  display: block;
  height: auto;
  max-height: 700px;
  object-fit: cover;
  width: 100%;
}

.pixeltx-service-template .pixeltx-service-editor-content {
  font-size: 1.18rem;
  line-height: 1.65;
}

.pixeltx-service-template .pixeltx-service-editor-content > *:first-child {
  margin-top: 0;
}

.pixeltx-service-template .pixeltx-service-editor-content > *:last-child {
  margin-bottom: 0;
}

.pixeltx-service-template .pixeltx-service-editor-content a {
  color: var(--pixeltx-button-hover);
}

.pixeltx-service-template .pixeltx-service-related-section .cardService .cardImage img,
.pixeltx-services-archive .cardService .cardImage img {
  display: block;
  height: 440px;
  object-fit: cover;
  width: 100%;
}

.pixeltx-service-template .pixeltx-service-related-section .cardService .cardInfo h5 {
  min-height: 86px;
}

.pixeltx-service-template .pixeltx-service-marquee-section .stroke-white {
  -webkit-text-stroke-color: var(--pixeltx-on-dark);
  text-stroke-color: var(--pixeltx-on-dark);
}

.pixeltx-service-template .pixeltx-service-cta-section .box-get-touch {
  border-top: 1px solid var(--pixeltx-dark-border);
  padding-top: 100px;
}

.pixeltx-services-archive .pixeltx-services-archive-heading {
  padding: 170px 0 70px;
}

.pixeltx-services-archive .box-services-4.pt-0 {
  padding-top: 0;
}

.pixeltx-services-archive .cardService .cardInfo {
  padding-top: 30px;
}

@media (max-width: 991px) {
  .pixeltx-service-template .box-service-section-1 {
    min-height: auto;
    padding: 140px 0 40px;
  }

  .pixeltx-service-template .pixeltx-service-hero-media {
    min-height: 360px;
    padding: 10px 0 30px;
  }

  .pixeltx-service-template .pixeltx-service-hero-image {
    height: min(85vw, 560px);
  }

  .pixeltx-service-template .pixeltx-service-hero-actions {
    flex-wrap: wrap;
    gap: 18px;
    margin-top: 56px !important;
  }

  .pixeltx-service-template .pixeltx-service-hero-actions .mr-40 {
    margin-right: 0 !important;
  }

  .pixeltx-service-template .pixeltx-service-related-section .cardService .cardImage img,
  .pixeltx-services-archive .cardService .cardImage img {
    height: 360px;
  }
}

@media (max-width: 575px) {
  .pixeltx-service-template .list-col-3 {
    flex-wrap: wrap;
  }

  .pixeltx-service-template .list-col-3 li {
    width: 100%;
  }

  .pixeltx-service-template .pixeltx-service-hero-media {
    min-height: 280px;
  }

  .pixeltx-service-template .pixeltx-service-hero-image {
    height: 78vw;
  }
}


/* v1.8.2 — Pixel TX home and service imagery. */
.pixeltx-homepage-hero-image {
  filter: none !important;
}


/* --------------------------------------------------------------------------
   PixelTX 1.8.4 — Fixed Home colour sequence and selected-work layout.
   The global colour toggle was removed: the homepage now owns a deliberate
   light/dark narrative instead of inheriting a visitor preference.
   -------------------------------------------------------------------------- */
.home .pixeltx-home-section--dark {
  background-color: var(--pixeltx-dark-background) !important;
}

.home .pixeltx-home-section--dark .bg-0,
.home .pixeltx-home-section--dark.bg-0 {
  background-color: var(--pixeltx-dark-background) !important;
}

.home .pixeltx-home-section--dark .color-900,
.home .pixeltx-home-section--dark .color-dark-900 {
  color: var(--pixeltx-on-dark) !important;
}

.home .pixeltx-home-section--dark .stroke-900 {
  -webkit-text-stroke-color: var(--pixeltx-on-dark) !important;
}

.home .pixeltx-home-section--light,
.home .pixeltx-home-section--light .bg-0,
.home .pixeltx-home-section--light.bg-0 {
  background-color: var(--pixeltx-paper) !important;
}

.home .pixeltx-home-section--light .color-900,
.home .pixeltx-home-section--light .color-light-900 {
  color: var(--pixeltx-ink) !important;
}

.home .pixeltx-home-section--light .color-600 {
  color: var(--pixeltx-muted) !important;
}

.home .pixeltx-home-section--light .stroke-900 {
  -webkit-text-stroke-color: var(--pixeltx-ink) !important;
}

/* The hero is intentionally image-only: the legacy video affordance is absent. */

/* The selected gallery always follows the full-width section heading. */
.pixeltx-selected-projects-heading {
  max-width: 860px;
}

.pixeltx-selected-projects-content {
  margin-top: 70px;
}

.pixeltx-selected-projects-content .pixeltx-selected-projects-grid {
  margin-top: 0;
}

@media (max-width: 991.98px) {
  .pixeltx-selected-projects-content {
    margin-top: 44px;
  }
}

@media (max-width: 575.98px) {
  .pixeltx-selected-projects-content {
    margin-top: 34px;
  }
}

/* --------------------------------------------------------------------------
   PixelTX 1.8.5 — Hero media panel and corporate rotating badge.
   The former video area is now a light image panel. The CTA circle remains
   deliberately non-clickable, so no video affordance returns.
   -------------------------------------------------------------------------- */
.home .pixeltx-home-hero .pixeltx-home-hero-media {
  background-color: var(--pixeltx-paper) !important;
  box-sizing: border-box;
  padding: 24px;
}

.home .pixeltx-home-hero .pixeltx-home-hero-media > img {
  display: block;
}

.home .pixeltx-home-hero .pixeltx-hero-rotating-badge {
  background-color: #ffc400 !important;
  background-image: url("assets/imgs/template/icons/hero-badge-arrow.svg") !important;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 3;
}

.home .pixeltx-home-hero .pixeltx-hero-rotating-badge .box-text-circle span,
.dark-mode .home .pixeltx-home-hero .pixeltx-hero-rotating-badge .box-text-circle span {
  color: var(--pixeltx-ink) !important;
}

@media (max-width: 991.98px) {
  .home .pixeltx-home-hero .pixeltx-home-hero-media {
    padding: 18px;
  }
}

@media (max-width: 767.98px) {
  .home .pixeltx-home-hero .pixeltx-home-hero-media {
    padding: 12px;
  }

  /* Keep the source-template mobile rule: the rotating badge is desktop-only. */
  .home .pixeltx-home-hero .pixeltx-hero-rotating-badge {
    display: none;
  }
}



/* --------------------------------------------------------------------------
   PixelTX 1.8.7 — Brand mark scale refinement
   Header logos are 20% larger and the preloader icon is 40% larger.
   -------------------------------------------------------------------------- */
.header-logo .pixeltx-branding-link,
.mobile-logo .pixeltx-branding-link {
  display: inline-flex;
  align-items: center;
}

.header-logo .pixeltx-header-brand-logo {
  display: block;
  width: 156px;
  height: auto;
  max-width: min(156px, 44vw);
}

.mobile-header-wrapper-style .mobile-header-wrapper-inner .mobile-logo .pixeltx-header-brand-logo {
  display: block;
  width: 156px !important;
  height: auto;
  max-width: min(156px, 64vw);
}

.page-loader .page-loader-logo .pixeltx-preloader-icon {
  display: block;
  width: 96px;
  height: auto;
  max-height: 135px;
}

@media (max-width: 575px) {
  .header-logo .pixeltx-header-brand-logo {
    width: 134px;
    max-width: min(134px, 52vw);
  }

  .mobile-header-wrapper-style .mobile-header-wrapper-inner .mobile-logo .pixeltx-header-brand-logo {
    width: 142px !important;
    max-width: min(142px, 66vw);
  }
}


/* --------------------------------------------------------------------------
   PixelTX v1.8.7.3 — Beuve footer composition
   Preserves the footer layout supplied in the Beuve theme while using the
   PixelTX company details and legal WordPress menu.
   -------------------------------------------------------------------------- */
.pixeltx-footer-beuve .logo-footer > .parallax-item {
  display: inline-block;
  max-width: 170px;
}

.pixeltx-footer-beuve .logo-footer > .parallax-item img {
  display: block;
  width: 100%;
  height: auto;
}

.pixeltx-footer-beuve .logo-bang {
  margin-left: auto;
  max-width: 300px;
}

.pixeltx-footer-beuve .logo-bang .parallax-item {
  display: block;
}

.pixeltx-footer-beuve .logo-bang img {
  display: block;
  width: 100%;
  height: auto;
}

.pixeltx-footer-beuve img.pixel-footer {
  position: absolute;
  top: 80px;
  right: 10%;
  width: min(150px, 12vw);
  height: auto;
  pointer-events: none;
}

.pixeltx-footer-beuve .footer-bottom address,
.pixeltx-footer-beuve .footer-bottom address a {
  font-style: normal;
}

@media (max-width: 991.98px) {
  .pixeltx-footer-beuve .logo-footer > .parallax-item {
    max-width: 120px;
  }

  .pixeltx-footer-beuve .logo-bang {
    max-width: 240px;
    margin-left: 0;
  }

  .pixeltx-footer-beuve img.pixel-footer {
    top: 48px;
    right: 5%;
    width: 106px;
  }
}

@media (max-width: 575.98px) {
  .pixeltx-footer-beuve .logo-bang {
    max-width: 200px;
  }

  .pixeltx-footer-beuve img.pixel-footer {
    display: none;
  }
}


/* --------------------------------------------------------------------------
   PixelTX v1.8.7.4 — Footer logo proportions restored
   The Beuve footer assets are now rendered at the original source proportions.
   PixelTX keeps its former 78px rotating snow icon rather than the Beuve mark.
   -------------------------------------------------------------------------- */
.pixeltx-footer-beuve .logo-footer > .parallax-item-wrap,
.pixeltx-footer-beuve .logo-footer > .parallax-item {
  display: inline-block;
  max-width: 100%;
}

.pixeltx-footer-beuve .logo-footer > .parallax-item-wrap > .parallax-item,
.pixeltx-footer-beuve .logo-footer > .parallax-item {
  max-width: 100%;
}

.pixeltx-footer-beuve .logo-footer > .parallax-item-wrap img,
.pixeltx-footer-beuve .logo-footer > .parallax-item img {
  display: block;
  width: 137.3px !important;
  max-width: 100%;
  height: auto;
}

.pixeltx-footer-beuve .logo-bang {
  max-width: none;
  margin-left: 0;
}

.pixeltx-footer-beuve .logo-bang > .parallax-item-wrap,
.pixeltx-footer-beuve .logo-bang > .parallax-item {
  display: block;
  width: 100%;
  max-width: 100%;
}

.pixeltx-footer-beuve .logo-bang .parallax-item img,
.pixeltx-footer-beuve .logo-bang .parallax-item-wrap img {
  display: block;
  width: 490.3px !important;
  max-width: 100%;
  height: auto;
}

.pixeltx-footer-beuve img.snow-footer.pixeltx-footer-spin {
  position: absolute;
  top: 80px;
  right: 10%;
  width: 78px;
  height: 78px;
  max-width: none;
  object-fit: contain;
  pointer-events: none;
}

@media (max-width: 991.98px) {
  .pixeltx-footer-beuve .logo-footer > .parallax-item-wrap img,
  .pixeltx-footer-beuve .logo-footer > .parallax-item img {
    width: 120px !important;
  }

  .pixeltx-footer-beuve .logo-bang {
    margin-left: 0;
  }

  .pixeltx-footer-beuve img.snow-footer.pixeltx-footer-spin {
    top: 58px;
    right: 5%;
    width: 78px;
    height: 78px;
  }
}

@media (max-width: 575.98px) {
  .pixeltx-footer-beuve .logo-bang .parallax-item img,
  .pixeltx-footer-beuve .logo-bang .parallax-item-wrap img {
    width: min(490.3px, 100%) !important;
  }

  .pixeltx-footer-beuve img.snow-footer.pixeltx-footer-spin {
    top: 30px;
    right: 20px;
    width: 62px;
    height: 62px;
  }
}


/* --------------------------------------------------------------------------
   PixelTX v1.8.7.5 — Footer brand sizing
   Desktop logo widths requested for the Beuve-style footer.
   -------------------------------------------------------------------------- */
.pixeltx-footer-beuve .logo-footer > .parallax-item-wrap img,
.pixeltx-footer-beuve .logo-footer > .parallax-item img {
  width: 250px !important;
}

.pixeltx-footer-beuve .logo-bang .parallax-item img,
.pixeltx-footer-beuve .logo-bang .parallax-item-wrap img {
  width: 400px !important;
}

@media (max-width: 991.98px) {
  .pixeltx-footer-beuve .logo-footer > .parallax-item-wrap img,
  .pixeltx-footer-beuve .logo-footer > .parallax-item img {
    width: min(250px, 100%) !important;
  }

  .pixeltx-footer-beuve .logo-bang .parallax-item img,
  .pixeltx-footer-beuve .logo-bang .parallax-item-wrap img {
    width: min(400px, 100%) !important;
  }
}


/* --------------------------------------------------------------------------
   PixelTX v1.8.7.9 — Homepage hero text colour refinement
   Keep the original hero layout and animation, only recolouring the three
   new headline lines: first two black outline only, third line black outline
   plus a 60% black animated fill.
   -------------------------------------------------------------------------- */
.home .pixeltx-home-hero .banner-left > .scroll-zoom-out:nth-child(1) .stroke,
.home .pixeltx-home-hero .banner-left > .scroll-zoom-out:nth-child(2) .stroke {
  color: transparent !important;
  -webkit-text-stroke: 1.5px #0C0D0E !important;
}

.home .pixeltx-home-hero .banner-left .text-fill-wrap .text-fill {
  color: transparent !important;
  -webkit-text-stroke: 1px #0C0D0E !important;
}

.home .pixeltx-home-hero .banner-left .text-fill-wrap .text-fill::before {
  color: rgba(12, 13, 14, 0.6) !important;
}


/* --------------------------------------------------------------------------
   PixelTX v1.8.7.10 — Cursor follower centring
   The custom dot and its follower now share a fixed 0,0 origin; main.js
   calculates their position from actual rendered dimensions.
   -------------------------------------------------------------------------- */
.cursor,
.follower {
  top: 0;
  left: 0;
}


/* --------------------------------------------------------------------------
   PixelTX v1.8.7.11 — Homepage banner pattern overlay
   Adds the supplied full-width parallax SVG layer inside banner-homepage1,
   positioned above the yellow background and below the existing line effect.
   No size, spacing or behaviour of banner-homepage1 is changed.
   -------------------------------------------------------------------------- */
.home .banner-homepage1 .bg-banner-1 {
  z-index: 0;
}

.home .banner-homepage1 .pixeltx-banner-parallax-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
  background-image: url("assets/imgs/page/homepage1/pixeltx-hero-pattern-overlay.svg");
  background-repeat: no-repeat;
  background-position: center top;
  background-size: cover;
}

.home .banner-homepage1 .banner-line {
  z-index: 2;
}

@media (max-width: 767.98px) {
  .home .banner-homepage1 .pixeltx-banner-parallax-layer {
    background-position: center top;
    background-size: auto 100%;
  }
}


/* PixelTX v1.8.7.12 — Hero SVG fade state. */
.home .banner-homepage1 .pixeltx-banner-parallax-layer {
  opacity: .8;
}


/* --------------------------------------------------------------------------
   PixelTX v1.8.7.14 — Homepage client logo slider
   Keeps the original Swiper instance and replaces its placeholder words with
   the supplied client logos at their native 193 × 73 px proportions.
   -------------------------------------------------------------------------- */
.home .box-why-us-bottom .pixeltx-client-logo-slide {
  align-items: center;
  display: flex;
  justify-content: center;
  min-height: 73px;
}

.home .box-why-us-bottom .pixeltx-client-logo {
  display: block;
  width: 193px;
  max-width: 100%;
  height: auto;
  max-height: 73px;
  object-fit: contain;
}

@media (max-width: 599.98px) {
  .home .box-why-us-bottom .pixeltx-client-logo {
    width: min(193px, 86%);
  }
}


/* --------------------------------------------------------------------------
   PixelTX v1.8.7.15 — Client logo carousel motion
   Automatic advance every two seconds while preserving manual drag control.
   -------------------------------------------------------------------------- */
.home .box-why-us-bottom .pixeltx-client-logo-carousel {
  cursor: grab;
}

.home .box-why-us-bottom .pixeltx-client-logo-carousel.swiper-container-dragging {
  cursor: grabbing;
}


/* --------------------------------------------------------------------------
   PixelTX v1.8.7.16 — Blog heading aligned with Contact page
   -------------------------------------------------------------------------- */
.pixeltx-blog-index-main .pixeltx-blog-contact-title {
  padding-bottom: 0;
}

.pixeltx-blog-index-main .pixeltx-blog-contact-title #pixeltx-blog-index-title {
  margin-bottom: 30px !important;
}


/* --------------------------------------------------------------------------
   PixelTX v1.8.7.17 — Contact and Blog primary-colour headings
   The Contact / Blog title and subtitle use the configurable primary colour.
   -------------------------------------------------------------------------- */
.pixeltx-contact-page .pixeltx-page-heading-primary,
.pixeltx-blog-index-main .pixeltx-page-heading-primary,
.pixeltx-contact-page .pixeltx-page-subtitle-primary,
.pixeltx-blog-index-main .pixeltx-page-subtitle-primary {
  color: var(--pixeltx-primary) !important;
  -webkit-text-fill-color: var(--pixeltx-primary) !important;
}

.pixeltx-contact-page .pixeltx-page-subtitle-primary :is(h1, h2, h3, h4, h5, h6, p),
.pixeltx-contact-page .pixeltx-page-subtitle-primary {
  color: var(--pixeltx-primary) !important;
  -webkit-text-fill-color: var(--pixeltx-primary) !important;
}


/* --------------------------------------------------------------------------
   PixelTX v1.8.7.18 — Contact and Blog subtitles stay white
   Primary colour remains reserved for the page headings.
   -------------------------------------------------------------------------- */
.pixeltx-contact-page .pixeltx-page-subtitle-primary,
.pixeltx-contact-page .pixeltx-page-subtitle-primary :is(h1, h2, h3, h4, h5, h6, p),
.pixeltx-blog-index-main .pixeltx-page-subtitle-primary {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}


/* --------------------------------------------------------------------------
   PixelTX v1.8.7.19 — Contact and Blog heading scroll scale
   A single GSAP tween controls each heading, returning exactly to scale 1
   when the scroll is reversed. This replaces the conflicting grow-up and
   scroll-zoom-in transforms formerly applied to the same element.
   -------------------------------------------------------------------------- */
.pixeltx-page-heading-scroll {
  transform-origin: left center;
}


/* --------------------------------------------------------------------------
   PixelTX v1.8.7.20 — Light service-card sections
   The services archive carousel and each service's related-services carousel
   remain on the light canvas, independently of the global dark page frame.
   -------------------------------------------------------------------------- */
.pixeltx-services-summary-cards .box-services,
.pixeltx-service-related-section .box-services {
  background-color: var(--pixeltx-light-surface) !important;
}

.pixeltx-services-summary-cards .color-900,
.pixeltx-service-related-section .color-900 {
  color: var(--pixeltx-ink) !important;
}

.pixeltx-services-summary-cards .stroke-900,
.pixeltx-service-related-section .stroke-900 {
  -webkit-text-stroke-color: var(--pixeltx-ink) !important;
  text-stroke-color: var(--pixeltx-ink);
}


/* --------------------------------------------------------------------------
   PixelTX v1.8.7.22 — Services CTA title line breaks
   The services "Hablemos" headline stays at its original size and animation,
   but is deliberately composed across three fixed lines to clear the nearby
   floating graphic.
   -------------------------------------------------------------------------- */
.pixeltx-services-summary-cta .pixeltx-services-contact-title-lines > span {
  display: block;
}


/* --------------------------------------------------------------------------
   PixelTX v1.8.7.23 — Header direction-aware sticky behaviour
   The header remains transparent in its original fixed state. Once the page
   has travelled past the header's own height, it becomes sticky: hidden while
   descending and revealed while ascending. The change is transform-only, so
   it does not alter its source-template dimensions or transparent treatment.
   -------------------------------------------------------------------------- */
.header .main-header .header-account .menu-mobile .pixeltx-menu-icon,
.header .main-header .header-account .menu-mobile:hover .pixeltx-menu-icon,
.header .main-header .header-account .menu-mobile:focus-visible .pixeltx-menu-icon {
  background-color: var(--pixeltx-ink) !important;
}

.header.sticky-bar {
  will-change: transform;
  transition: transform .34s cubic-bezier(.22, .61, .36, 1),
              background-color .3s ease,
              box-shadow .3s ease,
              backdrop-filter .3s ease;
}

/* The source template adds a fadeInDown animation to `.stick`. It conflicts
   with the direction-driven transform below, so the custom controller owns
   the motion while retaining the original sticky background and blur. */
.header.sticky-bar.stick {
  animation: none !important;
}

.header.sticky-bar.pixeltx-header--hidden {
  pointer-events: none;
  transform: translate3d(0, -100%, 0);
}

@media (prefers-reduced-motion: reduce) {
  .header.sticky-bar {
    transition: none !important;
  }
}


/* --------------------------------------------------------------------------
   PixelTX v1.8.7.24 — Internal-page header logo colour transition
   Internal pages open over their dark headers with the white parts of the
   Pixel TX mark rendered grey and its grey wordmark rendered in the theme
   primary yellow. Once the sticky yellow header is active, the original SVG
   returns. The mark crossfades without changing its dimensions or position.
   -------------------------------------------------------------------------- */
.header-logo .pixeltx-header-brand-logo-stack {
  display: block;
  position: relative;
  width: 156px;
  max-width: min(156px, 44vw);
}

.header-logo .pixeltx-header-brand-logo-stack .pixeltx-header-brand-logo {
  display: block;
  width: 100% !important;
  max-width: 100% !important;
  height: auto;
  transition: opacity .3s ease;
}

.header-logo .pixeltx-header-brand-logo-stack .pixeltx-header-brand-logo--dark-page {
  position: absolute;
  inset: 0;
  opacity: 0;
}

.header.sticky-bar.pixeltx-header--dark-intro:not(.stick):not(.header-bg-2) .pixeltx-header-brand-logo--normal {
  opacity: 0;
}

.header.sticky-bar.pixeltx-header--dark-intro:not(.stick):not(.header-bg-2) .pixeltx-header-brand-logo--dark-page {
  opacity: 1;
}

.header.sticky-bar.stick .pixeltx-header-brand-logo--normal,
.header.sticky-bar.header-bg-2 .pixeltx-header-brand-logo--normal {
  opacity: 1;
}

.header.sticky-bar.stick .pixeltx-header-brand-logo--dark-page,
.header.sticky-bar.header-bg-2 .pixeltx-header-brand-logo--dark-page {
  opacity: 0;
}

@media (max-width: 575px) {
  .header-logo .pixeltx-header-brand-logo-stack {
    width: 134px;
    max-width: min(134px, 52vw);
  }
}


/* --------------------------------------------------------------------------
   PixelTX v1.8.7.26 — Palette and asset audit
   Legacy blue source-template colours now inherit the PixelTX yellow palette.
   External arrow SVGs remain unfiltered so their own embedded fills are used.
   -------------------------------------------------------------------------- */
:root {
  --pixeltx-arrow-color: #ffe36c;
}

.pixeltx-contact-page .pixeltx-contact-form .wpcf7-submit.btn.btn-black,
.pixeltx-service-contact .wpcf7-submit.btn.btn-black {
  filter: none;
}


/* Bootstrap inherits the public PixelTX palette rather than its demo blue. */
:root {
  --bs-primary: var(--pixeltx-primary);
  --bs-primary-rgb: 255, 198, 41;
  --bs-link-color: var(--pixeltx-primary);
  --bs-link-hover-color: var(--pixeltx-accent);
  --bs-focus-ring-color: rgba(255, 198, 41, .25);
}


/* --------------------------------------------------------------------------
   PixelTX v1.8.7.28 — Contextual hamburger icon colour
   The four-dot menu mark is black on the home page. On internal dark headers
   it preserves the SVG's original yellow; once the sticky/yellow header is
   active it changes to black for contrast.
   -------------------------------------------------------------------------- */
.header .main-header .header-account .menu-mobile .pixeltx-menu-icon,
.header .main-header .header-account .menu-mobile:hover .pixeltx-menu-icon,
.header .main-header .header-account .menu-mobile:focus-visible .pixeltx-menu-icon {
  background-color: var(--pixeltx-accent) !important;
}

/* Home starts over the yellow hero, so its menu icon remains black. */
.home .header .main-header .header-account .menu-mobile .pixeltx-menu-icon,
.home .header .main-header .header-account .menu-mobile:hover .pixeltx-menu-icon,
.home .header .main-header .header-account .menu-mobile:focus-visible .pixeltx-menu-icon {
  background-color: var(--pixeltx-ink) !important;
}

/* Internal pages: yellow icon over the initial dark header. */
.header.sticky-bar.pixeltx-header--dark-intro:not(.stick):not(.header-bg-2) .main-header .header-account .menu-mobile .pixeltx-menu-icon,
.header.sticky-bar.pixeltx-header--dark-intro:not(.stick):not(.header-bg-2) .main-header .header-account .menu-mobile:hover .pixeltx-menu-icon,
.header.sticky-bar.pixeltx-header--dark-intro:not(.stick):not(.header-bg-2) .main-header .header-account .menu-mobile:focus-visible .pixeltx-menu-icon {
  background-color: var(--pixeltx-accent) !important;
}

/* The sticky yellow header always uses the black icon. */
.header.sticky-bar.stick .main-header .header-account .menu-mobile .pixeltx-menu-icon,
.header.sticky-bar.stick .main-header .header-account .menu-mobile:hover .pixeltx-menu-icon,
.header.sticky-bar.stick .main-header .header-account .menu-mobile:focus-visible .pixeltx-menu-icon,
.header.sticky-bar.header-bg-2 .main-header .header-account .menu-mobile .pixeltx-menu-icon,
.header.sticky-bar.header-bg-2 .main-header .header-account .menu-mobile:hover .pixeltx-menu-icon,
.header.sticky-bar.header-bg-2 .main-header .header-account .menu-mobile:focus-visible .pixeltx-menu-icon {
  background-color: var(--pixeltx-ink) !important;
}


/* --------------------------------------------------------------------------
   PixelTX v1.8.7.29 — Museo typography system
   Museo 700 is the default heading face and Museo 300 is the default body
   face. Customizer uploads remain available as explicit overrides.
   -------------------------------------------------------------------------- */
body,
input,
select,
button,
textarea,
.font-3xl,
.font-2xl,
.font-xl,
.font-lg,
.font-md,
.font-sm,
.font-xs,
.font-3xl-bold,
.font-2xl-bold,
.font-xl-bold,
.font-lg-bold,
.font-md-bold,
.font-sm-bold,
.font-xs-bold {
  font-family: var(--pixeltx-font-body) !important;
}

body,
input,
select,
button,
textarea {
  font-weight: 300;
}

h1,
h2,
h3,
h4,
h5,
h6,
.heading-title,
.heading-title-medium,
.heading-1,
.heading-2,
.heading-3,
.heading-4,
.heading-5,
.heading-6,
.font-heading,
.font-fahkwang,
.header .main-menu li a,
.mobile-header-wrapper-style .mobile-header-wrapper-inner .mobile-header-content-area .mobile-menu-wrap nav .mobile-menu li a {
  font-family: var(--pixeltx-font-heading) !important;
  font-weight: 700;
}


/* --------------------------------------------------------------------------
   PixelTX v1.8.7.30 — FAQ translated heading layout
   The original template caps text-up wrappers at 120px. Spanish FAQ headings
   wrap onto two lines, so their reveal container must retain its natural height
   before the illustration that follows.
   -------------------------------------------------------------------------- */
.reveal-text-cover.pixeltx-faq-title-reveal {
  max-height: none;
}

/* Preserve the intended two-line reading rhythm at desktop widths without
   affecting the visual scale or animation of the original heading. */
.box-faqs .pixeltx-faq-title {
  max-width: 100%;
}


/* --------------------------------------------------------------------------
   PixelTX v1.8.7.31 — Homepage blog carousel image crop
   Blog carousel images keep a unified frame height. Oversized image width is
   cropped from the centre instead of being squeezed to fit the slide.
   -------------------------------------------------------------------------- */
.home .blogs-slider .cardBlog .cardImage {
  height: clamp(360px, 34vw, 520px);
  max-width: 90%;
  overflow: hidden;
}

.home .blogs-slider .cardBlog .cardImage > a,
.home .blogs-slider .cardBlog .cardImage .parallax-image-wrap,
.home .blogs-slider .cardBlog .cardImage .parallax-image-inner {
  display: block;
  width: 100%;
  height: 100%;
}

.home .blogs-slider .cardBlog .cardImage img,
.home .blogs-slider .cardBlog .cardImage .parallax-image {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center center;
}

@media (max-width: 991.98px) {
  .home .blogs-slider .cardBlog .cardImage {
    height: clamp(320px, 60vw, 460px);
  }
}

@media (max-width: 575.98px) {
  .home .blogs-slider .cardBlog .cardImage {
    height: 340px;
    max-width: 100%;
  }
}


/* --------------------------------------------------------------------------
   PixelTX v1.8.7.32 — Cookie consent notice
   Floating square-style consent panel in the lower-right corner. It uses the
   theme yellow at 80% opacity with backdrop blur and equal-level choices for
   accepting cookies; rejection only dismisses the panel until the next load.
   -------------------------------------------------------------------------- */
.pixeltx-cookie-banner {
  position: fixed;
  right: clamp(18px, 2.2vw, 34px);
  bottom: clamp(18px, 2.2vw, 34px);
  z-index: 99999;
  width: min(390px, calc(100vw - 36px));
  min-height: 390px;
  background: rgba(255, 198, 41, .8);
  -webkit-backdrop-filter: blur(18px) saturate(130%);
  backdrop-filter: blur(18px) saturate(130%);
  border: 1px solid rgba(12, 13, 14, .18);
  box-shadow: 0 28px 80px rgba(12, 13, 14, .24);
  color: #0C0D0E;
  opacity: 0;
  transform: translate3d(0, 18px, 0) scale(.98);
  transition: opacity .24s ease, transform .24s ease;
  pointer-events: none;
  overflow: hidden;
}

.pixeltx-cookie-banner.is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
  pointer-events: auto;
}

.pixeltx-cookie-banner[hidden] {
  display: block !important;
  visibility: hidden;
}

.pixeltx-cookie-panel {
  min-height: 390px;
  padding: 30px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 16px;
}

.pixeltx-cookie-panel--settings {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: translateX(24px);
  pointer-events: none;
  transition: opacity .24s ease, transform .24s ease;
}

.pixeltx-cookie-panel--summary {
  opacity: 1;
  transform: translateX(0);
  transition: opacity .24s ease, transform .24s ease;
}

.pixeltx-cookie-banner.is-configuring .pixeltx-cookie-panel--summary {
  opacity: 0;
  transform: translateX(-24px);
  pointer-events: none;
}

.pixeltx-cookie-banner.is-configuring .pixeltx-cookie-panel--settings {
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
}

.pixeltx-cookie-kicker {
  margin: 0 0 -8px;
  font-family: var(--pixeltx-heading-font, "Museo 700", sans-serif);
  font-size: 12px;
  line-height: 1;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(12, 13, 14, .74);
}

.pixeltx-cookie-banner h2 {
  margin: 0;
  font-family: var(--pixeltx-heading-font, "Museo 700", sans-serif);
  font-size: 44px;
  line-height: .95;
  color: #0C0D0E;
}

.pixeltx-cookie-banner p {
  margin: 0;
  font-size: 15px;
  line-height: 1.42;
  color: rgba(12, 13, 14, .86);
}

.pixeltx-cookie-links {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.pixeltx-cookie-links a {
  color: #0C0D0E;
  font-size: 13px;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.pixeltx-cookie-actions {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
}

.pixeltx-cookie-actions--settings {
  grid-template-columns: 1fr 1fr;
}

.pixeltx-cookie-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 12px 12px;
  border: 1px solid #0C0D0E;
  background: transparent;
  color: #0C0D0E;
  font-family: var(--pixeltx-heading-font, "Museo 700", sans-serif);
  font-size: 12px;
  line-height: 1.1;
  text-align: center;
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}

.pixeltx-cookie-btn:hover,
.pixeltx-cookie-btn:focus-visible {
  background: #3D3D3B;
  border-color: #3D3D3B;
  color: #FFFFFF;
  outline: none;
}

.pixeltx-cookie-toggle {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 16px;
  align-items: center;
  margin: 0;
  padding: 14px 0;
  border-top: 1px solid rgba(12, 13, 14, .2);
  cursor: pointer;
}

.pixeltx-cookie-toggle:last-of-type {
  border-bottom: 1px solid rgba(12, 13, 14, .2);
}

.pixeltx-cookie-toggle.is-disabled {
  cursor: default;
}

.pixeltx-cookie-toggle span {
  display: grid;
  gap: 4px;
  color: rgba(12, 13, 14, .76);
  font-size: 13px;
  line-height: 1.28;
}

.pixeltx-cookie-toggle strong {
  display: block;
  color: #0C0D0E;
  font-family: var(--pixeltx-heading-font, "Museo 700", sans-serif);
  font-size: 14px;
}

.pixeltx-cookie-toggle input {
  width: 22px;
  height: 22px;
  accent-color: #0C0D0E;
}

@media (max-width: 575.98px) {
  .pixeltx-cookie-banner {
    right: 14px;
    bottom: 14px;
    width: calc(100vw - 28px);
    min-height: auto;
  }

  .pixeltx-cookie-panel {
    min-height: auto;
    padding: 24px;
  }

  .pixeltx-cookie-panel--settings {
    min-height: 100%;
  }

  .pixeltx-cookie-banner h2 {
    font-size: 38px;
  }

  .pixeltx-cookie-actions,
  .pixeltx-cookie-actions--settings {
    grid-template-columns: 1fr;
  }
}


/* --------------------------------------------------------------------------
   PixelTX v1.8.7.34 — Home header and hero colour refinement
   Header menu text and desktop top-level links use the corporate grey on the
   home hero. The hero contact details use the same grey, and the quote button
   switches to the light-background treatment with a dark grey surface.
   -------------------------------------------------------------------------- */
.home .header .main-header .header-account .menu-mobile .font-lg,
.home .header .main-header .header-account .menu-mobile .text-white,
.home .header .main-header .header-account .menu-mobile .color-900 {
  color: #3D3D3B !important;
}

.home .header .nav-main-menu > .main-menu > li > a,
.home .header .nav-main-menu > ul.main-menu > li > a,
.home .header .main-menu > li > a {
  color: #3D3D3B !important;
}

.home .header .nav-main-menu > .main-menu > li > a:hover,
.home .header .nav-main-menu > ul.main-menu > li > a:hover,
.home .header .main-menu > li > a:hover {
  color: #0C0D0E !important;
}

.home .pixeltx-home-hero .banner-right .hidden-text,
.home .pixeltx-home-hero .banner-right .hidden-text a,
.home .pixeltx-home-hero .banner-right .color-0 {
  color: #3D3D3B !important;
}

.home .pixeltx-home-hero .box-get-quote {
  background-color: #3D3D3B !important;
  color: #FFFFFF !important;
}

.home .pixeltx-home-hero .box-get-quote:hover {
  background-color: #0C0D0E !important;
  color: #FFFFFF !important;
}

.home .pixeltx-home-hero .box-get-quote .info-quote,
.home .pixeltx-home-hero .box-get-quote .info-quote span {
  color: #FFFFFF !important;
}


/* --------------------------------------------------------------------------
   PixelTX v1.8.7.35 — Portfolio archive heading unified with internal pages
   The Portfolio listing uses the same title system as Contact / Blog. Single
   project pages keep their original portfolio-detail hero and layout.
   -------------------------------------------------------------------------- */
.pixeltx-portfolio-index-main .pixeltx-page-heading-primary {
  color: var(--pixeltx-primary) !important;
  -webkit-text-fill-color: var(--pixeltx-primary) !important;
}

.pixeltx-portfolio-index-main .pixeltx-page-subtitle-primary {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

.pixeltx-portfolio-index-main .pixeltx-portfolio-contact-title {
  padding-bottom: clamp(70px, 8vw, 130px);
}

.pixeltx-portfolio-index-main .pixeltx-portfolio-latest-section {
  padding-top: 0;
}

.pixeltx-portfolio-index-main .pixeltx-portfolio-latest-section .box-slide-portfolio {
  margin-top: 0;
}

/* --------------------------------------------------------------------------
   PixelTX v1.8.7.36 — Portfolio single restored + heading spacing
   Single portfolio projects return to the former hero/gallery heading layout.
   The archive heading keeps extra air below the subtitle before the content.
   -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
  .pixeltx-portfolio-index-main .pixeltx-portfolio-contact-title {
    padding-bottom: 64px;
  }
}


/* --------------------------------------------------------------------------
   PixelTX v1.8.7.37 — Portfolio 2 gallery and image crop refinement
   Restores the original portfolio-2 centred slider behaviour, prevents the
   custom cursor from showing Drag + View at once, crops vertical images inside
   fixed-height frames and forces the recent-work area to the light version.
   -------------------------------------------------------------------------- */
.pixeltx-portfolio-index-main .pixeltx-portfolio-latest-slider .cardRecent .cardImage,
.pixeltx-portfolio-index-main .pixeltx-portfolio-project .cardRecent .cardImage {
  overflow: hidden;
}

.pixeltx-portfolio-index-main .pixeltx-portfolio-latest-slider .cardRecent .cardImage img {
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: none !important;
  object-fit: cover;
  object-position: center center;
}

.pixeltx-portfolio-index-main .pixeltx-portfolio-project .cardRecent .cardImage {
  height: clamp(420px, 39vw, 610px);
}

.pixeltx-portfolio-index-main .pixeltx-portfolio-project .cardRecent .cardImage > a,
.pixeltx-portfolio-index-main .pixeltx-portfolio-project .cardRecent .cardImage .parallax-image-wrap,
.pixeltx-portfolio-index-main .pixeltx-portfolio-project .cardRecent .cardImage .parallax-image-inner {
  display: block;
  width: 100%;
  height: 100%;
}

.pixeltx-portfolio-index-main .pixeltx-portfolio-project .cardRecent .cardImage img,
.pixeltx-portfolio-index-main .pixeltx-portfolio-project .cardRecent .cardImage .parallax-image {
  display: block;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  min-width: 0 !important;
  min-height: 0 !important;
  aspect-ratio: auto !important;
  object-fit: cover;
  object-position: center center;
}

.cursor.cursor-view.cursor-drag span.drag {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}

.pixeltx-portfolio-index-main .pixeltx-portfolio-recent-work-section,
.pixeltx-portfolio-index-main .pixeltx-portfolio-recent-work-light,
.dark-mode .pixeltx-portfolio-index-main .pixeltx-portfolio-recent-work-section,
.dark-mode .pixeltx-portfolio-index-main .pixeltx-portfolio-recent-work-light {
  background-color: var(--pixeltx-paper) !important;
}

.pixeltx-portfolio-index-main .pixeltx-portfolio-recent-work-light .color-900,
.pixeltx-portfolio-index-main .pixeltx-portfolio-recent-work-light .color-light-900,
.dark-mode .pixeltx-portfolio-index-main .pixeltx-portfolio-recent-work-light .color-900,
.dark-mode .pixeltx-portfolio-index-main .pixeltx-portfolio-recent-work-light .color-light-900 {
  color: var(--pixeltx-ink) !important;
  -webkit-text-fill-color: var(--pixeltx-ink) !important;
}

.pixeltx-portfolio-index-main .pixeltx-portfolio-recent-work-light .color-600,
.dark-mode .pixeltx-portfolio-index-main .pixeltx-portfolio-recent-work-light .color-600 {
  color: var(--pixeltx-muted) !important;
}

.pixeltx-portfolio-index-main .pixeltx-portfolio-recent-work-light .stroke-900,
.dark-mode .pixeltx-portfolio-index-main .pixeltx-portfolio-recent-work-light .stroke-900 {
  -webkit-text-stroke-color: var(--pixeltx-ink) !important;
  text-stroke-color: var(--pixeltx-ink) !important;
}

@media (max-width: 991.98px) {
  .pixeltx-portfolio-index-main .pixeltx-portfolio-project .cardRecent .cardImage {
    height: clamp(340px, 72vw, 560px);
  }
}

@media (max-width: 575.98px) {
  .pixeltx-portfolio-index-main .pixeltx-portfolio-project .cardRecent .cardImage {
    height: clamp(300px, 86vw, 460px);
  }
}


/* --------------------------------------------------------------------------
   PixelTX v1.8.7.38 — Portfolio preview sizing and centred slide expansion
   The portfolio-2 carousel recovers the wide centre-card effect and every
   portfolio preview frame uses centred cover cropping rather than stretching.
   -------------------------------------------------------------------------- */
.pixeltx-portfolio-index-main .pixeltx-portfolio-latest-slider .swiper-slide {
  max-width: 354px !important;
  width: 100% !important;
  transition: max-width .45s ease, width .45s ease;
}

.pixeltx-portfolio-index-main .pixeltx-portfolio-latest-slider .swiper-slide-prev {
  max-width: 354px !important;
}

.pixeltx-portfolio-index-main .pixeltx-portfolio-latest-slider .swiper-slide-active {
  max-width: 738px !important;
}

.pixeltx-portfolio-index-main .pixeltx-portfolio-latest-slider .swiper-slide .cardRecent .cardInfo {
  display: none !important;
}

.pixeltx-portfolio-index-main .pixeltx-portfolio-latest-slider .swiper-slide-active .cardRecent .cardInfo {
  display: block !important;
}

.pixeltx-portfolio-index-main .pixeltx-portfolio-latest-slider .swiper-slide .cardRecent .cardImage {
  height: 561px;
}

:is(.pixeltx-portfolio-index-main, .pixeltx-home-portfolio) .pixeltx-portfolio-project .cardRecent .cardImage,
.single-portfolio .pixeltx-other-projects .cardRecent .cardImage {
  height: clamp(420px, 39vw, 610px) !important;
  overflow: hidden;
}

:is(.pixeltx-portfolio-index-main, .pixeltx-home-portfolio) .pixeltx-portfolio-project .cardRecent .cardImage > a,
:is(.pixeltx-portfolio-index-main, .pixeltx-home-portfolio) .pixeltx-portfolio-project .cardRecent .cardImage .parallax-image-wrap,
:is(.pixeltx-portfolio-index-main, .pixeltx-home-portfolio) .pixeltx-portfolio-project .cardRecent .cardImage .parallax-image-inner,
.single-portfolio .pixeltx-other-projects .cardRecent .cardImage > a {
  display: block;
  width: 100%;
  height: 100%;
}

:is(.pixeltx-portfolio-index-main, .pixeltx-home-portfolio) .pixeltx-portfolio-project .cardRecent .cardImage img,
:is(.pixeltx-portfolio-index-main, .pixeltx-home-portfolio) .pixeltx-portfolio-project .cardRecent .cardImage .parallax-image,
.single-portfolio .pixeltx-other-projects .cardRecent .cardImage img {
  display: block;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  min-width: 0 !important;
  min-height: 0 !important;
  aspect-ratio: auto !important;
  object-fit: cover;
  object-position: center center;
}

.pixeltx-selected-projects .pixeltx-selected-project {
  height: clamp(320px, 38vw, 560px);
  overflow: hidden;
}

.pixeltx-selected-projects .pixeltx-selected-project--featured {
  height: clamp(420px, 52vw, 720px);
}

.pixeltx-selected-projects .pixeltx-selected-project > a,
.pixeltx-selected-projects .pixeltx-selected-project .parallax-image-wrap,
.pixeltx-selected-projects .pixeltx-selected-project .parallax-image-inner {
  display: block;
  width: 100%;
  height: 100%;
}

.pixeltx-selected-projects .pixeltx-selected-project img,
.pixeltx-selected-projects .pixeltx-selected-project .parallax-image {
  display: block;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: cover;
  object-position: center center;
}

@media (max-width: 991.98px) {
  .pixeltx-portfolio-index-main .pixeltx-portfolio-latest-slider .swiper-slide,
  .pixeltx-portfolio-index-main .pixeltx-portfolio-latest-slider .swiper-slide-active,
  .pixeltx-portfolio-index-main .pixeltx-portfolio-latest-slider .swiper-slide-prev {
    max-width: min(82vw, 354px) !important;
  }

  .pixeltx-portfolio-index-main .pixeltx-portfolio-latest-slider .swiper-slide .cardRecent .cardImage {
    height: min(118vw, 500px);
  }

  :is(.pixeltx-portfolio-index-main, .pixeltx-home-portfolio) .pixeltx-portfolio-project .cardRecent .cardImage,
  .single-portfolio .pixeltx-other-projects .cardRecent .cardImage,
  .pixeltx-selected-projects .pixeltx-selected-project,
  .pixeltx-selected-projects .pixeltx-selected-project--featured {
    height: clamp(340px, 72vw, 560px) !important;
  }
}

@media (max-width: 575.98px) {
  :is(.pixeltx-portfolio-index-main, .pixeltx-home-portfolio) .pixeltx-portfolio-project .cardRecent .cardImage,
  .single-portfolio .pixeltx-other-projects .cardRecent .cardImage,
  .pixeltx-selected-projects .pixeltx-selected-project,
  .pixeltx-selected-projects .pixeltx-selected-project--featured {
    height: clamp(300px, 86vw, 460px) !important;
  }
}


/* --------------------------------------------------------------------------
   PixelTX v1.8.7.39 — Portfolio 2 centred expanded slide
   The portfolio archive slider now owns its Swiper initialisation so the wide
   slide is physically centred in the viewport. Side slides may be cropped by
   the viewport, matching the original portfolio-2 behaviour.
   -------------------------------------------------------------------------- */
.pixeltx-portfolio-index-main .pixeltx-portfolio-latest .box-swiper,
.pixeltx-portfolio-index-main .pixeltx-portfolio-latest-slider {
  width: 100%;
}

.pixeltx-portfolio-index-main .pixeltx-portfolio-latest-slider .swiper-wrapper {
  align-items: flex-start;
}

.pixeltx-portfolio-index-main .pixeltx-portfolio-latest-slider .swiper-slide {
  width: 354px !important;
  max-width: 354px !important;
  flex: 0 0 354px !important;
  transition: width .45s ease, max-width .45s ease, flex-basis .45s ease;
}

.pixeltx-portfolio-index-main .pixeltx-portfolio-latest-slider .swiper-slide-active {
  width: 738px !important;
  max-width: 738px !important;
  flex-basis: 738px !important;
}

.pixeltx-portfolio-index-main .pixeltx-portfolio-latest-slider .swiper-slide-prev {
  width: 354px !important;
  max-width: 354px !important;
  flex-basis: 354px !important;
}

.pixeltx-portfolio-index-main .pixeltx-portfolio-latest-slider .swiper-slide-active .cardRecent,
.pixeltx-portfolio-index-main .pixeltx-portfolio-latest-slider .swiper-slide-active .cardRecent .cardImage {
  width: 100%;
}

@media (max-width: 991.98px) {
  .pixeltx-portfolio-index-main .pixeltx-portfolio-latest-slider .swiper-slide,
  .pixeltx-portfolio-index-main .pixeltx-portfolio-latest-slider .swiper-slide-active,
  .pixeltx-portfolio-index-main .pixeltx-portfolio-latest-slider .swiper-slide-prev {
    width: min(82vw, 354px) !important;
    max-width: min(82vw, 354px) !important;
    flex-basis: min(82vw, 354px) !important;
  }
}


/* --------------------------------------------------------------------------
   PixelTX v1.8.7.40 — Portfolio 2 carousel: original infinite layout
   Restores the source portfolio-2.html carousel disposition: five centred
   positions, two visible slides at each side, cropped fragments at the edges,
   no manual re-centering and no flicker while the expanded card changes.
   -------------------------------------------------------------------------- */
.pixeltx-portfolio-index-main .pixeltx-portfolio-latest-slider {
  overflow: visible;
}

.pixeltx-portfolio-index-main .pixeltx-portfolio-latest-slider .swiper-wrapper {
  align-items: flex-start;
}

.pixeltx-portfolio-index-main .pixeltx-portfolio-latest-slider .swiper-slide,
.pixeltx-portfolio-index-main .pixeltx-portfolio-latest-slider .swiper-slide-active {
  width: 100% !important;
  max-width: 354px !important;
  flex: 0 0 auto !important;
  flex-basis: auto !important;
  transition: max-width .45s ease;
}

.pixeltx-portfolio-index-main .pixeltx-portfolio-latest-slider .swiper-slide-prev {
  width: 100% !important;
  max-width: 738px !important;
  flex: 0 0 auto !important;
  flex-basis: auto !important;
}

.pixeltx-portfolio-index-main .pixeltx-portfolio-latest-slider .swiper-slide .cardRecent .cardInfo,
.pixeltx-portfolio-index-main .pixeltx-portfolio-latest-slider .swiper-slide-active .cardRecent .cardInfo {
  display: none !important;
}

.pixeltx-portfolio-index-main .pixeltx-portfolio-latest-slider .swiper-slide-prev .cardRecent .cardInfo {
  display: block !important;
}

.pixeltx-portfolio-index-main .pixeltx-portfolio-latest-slider .swiper-slide .cardRecent,
.pixeltx-portfolio-index-main .pixeltx-portfolio-latest-slider .swiper-slide .cardRecent .cardImage {
  width: 100%;
}

@media (max-width: 991.98px) {
  .pixeltx-portfolio-index-main .pixeltx-portfolio-latest-slider .swiper-slide,
  .pixeltx-portfolio-index-main .pixeltx-portfolio-latest-slider .swiper-slide-active,
  .pixeltx-portfolio-index-main .pixeltx-portfolio-latest-slider .swiper-slide-prev {
    width: min(82vw, 414px) !important;
    max-width: min(82vw, 414px) !important;
    flex: 0 0 auto !important;
    flex-basis: auto !important;
  }

  .pixeltx-portfolio-index-main .pixeltx-portfolio-latest-slider .swiper-slide .cardRecent .cardInfo,
  .pixeltx-portfolio-index-main .pixeltx-portfolio-latest-slider .swiper-slide-active .cardRecent .cardInfo,
  .pixeltx-portfolio-index-main .pixeltx-portfolio-latest-slider .swiper-slide-prev .cardRecent .cardInfo {
    display: block !important;
  }
}

@media (max-width: 600px) {
  .pixeltx-portfolio-index-main .pixeltx-portfolio-latest-slider .swiper-slide,
  .pixeltx-portfolio-index-main .pixeltx-portfolio-latest-slider .swiper-slide-active,
  .pixeltx-portfolio-index-main .pixeltx-portfolio-latest-slider .swiper-slide-prev {
    width: 100% !important;
    max-width: 100% !important;
  }
}


/* --------------------------------------------------------------------------
   PixelTX v1.8.7.41 — Portfolio 2 carousel visual offset
   Keeps the original infinite carousel and expansion timing from portfolio-2,
   but offsets the rendered track so the expanded previous slide sits in the
   centre of the viewport, leaving two side images and edge fragments visible.
   -------------------------------------------------------------------------- */
@media (min-width: 992px) {
  .pixeltx-portfolio-index-main .pixeltx-portfolio-latest-slider .swiper-wrapper {
    position: relative;
    left: 626px;
  }
}

@media (max-width: 991.98px) {
  .pixeltx-portfolio-index-main .pixeltx-portfolio-latest-slider .swiper-wrapper {
    left: 0;
  }
}


/* --------------------------------------------------------------------------
   PixelTX v1.8.7.42 — Portfolio 2 carousel optical centring
   Keeps the original portfolio-2 transitions and expansion intact. The only
   correction is the static optical offset needed for the enlarged previous
   slide to sit at the visual centre of the viewport, leaving two slides at
   each side and cropped fragments at the edges.
   -------------------------------------------------------------------------- */
@media (min-width: 1600px) {
  .pixeltx-portfolio-index-main .pixeltx-portfolio-latest-slider .swiper-wrapper {
    left: calc(30vw - 385px) !important;
  }
}

@media (min-width: 1100px) and (max-width: 1599.98px) {
  .pixeltx-portfolio-index-main .pixeltx-portfolio-latest-slider .swiper-wrapper {
    left: calc(37.5vw - 379px) !important;
  }
}

@media (min-width: 992px) and (max-width: 1099.98px) {
  .pixeltx-portfolio-index-main .pixeltx-portfolio-latest-slider .swiper-wrapper {
    left: 30px !important;
  }
}

@media (max-width: 991.98px) {
  .pixeltx-portfolio-index-main .pixeltx-portfolio-latest-slider .swiper-wrapper {
    left: 0 !important;
  }
}


/* --------------------------------------------------------------------------
   PixelTX v1.8.7.43 — Portfolio first-load image geometry and carousel offset
   Portfolio cards must render identically on first page load and after AJAX
   filtering. The archive card images keep a fixed crop frame and are not
   affected by the template parallax wrappers that could change their natural
   height before images finish loading. The top portfolio-2 carousel keeps the
   original infinite transition/expansion; only its optical offset is corrected
   so the enlarged slide sits centred like portfolio-2.html.
   -------------------------------------------------------------------------- */
:is(.pixeltx-portfolio-index-main, .pixeltx-home-portfolio) .pixeltx-portfolio-project .cardRecent > .parallax-item-wrap,
:is(.pixeltx-portfolio-index-main, .pixeltx-home-portfolio) .pixeltx-portfolio-project .cardRecent .cardImage .scoll-reduce-border-wraper,
:is(.pixeltx-portfolio-index-main, .pixeltx-home-portfolio) .pixeltx-portfolio-project .cardRecent .cardImage .parallax-image-wrap,
:is(.pixeltx-portfolio-index-main, .pixeltx-home-portfolio) .pixeltx-portfolio-project .cardRecent .cardImage .parallax-image-inner {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
}

:is(.pixeltx-portfolio-index-main, .pixeltx-home-portfolio) .pixeltx-portfolio-project .cardRecent > .parallax-item-wrap > .cardImage {
  width: 100% !important;
  height: clamp(420px, 39vw, 610px) !important;
}

:is(.pixeltx-portfolio-index-main, .pixeltx-home-portfolio) .pixeltx-portfolio-project .cardRecent .cardImage {
  display: block !important;
  width: 100% !important;
  overflow: hidden !important;
}

:is(.pixeltx-portfolio-index-main, .pixeltx-home-portfolio) .pixeltx-portfolio-project .cardRecent .cardImage img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
  max-width: none !important;
  min-width: 0 !important;
  min-height: 0 !important;
}

@media (min-width: 1600px) {
  .pixeltx-portfolio-index-main .pixeltx-portfolio-latest-slider .swiper-wrapper {
    left: calc(-50vw + 283px) !important;
  }
}

@media (min-width: 1100px) and (max-width: 1599.98px) {
  .pixeltx-portfolio-index-main .pixeltx-portfolio-latest-slider .swiper-wrapper {
    left: calc(-50vw + 283px) !important;
  }
}

@media (min-width: 992px) and (max-width: 1099.98px) {
  .pixeltx-portfolio-index-main .pixeltx-portfolio-latest-slider .swiper-wrapper {
    left: -260px !important;
  }
}

@media (max-width: 991.98px) {
  :is(.pixeltx-portfolio-index-main, .pixeltx-home-portfolio) .pixeltx-portfolio-project .cardRecent > .parallax-item-wrap > .cardImage {
    height: clamp(340px, 72vw, 560px) !important;
  }

  .pixeltx-portfolio-index-main .pixeltx-portfolio-latest-slider .swiper-wrapper {
    left: 0 !important;
  }
}

@media (max-width: 575.98px) {
  :is(.pixeltx-portfolio-index-main, .pixeltx-home-portfolio) .pixeltx-portfolio-project .cardRecent > .parallax-item-wrap > .cardImage {
    height: clamp(300px, 86vw, 460px) !important;
  }
}


/* --------------------------------------------------------------------------
   PixelTX v1.8.7.44 — Responsive/editorial refinements
   -------------------------------------------------------------------------- */

/* Rich editor content in Portfolio/Service must keep Gutenberg headings,
   paragraphs and lists. JS text-opacity no longer rewrites these blocks. */
.pixeltx-rich-editor-content,
.pixeltx-portfolio-description,
.pixeltx-service-editor-content {
  white-space: normal !important;
}

.pixeltx-rich-editor-content :is(p, ul, ol, blockquote, figure),
.pixeltx-portfolio-description :is(p, ul, ol, blockquote, figure),
.pixeltx-service-editor-content :is(p, ul, ol, blockquote, figure) {
  margin-bottom: 1.05em;
}

.pixeltx-rich-editor-content :is(h1, h2, h3, h4, h5, h6),
.pixeltx-portfolio-description :is(h1, h2, h3, h4, h5, h6),
.pixeltx-service-editor-content :is(h1, h2, h3, h4, h5, h6) {
  color: var(--pixeltx-ink);
  font-family: var(--pixeltx-font-heading) !important;
  font-weight: 700;
  line-height: 1.1;
  margin: 1.25em 0 .55em;
}

.pixeltx-rich-editor-content :is(ul, ol),
.pixeltx-portfolio-description :is(ul, ol),
.pixeltx-service-editor-content :is(ul, ol) {
  padding-left: 1.35em;
}

/* Header/menu typography. */
.header .main-header .header-account .menu-mobile .font-lg {
  font-weight: 700 !important;
}

@media (min-width: 1200px) {
  .header .nav-main-menu > .main-menu > li > a,
  .header .nav-main-menu > ul.main-menu > li > a,
  .header .main-menu > li > a {
    font-size: 1.2em !important;
    line-height: 1.15;
  }
}

/* Responsive home hero headline: closer to full viewport width without
   changing the desktop composition or animations. */
@media (max-width: 767.98px) {
  .home .pixeltx-home-hero .banner-left {
    width: 100% !important;
  }

  .home .pixeltx-home-hero .banner-left h2.display-3,
  .home .pixeltx-home-hero .banner-left h3.display-3 {
    font-size: clamp(54px, 17.6vw, 86px) !important;
    line-height: .95 !important;
    letter-spacing: -0.045em;
  }

  .home .pixeltx-home-hero .banner-left .text-fill-wrap {
    justify-content: flex-start;
    margin-left: 0;
    width: 100%;
  }

  .home .pixeltx-home-hero .banner-left .text-fill-wrap .ml-15 {
    margin-left: .16em !important;
  }
}

@media (max-width: 390px) {
  .home .pixeltx-home-hero .banner-left h2.display-3,
  .home .pixeltx-home-hero .banner-left h3.display-3 {
    font-size: clamp(48px, 16.8vw, 66px) !important;
  }
}

/* Mobile: avoid jumpy GSAP parallax by letting images render naturally. */
@media (max-width: 767.98px) {
  .parallax-image,
  .parallax-item {
    will-change: auto;
  }

  .parallax-image-wrap,
  .parallax-image-inner,
  .parallax-item-wrap {
    transform: none !important;
  }
}

/* Home mobile spacing. */
@media (max-width: 991.98px) {
  .home .pixeltx-home-process .box-why-us {
    padding-top: 42px;
  }

  .home .pixeltx-home-process .box-why-us-top .col-lg-7,
  .home .pixeltx-home-process .box-why-us-top .text-end {
    text-align: left !important;
  }

  .home .pixeltx-home-process .box-why-us-top .col-lg-7 {
    margin-top: 32px;
  }

  .home .pixeltx-home-selected .box-projects {
    padding-top: 72px !important;
  }

  .home .box-faqs .accordion {
    padding-top: 42px !important;
  }

  .home .box-faqs .col-lg-3 {
    margin-bottom: 42px;
  }

  .home .box-faqs .mt-40 {
    margin-bottom: 36px !important;
  }

  .home .bg-take-look .box-info-look {
    display: none !important;
  }

  .home .box-blogs {
    padding-top: 92px !important;
  }
}

/* Footer: reduce the empty central gap between the left message/logo and the
   “We Make Creativity Tangible” mark by removing the spacer column on desktop. */
@media (min-width: 992px) {
  .pixeltx-footer-beuve .box-footer-top .row > .col-lg-4:nth-child(2) {
    display: none !important;
  }

  .pixeltx-footer-beuve .box-footer-top .row > .col-lg-4:first-child,
  .pixeltx-footer-beuve .box-footer-top .row > .col-lg-4:last-child {
    flex: 0 0 50%;
    max-width: 50%;
  }

  .pixeltx-footer-beuve .logo-bang {
    margin-left: auto;
  }
}

@media (max-width: 991.98px) {
  .pixeltx-footer-beuve .box-footer-top .row > .col-lg-4.mt-60 {
    margin-top: 32px !important;
  }
}

/* Services archive: give the first title more breathing room below the sticky
   header in both desktop and responsive layouts. */
.pixeltx-services-summary .pixeltx-services-summary-hero .box-service-section-1 {
  padding-top: clamp(120px, 10vw, 180px);
}

@media (max-width: 991.98px) {
  .pixeltx-services-summary .pixeltx-services-summary-hero .box-service-section-1 {
    padding-top: 150px !important;
  }
}

/* Single Portfolio responsive gallery: turn the horizontal rail into a real
   swipeable carousel on mobile instead of a tall stacked strip. */
@media (max-width: 767.98px) {
  .single-portfolio .pixeltx-portfolio-detail-3 .section-banner-portfolio-detail-3 {
    height: 100svh !important;
    min-height: 100svh !important;
    overflow: hidden;
  }

  .single-portfolio .pixeltx-portfolio-detail-3 .section-banner-portfolio-detail-3 .banner-general-2 {
    height: 100% !important;
    min-height: 100% !important;
  }

  .single-portfolio .pixeltx-portfolio-detail-3 .section-banner-portfolio-detail-3 .image-mark {
    display: none !important;
  }

  .single-portfolio .pixeltx-portfolio-detail-3 .horizontal-wrap {
    height: auto !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }

  .single-portfolio .pixeltx-portfolio-detail-3 .horizontal-wrap::-webkit-scrollbar {
    display: none;
  }

  .single-portfolio .pixeltx-portfolio-detail-3 .horizontal-rail {
    align-items: stretch !important;
    display: flex !important;
    gap: 18px !important;
    height: auto !important;
    padding: 0 20px;
    transform: none !important;
    width: max-content !important;
  }

  .single-portfolio .pixeltx-portfolio-detail-3 .horizontal-item {
    flex: 0 0 min(86vw, 520px) !important;
    height: min(68vh, 560px) !important;
    margin-bottom: 0 !important;
    scroll-snap-align: center;
    width: min(86vw, 520px) !important;
  }

  .single-portfolio .pixeltx-portfolio-detail-3 .horizontal-item img {
    height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
    width: 100% !important;
  }
}


/* --------------------------------------------------------------------------
   PixelTX v1.8.7.45 — Mobile home hero headline containment
   Keep the complete desktop composition. On phones, decorative rotating
   marks are hidden so they cannot become stranded on a wrapped line, while
   the headline is reduced slightly to remain inside the viewport.
   -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
  .home .pixeltx-home-hero .banner-left > .scroll-zoom-out:nth-child(1) h2 > img,
  .home .pixeltx-home-hero .banner-left > .scroll-zoom-out:nth-child(2) h3 > img {
    display: none !important;
  }

  .home .pixeltx-home-hero .banner-left h2.display-3,
  .home .pixeltx-home-hero .banner-left h3.display-3 {
    font-size: clamp(50px, 16.5vw, 80px) !important;
    max-width: 100%;
    overflow-wrap: normal;
  }

  .home .pixeltx-home-hero .banner-left > .scroll-zoom-out:nth-child(2) h3 {
    white-space: nowrap;
  }
}

@media (max-width: 390px) {
  .home .pixeltx-home-hero .banner-left h2.display-3,
  .home .pixeltx-home-hero .banner-left h3.display-3 {
    font-size: clamp(46px, 15.8vw, 62px) !important;
  }
}

/* --------------------------------------------------------------------------
   PixelTX v1.8.7.46 — Homepage FAQ responsive layout
   Keep a single image in the right-hand gallery on tablets and mobiles,
   restore comfortable spacing around the translated heading and prevent the
   gallery/parallax layers from overlapping the final accordion item.
   -------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
  .home .box-faqs .pixeltx-faq-title {
    margin-bottom: 48px !important;
    padding-bottom: 0;
  }

  .home .box-faqs .accordion {
    position: relative;
    z-index: 2;
    width: 100%;
    padding: 42px 0 0 !important;
    margin-bottom: 0;
  }

  .home .box-faqs .accordion-item:last-child {
    margin-bottom: 0;
  }

  .home .box-faqs .box-images-faq {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    margin-top: 42px;
    overflow: hidden;
  }

  .home .box-faqs .box-images-faq .img-main {
    display: block;
    width: 100%;
    height: auto;
    transform: none !important;
  }

  .home .box-faqs .box-images-faq .img-sub {
    display: none !important;
  }

  .home .box-faqs .row > .col-lg-6,
  .home .box-faqs .row > .col-lg-3:last-child {
    position: relative;
    clear: both;
  }

  .home .box-faqs .row > .col-lg-3:last-child {
    margin-bottom: 0;
  }
}

@media (max-width: 575.98px) {
  .home .box-faqs .pixeltx-faq-title {
    margin-bottom: 40px !important;
  }

  .home .box-faqs .accordion {
    padding-top: 36px !important;
  }

  .home .box-faqs .box-images-faq {
    margin-top: 36px;
  }
}

/* --------------------------------------------------------------------------
   PixelTX v1.8.7.47 — Portfolio carousel centred expansion + 2 s autoplay
   The active project is the true centred Swiper slide. Its image expands
   symmetrically around that centre without changing track geometry, so every
   project occupies the same visual position throughout the infinite loop.
   -------------------------------------------------------------------------- */
@media (min-width: 992px) {
  .pixeltx-portfolio-index-main .pixeltx-portfolio-latest-slider .swiper-wrapper {
    left: 0 !important;
  }

  .pixeltx-portfolio-index-main .pixeltx-portfolio-latest-slider .swiper-slide,
  .pixeltx-portfolio-index-main .pixeltx-portfolio-latest-slider .swiper-slide-prev,
  .pixeltx-portfolio-index-main .pixeltx-portfolio-latest-slider .swiper-slide-active {
    width: 354px !important;
    max-width: 354px !important;
    flex: 0 0 354px !important;
    overflow: visible;
    z-index: 1;
  }

  .pixeltx-portfolio-index-main .pixeltx-portfolio-latest-slider .swiper-slide-active {
    z-index: 5;
  }

  .pixeltx-portfolio-index-main .pixeltx-portfolio-latest-slider .swiper-slide .cardRecent {
    width: 354px !important;
    overflow: visible;
  }

  .pixeltx-portfolio-index-main .pixeltx-portfolio-latest-slider .swiper-slide .cardRecent .cardImage {
    width: 354px !important;
    margin-left: 0;
    transition: width .7s cubic-bezier(.22, 1, .36, 1), margin-left .7s cubic-bezier(.22, 1, .36, 1);
  }

  .pixeltx-portfolio-index-main .pixeltx-portfolio-latest-slider .swiper-slide-active .cardRecent .cardImage {
    width: 738px !important;
    margin-left: -192px;
  }

  .pixeltx-portfolio-index-main .pixeltx-portfolio-latest-slider .swiper-slide .cardRecent .cardInfo,
  .pixeltx-portfolio-index-main .pixeltx-portfolio-latest-slider .swiper-slide-prev .cardRecent .cardInfo {
    display: none !important;
  }

  .pixeltx-portfolio-index-main .pixeltx-portfolio-latest-slider .swiper-slide-active .cardRecent .cardInfo {
    display: block !important;
    width: 738px;
    margin-left: -192px;
  }
}

/* --------------------------------------------------------------------------
   PixelTX v1.8.7.48 — Portfolio neighbours clear the enlarged centre slide
   The active image grows 192 px beyond its base slide on each side. Move the
   adjacent projects by the same amount so they remain visibly beside it,
   rather than being covered by the enlarged image.
   -------------------------------------------------------------------------- */
@media (min-width: 992px) {
  .pixeltx-portfolio-index-main .pixeltx-portfolio-latest-slider .swiper-slide {
    transition: transform .7s cubic-bezier(.22, 1, .36, 1);
    will-change: transform;
  }

  .pixeltx-portfolio-index-main .pixeltx-portfolio-latest-slider .swiper-slide-prev {
    transform: translate3d(-192px, 0, 0) !important;
    z-index: 2;
  }

  .pixeltx-portfolio-index-main .pixeltx-portfolio-latest-slider .swiper-slide-next {
    transform: translate3d(192px, 0, 0) !important;
    z-index: 2;
  }

  .pixeltx-portfolio-index-main .pixeltx-portfolio-latest-slider .swiper-slide-active {
    transform: translate3d(0, 0, 0) !important;
    z-index: 5;
  }
}

/* More breathing room between the FAQ heading and its responsive image. */
@media (max-width: 991.98px) {
  .home .box-faqs .pixeltx-faq-title {
    margin-bottom: 72px !important;
  }
}

@media (max-width: 575.98px) {
  .home .box-faqs .pixeltx-faq-title {
    margin-bottom: 60px !important;
  }
}


/* --------------------------------------------------------------------------
   PixelTX v1.8.7.49 — Open the complete visible portfolio row
   Every slide before the active project moves left and every slide after it
   moves right. This includes the second outer cards, preventing the adjacent
   displaced cards from overlapping them while the centre image is enlarged.
   -------------------------------------------------------------------------- */
@media (min-width: 992px) {
  .pixeltx-portfolio-index-main .pixeltx-portfolio-latest-slider .swiper-slide.pixeltx-slide-left {
    transform: translate3d(-192px, 0, 0) !important;
  }

  .pixeltx-portfolio-index-main .pixeltx-portfolio-latest-slider .swiper-slide.pixeltx-slide-right {
    transform: translate3d(192px, 0, 0) !important;
  }

  .pixeltx-portfolio-index-main .pixeltx-portfolio-latest-slider .swiper-slide-active {
    transform: translate3d(0, 0, 0) !important;
  }
}