/* ThinkBrite brand overrides — homepage only
   Rule: yellow (#F5E211) as accent only — text, icons, buttons, small decorations.
   Large backgrounds stay neutral (white / dark charcoal). */

:root {
  --tb-yellow:      #F5E211;
  --tb-yellow-dark: #C8B800;
  --tb-dark-text:   #1a1a1a;
  --tb-grey:        #555555;
}

/* ── Mobile app design showcase ───────────────────────────── */

.tb-mobile-showcase {
  position: relative;
  overflow: hidden;
  padding: 105px 24px 112px;
  background: #ffffff;
  color: var(--tb-grey);
}

.tb-mobile-showcase::before {
  content: "";
  position: absolute;
  z-index: 0;
  width: 470px;
  height: 470px;
  left: -260px;
  bottom: -300px;
  border-radius: 50%;
  background: #f1f1ef;
}

/* Keep the homepage hero inside the yellow, charcoal and neutral palette. */
img[alt="header_image"] {
  filter: none !important;
  object-fit: cover;
  object-position: 63% center;
}
rs-module img,
rs-module svg {
  filter: grayscale(1) !important;
}
rs-module-wrap,
rs-module,
rs-slides,
rs-slide {
  background-color: #ffffff !important;
}

.tb-mobile-showcase::after {
  content: "";
  position: absolute;
  z-index: 0;
  width: 170px;
  height: 170px;
  right: 3%;
  top: 48px;
  opacity: 0.55;
  background-image: radial-gradient(var(--tb-yellow) 2px, transparent 2px);
  background-size: 18px 18px;
}

.tb-mobile-showcase__inner {
  position: relative;
  z-index: 1;
  width: min(1180px, 100%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(480px, 1.08fr) minmax(0, 0.92fr);
  gap: 78px;
  align-items: center;
}

.tb-mobile-showcase__eyebrow {
  margin: 0 0 14px;
  color: var(--tb-grey) !important;
  font-family: Poppins, sans-serif;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0;
  text-transform: none;
}

.tb-mobile-showcase h3 {
  max-width: 540px;
  margin: 0;
  color: #111111;
  font-size: clamp(34px, 3.3vw, 45px);
  line-height: 1.2;
  letter-spacing: 0;
  text-transform: capitalize;
}

.tb-mobile-showcase__separator {
  width: 54px;
  height: 3px;
  margin: 26px 0;
  background: var(--tb-yellow);
}

.tb-mobile-showcase__copy > p:not(.tb-mobile-showcase__eyebrow) {
  margin: 0 0 28px;
  color: var(--tb-grey);
  font-size: 16px;
  line-height: 1.75;
}

.tb-mobile-showcase__features {
  margin: 0 0 32px;
  padding: 0;
  display: grid;
  gap: 15px;
  list-style: none;
}

.tb-mobile-showcase__features li {
  position: relative;
  padding-left: 31px;
  color: var(--tb-grey);
  line-height: 1.45;
}

.tb-mobile-showcase__features li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 1px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--tb-yellow);
  color: var(--tb-dark-text);
  font-size: 12px;
  font-weight: 700;
  line-height: 20px;
  text-align: center;
}

.tb-mobile-showcase__features strong {
  display: block;
  margin-bottom: 2px;
  color: #222222;
  font-family: Poppins, sans-serif;
  font-size: 15px;
  font-weight: 600;
}

.tb-mobile-showcase__features span {
  display: block;
  font-size: 15px;
}

.tb-mobile-showcase__button {
  display: inline-flex;
  min-height: 52px;
  padding: 14px 25px;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--tb-yellow);
  border-radius: 4px;
  background: var(--tb-yellow);
  color: var(--tb-dark-text) !important;
  font-family: Poppins, sans-serif;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.35;
  box-shadow: 0 10px 24px rgba(245, 226, 17, 0.2);
  transition: background-color 180ms ease, border-color 180ms ease, transform 180ms ease, box-shadow 180ms ease;
}

.tb-mobile-showcase__button:hover,
.tb-mobile-showcase__button:focus-visible {
  border-color: var(--tb-yellow-dark);
  background: var(--tb-yellow-dark);
  color: var(--tb-dark-text) !important;
  transform: translateY(-2px);
  box-shadow: 0 14px 28px rgba(200, 184, 0, 0.25);
}

