/* TechInnovex additions on top of the Axtra template. Loaded after style.css. */

/* Text wordmark in place of the template's image logos */
.tx-logo {
  font-family: "Kanit", sans-serif;
  font-weight: 600;
  font-size: 34px;
  line-height: 1;
  letter-spacing: -0.5px;
  color: #fff;
  text-decoration: none;
}
.tx-logo b { color: var(--primary); font-weight: 600; }
.offcanvas__logo .tx-logo, .footer__logo.tx-logo { font-size: 38px; }
.footer__logo.tx-logo { display: block; margin-bottom: 30px; }
.hero__content a { padding-right: 35px; }

/* The template's "Pro" badge on the hero heading is not part of this brand */
.hero__title::after { content: none; }

/* Long hero headings: keep them inside the hero */
.hero__title.tx-long { font-size: 96px; line-height: 1; }
@media (max-width: 1399px) { .hero__title.tx-long { font-size: 76px; } }
@media (max-width: 991px)  { .hero__title.tx-long { font-size: 56px; } }
@media (max-width: 767px)  { .hero__title.tx-long { font-size: 44px; } }
@media (max-width: 575px)  { .hero__title.tx-long { font-size: 34px; } }
.tx-long-wrap { margin-bottom: 60px; }
.tx-long-wrap .hero__sub-title { position: static; max-width: 560px; padding-top: 28px; font-size: 18px; }

/* Inner-page hero titles are a notch smaller than the home hero */
.hero__area.tx-inner .hero__title.tx-long { font-size: 80px; }
@media (max-width: 1399px) { .hero__area.tx-inner .hero__title.tx-long { font-size: 64px; } }
@media (max-width: 991px)  { .hero__area.tx-inner .hero__title.tx-long { font-size: 50px; } }
@media (max-width: 767px)  { .hero__area.tx-inner .hero__title.tx-long { font-size: 40px; } }
@media (max-width: 575px)  { .hero__area.tx-inner .hero__title.tx-long { font-size: 32px; } }

/* Inner-page hero: no big counter block / arrow, a bit shorter */
.hero__area.tx-inner .hero__content { padding-bottom: 60px; }
.hero__area.tx-inner .hero__title-wrapper { margin-bottom: 40px; max-width: 1100px; }
.hero__area.tx-inner .hero__sub-title { position: static; max-width: 620px; padding-top: 25px; font-size: 20px; }
.hero__area.tx-inner .btn_wrapper { margin-top: 35px; }

