/* the original template's email icon asset for the footer render oddly
   (near-invisible) — use a reliable Font Awesome icon instead, colored to
   match context (white on the dark footer, black on the white mobile menu) */
.footer1 .contact-box .footer-icon-svg {
  color: #ffffff;
  font-size: 14px;
}
.mobile-sidebar .contact-box .footer-icon-svg {
  color: #111111;
  font-size: 14px;
}
/* the icon circle shrinks to 14px (fits the <i> glyph) instead of the
   30px every other icon circle uses — force consistent size + centering
   for every contact icon in this section, image or font icon alike */
.footer1 .single-footer-items .contact-box .icon,
.mobile-sidebar .single-footer-items .contact-box .icon {
  width: 30px !important;
  height: 30px !important;
  flex-shrink: 0;
  display: flex !important;
  align-items: center;
  justify-content: center;
}
.footer1 .single-footer-items .contact-box .icon img,
.mobile-sidebar .single-footer-items .contact-box .icon img {
  max-width: 16px;
  max-height: 16px;
}

/* the footer address is plain text (no <a>), so it never got the white
   link color or left spacing the phone/email links get. Fix: give the
   spacing to a wrapping <span> only (not the .pera div itself) — the
   phone/email <a> already carries its own 16px margin-left, so adding
   the same margin to .pera as well double-stacked it 16px further right
   than phone/email, which is exactly the misalignment being reported. */
.footer1 .single-footer-items .contact-box .pera-text {
  display: inline-block;
  color: var(--vtc-text-pera-text-2);
  margin-left: 16px;
}
.mobile-sidebar .single-footer-items .contact-box .pera-text {
  display: inline-block;
  margin-left: 16px;
}

/* AOS scroll-reveal animations sometimes never fire (stuck at their
   pre-animation state: invisible and translated up to 100px off-position),
   likely thrown off by the background videos changing section heights
   after AOS calculates its scroll trigger points at load. That leaves
   content invisible and — since the translate offset still counts toward
   layout bounds — causes horizontal overflow/scroll on mobile. Force every
   [data-aos] element to its final, visible, correctly-positioned state. */
[data-aos] {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}

/* same problem, different library: the letter-by-letter heading
   "typing" animation (text-anime-style-3, GSAP SplitText) also gets
   stuck mid-animation on some headings — force every split character
   to its resting position so nothing sits invisible/offset */
.text-anime-style-3,
.text-anime-style-3 .split-line,
.text-anime-style-3 .split-line > div,
.text-anime-style-3 .split-line > div > div {
  opacity: 1 !important;
  transform: none !important;
}

/* contact box links (phone/email/address) are styled at a big 24px bold
   with no wrap guard — the email has no spaces to break on, so it
   overflows the viewport on mobile instead of wrapping */
.contact1 .contact1-box .heading a {
  overflow-wrap: break-word;
  word-break: break-word;
}
@media (max-width: 767px) {
  .contact1 .contact1-box .heading a {
    font-size: 18px !important;
    line-height: 24px !important;
    padding-top: 8px !important;
  }
  .contact1 .contact1-box .heading p {
    font-size: 14px !important;
  }
  .contact1 .contact1-box {
    padding: 16px 20px !important;
  }
  .contact1 .contact1-box .icon {
    height: 50px !important;
    width: 50px !important;
    line-height: 60px !important;
    margin-right: 14px !important;
  }
  .contact1 .contact1-box .icon img {
    max-width: 22px;
  }
  .contact1-form h3 {
    font-size: 22px !important;
  }
  .contact1 h2 {
    font-size: 28px !important;
    line-height: 36px !important;
  }
}

/* Terceiriza Services brand palette: preto + dourado */
:root {
  --vtc-bg-main-bg-1: #D4AF37 !important;
  --vtc-text-heading-text-1: #111111 !important;
}

.theme-btn1::before {
  background-color: #E8C868;
}

.heading1 span.span,
.heading1-w span.span,
.heading2 span.span,
.heading3 span.span,
.heading3-w span.span,
.heading4 span.span,
.heading4-w span.span,
.heading5 span.span,
.heading6 span.span,
.heading6-w span.span {
  background-color: rgba(212, 175, 55, 0.16) !important;
}

/* hero photo now a single real branded photo, not the template's
   transparent-cutout collage — reset the absolute positioning built
   for that composition */