.tb-mobile-showcase__visual {
  position: relative;
  margin: 0;
  padding: 22px;
  border-radius: 10px;
  background: #fff7ca;
  box-shadow: 0 24px 65px rgba(47, 54, 75, 0.13);
  transform: translateY(4px);
}

.tb-mobile-showcase__visual img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 4px;
}

@media (max-width: 900px) {
  .tb-mobile-showcase {
    padding: 80px 24px;
  }

  .tb-mobile-showcase__inner {
    grid-template-columns: 1fr;
    gap: 52px;
  }

  .tb-mobile-showcase__visual {
    max-width: 720px;
    margin: 0 auto;
  }
}

@media (max-width: 520px) {
  .tb-mobile-showcase {
    padding: 64px 20px;
  }

  .tb-mobile-showcase h3 {
    font-size: 33px;
  }

  .tb-mobile-showcase__copy > p:not(.tb-mobile-showcase__eyebrow) {
    font-size: 16px;
  }

  .tb-mobile-showcase__visual {
    padding: 10px;
  }

  .tb-mobile-showcase__button {
    width: 100%;
    text-align: center;
  }
}

/* ── Navigation ───────────────────────────────────────────── */

/* Active / hover nav link text */
#rt-mainMenu nav > ul > li.current-menu-item > a,
#rt-mainMenu nav > ul > li.current-menu-ancestor > a,
#rt-mainMenu nav > ul > li:hover > a {
  color: var(--tb-yellow-dark) !important;
}

/* Menu-lines style: active underline bar */
#rt-mainMenu.menu-lines nav > ul > li.current > a:after,
#rt-mainMenu.menu-lines nav > ul > li:hover > a:after {
  background-color: var(--tb-yellow) !important;
}

/* Dropdown hover accent */
.custom-mega-menu #rt-mainMenu nav .mega-menu-item ul.rt-dropdown-menu a:hover,
#rt-mainMenu nav > ul > li.mega-menu-item .mega-menu-content ul.menu li a:hover {
  color: var(--tb-yellow-dark) !important;
}

#rt-mainMenu nav > ul > li .rt-dropdown-menu > li > a:hover,
#rt-mainMenu nav > ul > li .rt-dropdown-submenu > ul.rt-dropdown-menu > li a:hover,
.header-sticky.sticky-active #rt-mainMenu nav > ul > li .rt-dropdown-menu > li > a:hover {
  color: var(--tb-yellow-dark) !important;
  background-color: #fffbea !important;
}

/* ── Primary Buttons ──────────────────────────────────────── */

/* Radiant custom button — filled style */
.radiantthemes-custom-button.element-one .radiantthemes-custom-button-main,
.radiantthemes-custom-button .radiantthemes-custom-button-main {
  background: var(--tb-yellow) !important;
  background-color: var(--tb-yellow) !important;
  border-color: var(--tb-yellow) !important;
  color: var(--tb-dark-text) !important;
}
.radiantthemes-custom-button .radiantthemes-custom-button-main .placeholder,
.radiantthemes-custom-button .radiantthemes-custom-button-main > .placeholder {
  color: var(--tb-dark-text) !important;
}
.radiantthemes-custom-button .radiantthemes-custom-button-main:hover {
  background: var(--tb-yellow-dark) !important;
  background-color: var(--tb-yellow-dark) !important;
}

/* Page-specific high-specificity orange gradient overrides */
[class*="elementor-"] .radiantthemes-custom-button .radiantthemes-custom-button-main {
  background: var(--tb-yellow) !important;
  color: var(--tb-dark-text) !important;
}
[class*="elementor-"] .radiantthemes-custom-button .radiantthemes-custom-button-main > .placeholder {
  color: var(--tb-dark-text) !important;
}

/* WP / Bootstrap generic buttons */
button.btn,
.btn:not(.close):not(.mfp-close),
a.btn:not([href]):not([tabindex]):not([disabled]) {
  background-color: var(--tb-yellow) !important;
  border-color: var(--tb-yellow) !important;
  color: var(--tb-dark-text) !important;
}
button.btn:hover, .btn:hover {
  background-color: var(--tb-yellow-dark) !important;
  border-color: var(--tb-yellow-dark) !important;
}

/* Outlined buttons: only border + text in yellow, bg stays white */
button.btn.btn-outline,
.btn.btn-outline,
a.btn.btn-outline {
  background-color: transparent !important;
  border-color: var(--tb-yellow) !important;
  color: var(--tb-dark-text) !important;
}
button.btn.btn-outline:hover,
.btn.btn-outline:hover {
  background-color: var(--tb-yellow) !important;
  color: var(--tb-dark-text) !important;
}