/* Industries: text tiles in the template's logo grid */
.brand__item.tx-tile {
  display: flex; align-items: center; justify-content: center;
  min-height: 130px; padding: 25px 15px;
}
.brand__item.tx-tile span {
  font-weight: 500; font-size: 19px; line-height: 1.3; color: var(--black-2);
}
.dark .brand__item.tx-tile span { color: #fff; }

/* Benefit cards: the same bordered grid, with a heading and text per cell */
.brand__list.tx-cards { grid-template-columns: repeat(3, 1fr); }
.brand__item.tx-card { text-align: left; padding: 45px 40px; }
.brand__item.tx-card h4 { font-weight: 500; font-size: 24px; line-height: 1.25; color: var(--black-2); margin-bottom: 15px; }
.brand__item.tx-card p { font-size: 17px; line-height: 1.55; color: var(--black-3); margin: 0; }
.dark .brand__item.tx-card h4 { color: #fff; }
.sec-title-wrapper .tx-intro { max-width: 760px; font-size: 18px; line-height: 1.5; padding-top: 20px; }
@media (max-width: 991px) { .brand__list.tx-cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 575px) { .brand__list.tx-cards { grid-template-columns: 1fr; } .brand__item.tx-card { padding: 30px 20px; } }

/* Testimonial pop-up shows the quote instead of a video */
.modal__testimonial-content.tx-quote {
  display: flex; flex-direction: column; justify-content: center;
  height: auto; min-height: 260px; padding: 50px 45px;
}
.modal__testimonial-content.tx-quote p {
  font-size: 22px; line-height: 1.5; font-weight: 400; color: var(--black-2); margin-bottom: 25px;
}
.modal__testimonial-content.tx-quote h4 { font-size: 18px; font-weight: 500; color: var(--black-2); margin: 0; }
.modal__testimonial-content.tx-quote h4 span { color: var(--black-3); font-weight: 400; }
@media (max-width: 767px) {
  .modal__testimonial-content.tx-quote { width: 92%; padding: 40px 25px; }
  .modal__testimonial-content.tx-quote p { font-size: 18px; }
}

/* Plain text blocks on inner pages (mission, vision, privacy) */
.tx-text h3 { font-weight: 500; font-size: 32px; line-height: 1.2; color: var(--black-2); margin-bottom: 20px; }
.tx-text p, .tx-text li { font-size: 18px; line-height: 1.6; color: var(--black-3); margin-bottom: 18px; }
.tx-text ul { padding-left: 20px; list-style: disc; }
.tx-text a { text-decoration: underline; }

/* Contact page */
.tx-contact .contact__info h3 { padding-bottom: 25px; }
.tx-contact .contact__form form > div { margin-bottom: 10px; }
.tx-contact .contact__form textarea { min-height: 150px; resize: vertical; }
.tx-contact .contact__form .btn_wrapper { margin-top: 30px; }

/* Services hub / list pages without the hover image column */
.service__list.tx-wide .service__item { cursor: pointer; }

/* Benefit cards reuse the workflow slider; label them without "step" wording */
.workflow__slide p { max-width: 260px; }

/* Footer: keep the contact panel tidy without opening hours */
.footer__widget-4.tx-nohours { padding-bottom: 60px; }

/* Hero call-to-action link (inner pages) */
.hero__content a.tx-hero-cta { color: var(--primary); border-bottom-color: var(--primary); margin-top: 30px; }
.hero__content a.tx-hero-cta span i { color: var(--primary); }

/* Desktop sidebar header is only ~62-100px wide: use a compact monogram there, full wordmark elsewhere */
.tx-logo.tx-mono { font-size: 32px; letter-spacing: 0; }
@media (min-width: 1200px) { .header__support { position: relative; top: -35px; } }

/* Desktop sidebar: full wordmark, written vertically (bottom to top) like the phone number */
.logo-primary.tx-vert { writing-mode: vertical-rl; transform: rotate(180deg); font-size: 28px; white-space: nowrap; }

/* ---- Process: vertical steps (replaces the sideways slider) ---- */
.tx-steps { position: relative; max-width: 820px; margin: 70px auto 0; }
.tx-step { position: relative; padding: 0 0 56px 90px; min-height: 90px; }
.tx-step:last-child { padding-bottom: 0; }
.tx-step::before { content: ""; position: absolute; left: 8px; top: 22px; bottom: -6px; width: 1px; background: var(--black-2); }
.tx-step:last-child::before { display: none; }
.tx-step::after {
  content: ""; position: absolute; left: 0; top: 8px; width: 18px; height: 18px; border-radius: 100%;
  background-color: var(--primary); border: 3px solid var(--white);
  -webkit-animation: wcBubble 1.5s 1s infinite; animation: wcBubble 1.5s 1s infinite;
}
.tx-step .tx-step-no {
  position: absolute; right: 0; top: -8px; font-size: 85px; line-height: 1; font-weight: 500;
  color: var(--gray-4); pointer-events: none; user-select: none;
}
.tx-step .workflow__step { padding-bottom: 10px; font-size: 16px; color: var(--black-3); }
.tx-step .workflow__title { position: relative; z-index: 1; }
.tx-step p { position: relative; z-index: 1; max-width: 560px; margin: 0; font-size: 17px; line-height: 1.55; color: var(--black-3); }
@media (max-width: 767px) {
  .tx-steps { margin-top: 45px; }
  .tx-step { padding-left: 52px; padding-bottom: 40px; }
  .tx-step .tx-step-no { font-size: 52px; top: -2px; }
  .tx-step .workflow__title { font-size: 22px; max-width: 75%; }
}

/* ---- Benefit cards: sweep on hover (desktop), continuous sweep (touch / mobile) ---- */
.brand__item.tx-card { position: relative; overflow: hidden; isolation: isolate; }
.brand__item.tx-card::before {
  content: ""; position: absolute; inset: 0; z-index: -1; background: var(--primary);
  transform: scaleY(0); transform-origin: bottom; transition: transform .55s cubic-bezier(.65, 0, .35, 1);
}
.tx-card .tx-num {
  display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; margin-bottom: 26px;
  border: 1px solid var(--gray); border-radius: 100%; font-size: 15px; font-weight: 500; color: var(--black-3);
  transition: background-color .4s, color .4s, border-color .4s, transform .4s;
}
.tx-card h4, .tx-card p { transition: transform .5s, color .4s; }
@media (hover: hover) and (pointer: fine) {
  .brand__item.tx-card:hover::before { transform: scaleY(1); }
  .brand__item.tx-card:hover .tx-num { background: var(--black-2); border-color: var(--black-2); color: var(--primary); transform: scale(1.12); }
  .brand__item.tx-card:hover h4 { transform: translateX(8px); }
  .brand__item.tx-card:hover p { color: var(--black-2); transform: translateX(8px); }
}
@media (hover: none), (max-width: 767px) {
  .brand__item.tx-card::before { animation: txSweep 18s infinite ease-in-out; animation-delay: calc((var(--i, 1) - 1) * 3s); }
  .brand__item.tx-card .tx-num { animation: txNum 18s infinite ease-in-out; animation-delay: calc((var(--i, 1) - 1) * 3s); }
  .brand__item.tx-card p { animation: txText 18s infinite ease-in-out; animation-delay: calc((var(--i, 1) - 1) * 3s); }
}
@keyframes txSweep {
  0% { transform: scaleY(0); opacity: 1; }
  5%, 15% { transform: scaleY(1); opacity: 1; }
  20% { transform: scaleY(1); opacity: 0; }
  21%, 100% { transform: scaleY(0); opacity: 1; }
}
@keyframes txNum {
  0%, 100% { background-color: transparent; border-color: var(--gray); color: var(--black-3); }
  5%, 15% { background-color: var(--black-2); border-color: var(--black-2); color: var(--primary); }
  20% { background-color: transparent; border-color: var(--gray); color: var(--black-3); }
}
@keyframes txText { 0%, 100% { color: var(--black-3); } 5%, 15% { color: var(--black-2); } 20% { color: var(--black-3); } }
@media (prefers-reduced-motion: reduce) {
  .brand__item.tx-card::before, .brand__item.tx-card .tx-num, .brand__item.tx-card p { animation: none !important; }
}

/* ---- Testimonials: on mobile the quote sits under the photo, no pop-up ---- */
.tx-quote-m { display: none; }
@media (max-width: 767px) {
  .tx-quote-m { display: block; margin-top: 14px; font-size: 16px; line-height: 1.55; color: var(--black-3); font-weight: 400; text-align: left; }
  .modal__testimonial { display: none !important; }
  .testimonial__item .button { cursor: default; }
}

/* ---- Service items that no longer link anywhere ---- */
.tx-nolink .service__item { cursor: default; }
.service__list.tx-wide > .tx-nolink:first-child .service__item { border-top: 1px solid var(--secondary); }

/* Hero headings: one block per line (the template hides <br> on mobile, which broke words) */
.hero__title .tx-line { display: block; }
@media (max-width: 575px) {
  .hero__title.tx-long { font-size: 28px; }
  .hero__area.tx-inner .hero__title.tx-long { font-size: 28px; }
}

/* Long hero headings: never let the template's narrow wrapper cut a word */
.hero__title-wrapper.tx-long-wrap, .hero__area.tx-inner .hero__title-wrapper { max-width: 100%; }
@media (max-width: 991px) { .hero__title.tx-long { font-size: 48px; } .hero__area.tx-inner .hero__title.tx-long { font-size: 44px; } }
@media (max-width: 767px) { .hero__title.tx-long { font-size: 38px; } .hero__area.tx-inner .hero__title.tx-long { font-size: 36px; } }
@media (max-width: 575px) { .hero__title.tx-long, .hero__area.tx-inner .hero__title.tx-long { font-size: 28px; } }

/* ---- 4-card sections sit in two columns so the grid stays full ---- */
.brand__list.tx-cards.tx-cols-2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 575px) { .brand__list.tx-cards.tx-cols-2 { grid-template-columns: 1fr; } }

/* ---- Industries tiles: lime sweep + lift on hover (desktop), one-by-one glow loop (touch / mobile) ---- */
.brand__item.tx-tile { position: relative; overflow: hidden; isolation: isolate; }
.brand__item.tx-tile::before {
  content: ""; position: absolute; inset: 0; z-index: -1; background: var(--primary);
  transform: scaleY(0); transform-origin: bottom; transition: transform .5s cubic-bezier(.65, 0, .35, 1);
}
.brand__item.tx-tile::after {
  content: ""; position: absolute; left: 50%; bottom: 14px; width: 28px; height: 2px; background: var(--black-2);
  transform: translateX(-50%) scaleX(0); transition: transform .45s .1s;
}
.brand__item.tx-tile span { display: inline-block; transition: transform .45s, color .3s; }
@media (hover: hover) and (pointer: fine) {
  .brand__item.tx-tile:hover::before { transform: scaleY(1); }
  .brand__item.tx-tile:hover::after { transform: translateX(-50%) scaleX(1); }
  .brand__item.tx-tile:hover span { transform: translateY(-6px) scale(1.06); color: var(--black-2); }
}
@media (hover: none), (max-width: 767px) {
  .brand__item.tx-tile::before, .brand__item.tx-tile::after, .brand__item.tx-tile span {
    animation-duration: 24s; animation-iteration-count: infinite; animation-timing-function: ease-in-out;
    animation-delay: calc((var(--i, 1) - 1) * 2s);
  }
  .brand__item.tx-tile::before { animation-name: txTile; }
  .brand__item.tx-tile::after { animation-name: txTileLine; }
  .brand__item.tx-tile span { animation-name: txTileText; }
}
@keyframes txTile { 0% { transform: scaleY(0); opacity: 1; } 3%, 7% { transform: scaleY(1); opacity: 1; } 9% { transform: scaleY(1); opacity: 0; } 10%, 100% { transform: scaleY(0); opacity: 1; } }
@keyframes txTileLine { 0%, 10%, 100% { transform: translateX(-50%) scaleX(0); } 3%, 7% { transform: translateX(-50%) scaleX(1); } }
@keyframes txTileText { 0%, 10%, 100% { transform: none; color: var(--black-2); } 3%, 7% { transform: translateY(-5px) scale(1.06); color: var(--black-2); } }
@media (prefers-reduced-motion: reduce) {
  .brand__item.tx-tile::before, .brand__item.tx-tile::after, .brand__item.tx-tile span { animation: none !important; }
}

/* Contextual internal links inside body copy */
a.tx-inlink { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; font-weight: 500; }
a.tx-inlink:hover { color: var(--black-2); text-decoration-color: var(--primary); text-decoration-thickness: 2px; }
.dark a.tx-inlink:hover { color: var(--primary); }
.tx-text ul { margin-bottom: 18px; }