.hero-area1 .hero1-images {
  height: auto;
  margin-right: 0;
  margin-top: 0;
  text-align: center;
}
.hero-area1 .hero1-images .image2 {
  position: static;
  border-radius: 16px;
  overflow: hidden;
  display: inline-block;
  max-width: 480px;
}
@media (min-width: 992px) {
  .hero-area1 .hero1-images-col {
    align-self: flex-end;
  }
  .hero-area1 .main-heading h1 {
    font-size: 48px !important;
    line-height: 56px !important;
  }
}
.hero-area1 .hero1-images .image2 img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 16px;
}

/* service card photos: square-ish box; some source photos are wide
   banners (3:1), so object-fit:cover would crop away most of the scene —
   use contain with a dark fill so the whole photo stays visible */
.service1-box .image {
  height: 280px;
  overflow: hidden;
  background-color: #0a0a0a;
  display: flex;
  align-items: center;
  justify-content: center;
}
.service1-box .image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.footer-logo img,
.site-logo img,
.mobile-logo img,
.logo-m img {
  background: transparent;
}

/* logo file is a wide 3:1 image with no intrinsic size limit set by the
   template — constrain it consistently everywhere it appears */
.site-logo img {
  height: 44px;
  width: auto;
  max-width: none;
}
.mobile-logo img {
  height: 30px;
  width: auto;
}
.logo-m img {
  height: 34px;
  width: auto;
}
.footer-logo img {
  height: 48px;
  width: auto;
}

/* reusable dark-section background video (CTA, footer) */
.bg-video-section {
  position: relative;
  overflow: hidden;
}
.bg-video-section .bg-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.bg-video-section .bg-video-overlay {
  position: absolute;
  inset: 0;
  background: rgba(10, 10, 10, 0.82);
  z-index: 1;
}
.bg-video-section > .container {
  position: relative;
  z-index: 2;
}
.bg-video-section .copyright-area {
  position: relative;
  z-index: 2;
}

/* hero background video with white overlay */
.hero-area1 {
  position: relative;
  overflow: hidden;
}
.hero-video-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.hero-video-overlay {
  position: absolute;
  inset: 0;
  background: rgba(10, 10, 10, 0.78);
  z-index: 1;
}
.hero-area1 > .container {
  position: relative;
  z-index: 2;
}
.hero-area1 {
  background-color: #111111;
}
.hero-area1 .main-heading h1 {
  color: #ffffff;
}
.hero-area1 .main-heading p {
  color: rgba(255, 255, 255, 0.82);
}
.hero-area1 .theme-btn2 {
  color: #ffffff;
  border-color: #ffffff;
}

/* header floats transparent over the hero (pulled up behind it with a
   negative margin) until scroll adds .sticky with a white background */
header {
  position: relative;
  z-index: 20;
}
.header-area.header-area1 {
  border-bottom: none !important;
}
.header-area.header-area1:not(.sticky) {
  position: relative;
}
.header-area.header-area1:not(.sticky) .main-menu-ex ul li a {
  color: #ffffff !important;
}
.header-area.header-area1:not(.sticky) .main-menu-ex ul li a:hover {
  color: #D4AF37 !important;
}
.header-area.header-area1.sticky {
  background-color: #ffffff !important;
}
.header-area.header-area1.sticky .main-menu-ex ul li a {
  color: #111111 !important;
}
.header-area.header-area1.sticky .main-menu-ex ul li a:hover {
  color: #D4AF37 !important;
}

@media (min-width: 992px) {
  .hero-area1 {
    margin-top: -78px;
    padding-top: 76px;
  }
}

/* subtle animated gold shimmer line under the header */
.header-area.header-area1::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, #D4AF37, #F5E1A4, #D4AF37, transparent);
  background-size: 200% 100%;
  animation: gold-shimmer 4s linear infinite;
  pointer-events: none;
}
@keyframes gold-shimmer {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

/* the template's mobile top bar is hardcoded background:#fff with no
   scroll/JS toggle (unlike the desktop header) — used to blend with the
   old white hero, now needs to match the black brand */
.mobile-header.mobile-header-main {
  background: #111111 !important;
}
.mobile-nav-icon {
  color: #ffffff !important;
}

/* fix template gap: mobile-menu.css only hides the sidebar below 769px,
   but the mobile header shows up to 991px (bootstrap lg), leaking the
   drawer menu open in-flow between 769-991px */
@media (max-width: 991.98px) {
  .mobile-sidebar {
    position: fixed !important;
    top: 0 !important;
    left: -100% !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 100% !important;
    width: 100% !important;
    z-index: 9999 !important;
    transition: all 0.3s;
  }
  .mobile-sidebar.mobile-menu-active {
    left: 0 !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
}