/* ── Icon Colours ─────────────────────────────────────────── */

.elementor-icon i,
.elementor-icon svg,
.elementor-widget-icon-box .elementor-icon i,
[class^="ti-"],
[class*=" ti-"],
.rt-service-box i,
.radiantthemes-icon-box i {
  color: var(--tb-grey) !important;
}

/* SVG fill for elementor icons */
.elementor-icon svg path,
.elementor-icon svg rect,
.elementor-icon svg circle {
  fill: var(--tb-grey) !important;
  stroke: none;
}

/* ── Heading Accent Text (h6 sub-labels like "WHAT WE DO") ─ */

h6.elementor-heading-title,
.elementor-widget-heading h6 {
  color: var(--tb-grey) !important;
}

/* ── Section Separators ───────────────────────────────────── */

.radiantthemes-separator-block,
.radiantthemes-separator-block > div {
  background: var(--tb-yellow) !important;
}

/* ── Step / Process Number Circles ───────────────────────── */

/* Active circle: yellow bg + dark text (overrides blue-purple gradient) */
.no-round-icon.active-icon .elementor-heading-title {
  background: var(--tb-yellow) !important;
  background-image: none !important;
  color: var(--tb-dark-text) !important;
  border-color: var(--tb-yellow) !important;
}

/* Hover state for inactive circles */
.no-round-icon .elementor-heading-title:hover {
  background: var(--tb-yellow) !important;
  background-image: none !important;
  color: var(--tb-dark-text) !important;
}

/* rt-img-icon-two active circles (orange → yellow) */
.rt-install-process .rt-img-icon-two .elementor-heading-title,
.rt-install-process .rt-img-icon .elementor-icon:hover {
  background: var(--tb-yellow) !important;
  background-image: none !important;
  color: var(--tb-dark-text) !important;
}

/* ── RevSlider accent text ────────────────────────────────── */

/* tp-caption layers that use accent colour */
.tp-caption.rev-color-primary {
  color: var(--tb-grey) !important;
}

/* Start a Project button — override RevSlider default white text */
a#slider-11-slide-11-layer-6,
a#slider-11-slide-11-layer-6:visited,
a#slider-11-slide-11-layer-6:hover {
  color: #444444 !important;
}

/* ── Orange gradient buttons / form submits → yellow ─────── */
/* Theme uses linear-gradient(#FF3834 → #FF7133) everywhere. Flatten to yellow. */

input[type="submit"],
button[type="submit"] {
  background: var(--tb-yellow) !important;
  background-image: none !important;
  border-color: var(--tb-yellow) !important;
  color: var(--tb-dark-text) !important;
}
input[type="submit"]:hover,
button[type="submit"]:hover {
  background: var(--tb-yellow-dark) !important;
}

/* Form submit buttons that use the orange gradient */
.hm12-form input[type='submit'],
.rt-subscribe-form input[type='submit'],
.rt-get-in-touch-form input[type='submit'],
.rt-get-in-touch-form-hm-five input[type='submit'],
.rt-contact-hm-four-form input[type='submit'],
.rt-contact-pg input[type='submit'],
.hm15-contact input[type='submit'],
.comments-area .comment-form > p button[type="submit"],
.comments-area .comment-form > p.form-submit .submit {
  background: var(--tb-yellow) !important;
  background-image: none !important;
  color: var(--tb-dark-text) !important;
}

/* Read-more / load-more / case-study action buttons */
.post.style-default .entry-main .entry-extra .entry-extra-item .post-read-more .btn span,
.page.style-default .entry-main .entry-extra .entry-extra-item .post-read-more .btn span,
.portfolio.style-default .entry-main .entry-extra .entry-extra-item .post-read-more .btn span,
.testimonial.style-default .entry-main .entry-extra .entry-extra-item .post-read-more .btn span,
.wraper_blog_main .blog_main .product.style-default .entry-main .entry-extra .entry-extra-item .post-read-more .btn span,
.radiantthemes_loadmore,
.rt-case-study-box1.element-one a.info,
.wraper_error_main.style-one .error_main .btn {
  background: var(--tb-yellow) !important;
  background-image: none !important;
  color: var(--tb-dark-text) !important;
}

/* Pricing table buttons */
.rt-pricing-table.element-three > .holder > .more .btn,
.rt-pricing-table.element-four > .holder > .more .btn,
.rt-pricing-table.element-five > .holder > .select-btn .btn {
  background: var(--tb-yellow) !important;
  background-image: none !important;
  color: var(--tb-dark-text) !important;
}

/* Step / process number circles */
.rt-install-process .rt-img-icon-two .elementor-heading-title,
.rthm8-install-process .rt-hm8-img-icon .elementor-heading-title,
.rthm8-install-process .rt-hm8-img-icon-active .elementor-heading-title,
.hm15-area:hover .hm15-no-area h6,
.hm15-area .hm15-no-area-active h6 {
  background: var(--tb-yellow) !important;
  background-image: none !important;
  color: var(--tb-dark-text) !important;
  border-color: var(--tb-yellow) !important;
}

/* Orange separators (page-specific elementor-47000) */
.elementor-47000 .elementor-element-5b67e39 .radiantthemes-separator > .radiantthemes-separator-block,
.elementor-47000 .elementor-element-6d844bd .radiantthemes-separator > .radiantthemes-separator-block,
.elementor-47000 .elementor-element-6d844bd .radiantthemes-separator > .radiantthemes-separator-block > .radiantthemes-separator-block-gap {
  background-color: var(--tb-yellow) !important;
  background-image: none !important;
}

/* ── Theme primary colour (#ff583c orange) replacements ──── */
/* The Softek theme sets orange as primary. Override everywhere with grey. */

/* Inline style overrides — catches RevSlider JS-injected colors */
[style*="color:#ff583c"],
[style*="color: #ff583c"],
[style*="color:#FF583C"],
[style*="color:#Ff583c"] {
  color: var(--tb-grey) !important;
}
[style*="background:#ff583c"],
[style*="background-color:#ff583c"],
[style*="background:#FF583C"],
[style*="background-color:#FF583C"] {
  background-color: var(--tb-yellow) !important;
}
[style*="border-color:#ff583c"],
[style*="border-color:#FF583C"] {
  border-color: var(--tb-grey) !important;
}

/* SVG fills using orange */
[fill="#ff583c"], [fill="#FF583C"],
[stroke="#ff583c"], [stroke="#FF583C"] {
  fill: var(--tb-grey) !important;
  stroke: var(--tb-grey) !important;
}

/* Phone text colour in hero slider */
.rt-phone {
  color: var(--tb-grey) !important;
}

/* ── Misc Accents ─────────────────────────────────────────── */

/* Pagination active */
.pagination > *.current {
  border-color: var(--tb-yellow) !important;
  color: var(--tb-grey) !important;
}

/* Topbar (thin stripe at very top) keep accent */
#topbar.topbar-colored,
#topbar.topbar-colored.rt-dark {
  background-color: var(--tb-dark-text) !important;
}

/* Hot/new tag badge */
.hot-tag {
  background-color: var(--tb-yellow) !important;
  color: var(--tb-dark-text) !important;
}

/* Scrollup button */
body > .scrollup {
  background-color: var(--tb-yellow) !important;
  color: var(--tb-dark-text) !important;
}

/* ── Header cart and search icons ────────────────────────── */

.default-cart,
.default-search {
  display: none !important;
}

/* ── Logo sizing ──────────────────────────────────────────── */

.radiant-custom-logo .logo img,
.elementor-widget-radiant-custom-logo .logo img,
.logo img,
#header #header-wrap .logo img,
#header #header-wrap .logo a img {
  width: auto !important;
  height: 90px !important;
  max-height: none !important;
  max-width: none !important;
  object-fit: contain !important;
}

/* ── Keep large section backgrounds neutral ───────────────── */
/* Force any section/div that inherited a yellow background back to neutral */
.elementor-section[style*="background-color:#F5E211"],
.elementor-section[style*="background-color: #F5E211"],
.elementor-column[style*="background-color:#F5E211"],
.elementor-column[style*="background-color: #F5E211"] {
  background-color: #f5f5f0 !important;
}

/* ── Dark grey text (replacing black) ────────────────────── */

/* Headings */
h1, h2, h3, h4, h5,
.elementor-heading-title,
.elementor-widget-heading .elementor-heading-title {
  color: #444444 !important;
}

/* Body / paragraph text — do NOT include bare `body` as it cascades into nav */
p,
.elementor-widget-text-editor p,
.elementor-text-editor p {
  color: #444444 !important;
}

/* Restore white text on dark content sections (NOT the header nav) */
.rt-dark h1, .rt-dark h2, .rt-dark h3, .rt-dark h4, .rt-dark h5,
.rt-dark p, .rt-dark li,
.rt-dark .elementor-heading-title {
  color: #ffffff !important;
}

/* ── CTA / Newsletter section (blue → dark charcoal) ─────── */
/* Targets any top-level section containing the CTA contact form or newsletter */
.elementor-section.elementor-top-section:has(.hm12-form),
.elementor-section.elementor-top-section:has(.rt-subscribe-form) {
  background-image: none !important;
  background-color: #1a1a1a !important;
}

.elementor-section.elementor-top-section:has(.hm12-form) h1,
.elementor-section.elementor-top-section:has(.hm12-form) h2,
.elementor-section.elementor-top-section:has(.hm12-form) h3,
.elementor-section.elementor-top-section:has(.hm12-form) h4,
.elementor-section.elementor-top-section:has(.hm12-form) p,
.elementor-section.elementor-top-section:has(.hm12-form) .elementor-heading-title,
.elementor-section.elementor-top-section:has(.rt-subscribe-form) h1,
.elementor-section.elementor-top-section:has(.rt-subscribe-form) h2,
.elementor-section.elementor-top-section:has(.rt-subscribe-form) h3,
.elementor-section.elementor-top-section:has(.rt-subscribe-form) h4,
.elementor-section.elementor-top-section:has(.rt-subscribe-form) p,
.elementor-section.elementor-top-section:has(.rt-subscribe-form) .elementor-heading-title {
  color: #ffffff !important;
}

/* ── Footer (blue gradient image → dark charcoal) ─────────── */
/* Inner pages (elementor-3024) */
.elementor-3024 .elementor-element.elementor-element-2bd58e2:not(.elementor-motion-effects-element-type-background),
.elementor-3024 .elementor-element.elementor-element-2bd58e2 > .elementor-motion-effects-container > .elementor-motion-effects-layer {
  background-image: none !important;
  background-color: #1a1a1a !important;
}
/* Homepage custom footer (elementor-47447) */
.elementor-47447 .elementor-element.elementor-element-4af3522:not(.elementor-motion-effects-element-type-background),
.elementor-47447 .elementor-element.elementor-element-4af3522 > .elementor-motion-effects-container > .elementor-motion-effects-layer {
  background-image: none !important;
  background-color: #1a1a1a !important;
}

/* ── Navigation dropdown arrows (Themify font → plain chevron) */
/* The Themify icon font isn't available in the static site, so \e64b renders as □ */
#rt-mainMenu nav > ul > li.menu-item-has-children a::after {
  content: " ▾" !important;
  font-family: inherit !important;
  font-size: 10px !important;
  vertical-align: middle !important;
}

/* ── Team member photos — circle style ───────────────────── */

.team.element-four .rt-professionals {
  overflow: visible !important;
  text-align: center;
}

/* The photo itself becomes a circle */
.team.element-four .rt-professionals > img {
  border-radius: 50% !important;
  width: 200px !important;
  height: 200px !important;
  object-fit: cover !important;
  object-position: top center !important;
  margin: 0 auto 15px !important;
  display: block !important;
}

/* Clip the social hover bar to match the circle — transparent in resting state */
.team.element-four .rt-professionals .team-member-social-icon-group {
  position: absolute !important;
  top: 0 !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 200px !important;
  height: 200px !important;
  border-radius: 50% !important;
  overflow: hidden !important;
  background: transparent !important;
}

.team.element-four .rt-professionals .team-member-social-icon {
  width: 100% !important;
  bottom: 0 !important;
}

/* ── Team card hover overlay (blue/purple → dark charcoal) ── */

.team.element-four .rt-professionals .team-member-social-icon {
  background: #1a1a1a !important;
  background: -moz-linear-gradient(left, #1a1a1a 0%, #333333 100%) !important;
  background: -webkit-linear-gradient(left, #1a1a1a 0%, #333333 100%) !important;
  background: linear-gradient(to right, #1a1a1a 0%, #333333 100%) !important;
}
.team.element-four .rt-professionals .team-member-social-icon:hover {
  background: #333333 !important;
  background: -moz-linear-gradient(left, #333333 0%, #1a1a1a 100%) !important;
  background: -webkit-linear-gradient(left, #333333 0%, #1a1a1a 100%) !important;
  background: linear-gradient(to right, #333333 0%, #1a1a1a 100%) !important;
}

/* ── Link colours (browser default blue → brand grey) ─────── */

a,
a:visited {
  color: var(--tb-grey);
}
a:hover,
a:focus {
  color: var(--tb-dark-text);
}

/* ── Portfolio / case study hover accent (blue → grey) ────── */

.rt-portfolio-box.element-Masonry .rt-portfolio-box-item>.holder>.portfolio-action-btn>.portfolio-link:hover,
.rt-portfolio-box.element-Masonry .rt-portfolio-box-item>.holder>.portfolio-action-btn>.portfolio-zoom:hover {
  background-color: var(--tb-yellow) !important;
}
.rt-portfolio-box.style-seven>.holder .rt-portfolio-item-details .rt-show-project .rt-show-project-link a:hover,
.rt-case-study-box.element-two .rt-portfolio-box-item.holder>.rt-portfolio-item-details .rt-show-project .rt-show-project-link a:hover {
  color: var(--tb-dark-text) !important;
}

/* ── Tooltip widget (blue → dark charcoal) ─────────────────── */

.tooltip {
  background: #1a1a1a !important;
  box-shadow: 0 3px 0 #000 !important;
}
.tooltip::after,
.rt-tooltip-down .tooltip::after {
  border-bottom-color: #000 !important;
  border-top-color: #000 !important;
}

/* ── Footer social icon circles (brand colours → dark charcoal) */

.elementor-47447 .elementor-element.elementor-element-f7f30c0 .elementor-repeater-item-7fec4f0.elementor-social-icon,
.elementor-47447 .elementor-element.elementor-element-f7f30c0 .elementor-repeater-item-cc70354.elementor-social-icon,
.elementor-47447 .elementor-element.elementor-element-f7f30c0 .elementor-repeater-item-4675fde.elementor-social-icon,
.elementor-47447 .elementor-element.elementor-element-f7f30c0 .elementor-repeater-item-315e257.elementor-social-icon {
  background-color: #333333 !important;
  transition: background-color 0.3s ease;
}
.elementor-47447 .elementor-element.elementor-element-f7f30c0 .elementor-social-icon:hover {
  background-color: var(--tb-yellow) !important;
}
.elementor-47447 .elementor-element.elementor-element-f7f30c0 .elementor-social-icon:hover i {
  color: var(--tb-dark-text) !important;
}

/* ── Testimonial pagination dots (blue tint → neutral) ─────── */

.testimonial.element-three > .swiper-pagination .swiper-pagination-bullet {
  background: #888888 !important;
}
.testimonial.element-three > .swiper-pagination .swiper-pagination-bullet-active {
  background: #ffffff !important;
}

/* ── Copyright year ─────────────────────────────────────────── */

#tb-copyright-year {
  color: #ffffff !important;
}

/* ── Scroll-to-top button ───────────────────────────────────── */

body > .scrollup {
  background-color: var(--tb-yellow) !important;
  color: var(--tb-dark-text) !important;
}
body > .scrollup i {
  color: var(--tb-dark-text) !important;
  font-size: 16px;
  line-height: 40px;
  display: block;
}
body > .scrollup:hover {
  background-color: var(--tb-dark-text) !important;
  color: var(--tb-yellow) !important;
}
body > .scrollup:hover i {
  color: var(--tb-yellow) !important;
}

/* ── Homepage hero v2 ───────────────────────────────────────── */

.tb-native-slider { display: none !important; }
.tb-hero-v2,
.tb-hero-v2 * { box-sizing: border-box; }
.tb-hero-v2 {
  --hero-yellow: #f7bf00;
  --hero-ink: #111111;
  position: relative;
  z-index: 2;
  padding: 16px 22px 28px;
  color: var(--hero-ink);
  background: #fff;
  font-family: Nunito, Arial, sans-serif;
}
.tb-hero-v2__inner {
  position: relative;
  width: min(1600px, 100%);
  min-height: 840px;
  margin: 0 auto;
  overflow: hidden;
  border: 1px solid #f1f1f1;
  border-radius: 28px;
  background:
    radial-gradient(circle at 0 14%, #f0f0f0 0 36px, transparent 37px),
    radial-gradient(circle at 0 28%, #f7f7f7 0 32px, transparent 33px),
    #fff;
  box-shadow: 0 18px 60px rgba(20, 20, 20, .04);
}
.tb-hero-v2__copy {
  position: relative;
  z-index: 5;
  width: 49%;
  padding: 105px 0 135px 38px;
  margin: 0 !important;
}
.tb-hero-v2__eyebrow {
  display: flex;
  align-items: center;
  gap: 20px;
  margin: 0 0 26px;
  color: #3e3e3e;
  font-size: 19px;
  font-weight: 700;
}
.tb-hero-v2__eyebrow span { width: 63px; height: 4px; margin: 0 !important; border-radius: 9px; background: var(--hero-yellow); }
.tb-hero-v2 h1 {
  margin: 0;
  color: #090909;
  font: 800 clamp(54px, 4.35vw, 76px)/1.13 Poppins, Arial, sans-serif;
  letter-spacing: -2.8px;
  text-transform: none;
}
.tb-hero-v2 h1 strong { color: var(--hero-yellow); font-weight: 800; }
.tb-hero-v2__intro {
  max-width: 610px;
  margin: 26px 0 34px;
  color: #3f3f3f;
  font-size: 18px;
  line-height: 1.95;
}
.tb-hero-v2__actions { display: flex; align-items: center; gap: 38px; }
.tb-hero-v2__actions > * { margin: 0 !important; }
.tb-hero-v2__button,
.tb-header-project {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 26px;
  min-height: 66px;
  padding: 0 34px;
  border-radius: 9px;
  color: #111 !important;
  background: linear-gradient(135deg, #f3b900, #ffcf05);
  box-shadow: 0 10px 24px rgba(247, 191, 0, .22);
  font-size: 17px;
  font-weight: 800;
  text-decoration: none !important;
}
.tb-hero-v2__button:hover,
.tb-header-project:hover { transform: translateY(-2px); background: #111; color: #f7bf00 !important; }
.tb-hero-v2__button span { font-size: 27px; line-height: 1; }
.tb-hero-v2__call { display: flex; align-items: center; gap: 15px; }
.tb-hero-v2__call i,
.tb-float {
  display: grid;
  place-items: center;
  width: 60px;
  height: 60px;
  border: 1px solid #dedede;
  border-radius: 16px;
  background: rgba(255,255,255,.94);
  box-shadow: 0 12px 26px rgba(0,0,0,.06);
}
.tb-hero-v2 svg { width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.tb-hero-v2__call span { display: grid; }
.tb-hero-v2__call b { font-size: 17px; }
.tb-hero-v2__call small { margin-top: 3px; color: #555; font-size: 15px; }
.tb-hero-v2__visual {
  position: absolute;
  z-index: 2;
  top: 28px;
  right: 24px;
  width: 41%;
  height: 670px;
  overflow: visible;
  border-radius: 25px 0 0 25px;
}
.tb-hero-v2__visual > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 52% center;
  border-radius: 25px 0 0 25px;
}
.tb-float { position: absolute; z-index: 4; }
.tb-float--code { top: 42px; left: -108px; }
.tb-float--phone { top: 216px; right: 8px; }
.tb-float--rocket { left: -130px; bottom: 68px; }
.tb-float--window { right: -5px; bottom: -17px; }
.tb-dev-card,
.tb-responsive-card {
  position: absolute;
  z-index: 6;
  border: 1px solid #dedede;
  border-radius: 18px;
  background: rgba(255,255,255,.96);
  box-shadow: 0 20px 45px rgba(0,0,0,.12);
  backdrop-filter: blur(12px);
}
.tb-dev-card { top: 140px; left: -156px; width: 310px; padding: 24px 26px; }
.tb-card-title { display: flex; justify-content: space-between; margin-bottom: 13px; font-size: 17px; font-weight: 800; }
.tb-card-title b { font-size: 24px; line-height: 18px; }
.tb-dev-card > div:not(.tb-card-title) { display: flex; align-items: center; gap: 18px; margin-top: 14px; font-size: 16px; font-weight: 700; }
.tb-dev-card i,
.tb-hero-v2__services i {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 13px;
  background: #fff6dc;
}
.tb-dev-card svg { width: 27px; }
.tb-responsive-card { right: 148px; bottom: -42px; width: 350px; padding: 21px 24px 17px; }
.tb-responsive-card > b { font-size: 15px; }
.tb-responsive-card__devices { display: flex; justify-content: space-between; margin-top: 18px; }
.tb-responsive-card__devices span { display: grid; justify-items: center; gap: 5px; }
.tb-responsive-card__devices svg { width: 52px; height: 52px; }
.tb-responsive-card__devices span:nth-child(2) svg { width: 40px; }
.tb-responsive-card__devices span:nth-child(3) svg { width: 30px; }
.tb-responsive-card__devices small { font-size: 13px; }
.tb-hero-v2__services {
  position: absolute;
  z-index: 8;
  left: 27px;
  bottom: 28px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  width: 63%;
  padding: 25px 30px;
  border: 1px solid #dedede;
  border-radius: 18px;
  background: rgba(255,255,255,.97);
  box-shadow: 0 16px 38px rgba(0,0,0,.08);
}
.tb-hero-v2__services > div { display: flex; align-items: center; gap: 20px; padding: 0 27px; border-right: 1px solid #e6e6e6; }
.tb-hero-v2__services > div:first-child { padding-left: 0; }
.tb-hero-v2__services > div:last-child { border: 0; }
.tb-hero-v2__services span { display: grid; }
.tb-hero-v2__services b { font-size: 16px; }
.tb-hero-v2__services small { margin-top: 3px; color: #555; font-size: 13px; white-space: nowrap; }
.tb-header-project { position: absolute; top: 17px; right: 4%; z-index: 30; min-height: 52px; padding: 0 28px; font-size: 16px; }
#header { position: relative; }
#header .nav { padding-right: 178px !important; }
#header .elementor-inner-section > .elementor-container { max-width: 1500px !important; }
#header .nav > [class*="menu"] > ul > li:first-child > a,
#header .nav > ul > li:first-child > a { position: relative; }
#header .nav > [class*="menu"] > ul > li:first-child > a::after,
#header .nav > ul > li:first-child > a::after {
  content: "";
  position: absolute;
  left: 18%;
  right: 18%;
  bottom: 4px;
  height: 3px;
  border-radius: 4px;
  background: var(--hero-yellow);
}

@media (max-width: 1180px) {
  .tb-header-project { display: none; }
  #header .nav { padding-right: 0 !important; }
  .tb-hero-v2__inner { min-height: 760px; }
  .tb-hero-v2__copy { width: 53%; padding-left: 40px; }
  .tb-hero-v2 h1 { font-size: 52px; }
  .tb-hero-v2__visual { width: 49%; }
  .tb-dev-card { left: -105px; transform: scale(.9); }
  .tb-responsive-card { right: 35px; transform: scale(.88); }
  .tb-hero-v2__services { width: 70%; }
}
@media (max-width: 900px) {
  .tb-hero-v2 { padding: 8px 12px 20px; }
  .tb-hero-v2__inner { min-height: 1050px; }
  .tb-hero-v2__copy { width: 100%; padding: 72px 34px 40px; }
  .tb-hero-v2 h1 { font-size: clamp(43px, 9vw, 65px); }
  .tb-hero-v2__visual { position: relative; top: auto; right: auto; width: calc(100% - 40px); height: 480px; margin: 0 20px; }
  .tb-dev-card { left: 12px; top: 90px; transform: scale(.8); transform-origin: left top; }
  .tb-responsive-card { right: 12px; bottom: -40px; transform: scale(.8); transform-origin: right bottom; }
  .tb-float--code,.tb-float--rocket { display: none; }
  .tb-hero-v2__services { display: none; }
}
@media (max-width: 560px) {
  .tb-hero-v2__inner { min-height: 990px; border-radius: 18px; }
  .tb-hero-v2__copy { padding: 55px 24px 28px; }
  .tb-hero-v2__eyebrow { gap: 12px; font-size: 15px; }
  .tb-hero-v2__eyebrow span { width: 38px; }
  .tb-hero-v2 h1 { font-size: 42px; line-height: 1.12; letter-spacing: -1.5px; }
  .tb-hero-v2__intro { font-size: 16px; line-height: 1.7; }
  .tb-hero-v2__actions { align-items: flex-start; flex-direction: column; gap: 22px; }
  .tb-hero-v2__visual { height: 390px; }
  .tb-dev-card { display: none; }
  .tb-responsive-card { width: 310px; right: 50%; transform: translateX(50%) scale(.76); }
}