/* ==========================================================================
   brikx brand overrides v2 — load AFTER main.css
   Colour use: 50% Smart Blue / 25% brikx Gradient / 5% Light / 5% Dark / 15% White
   PRIMARY:   Smart Blue, brikx Gradient
   SECONDARY: Light brikx, Dark brikx, White
   ========================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,100..900;1,9..144,100..900&family=Hanken+Grotesk:ital,wght@0,100..900;1,100..900&display=swap");

:root {
  /* ---------- Brand core ---------- */
  --brikx-smart-blue: #2b3444;            /* RGB 43, 52, 68    */
  --brikx-light: #7bd6c9;                 /* RGB 123, 214, 201 */
  --brikx-dark: #08936e;                  /* RGB 8, 147, 110   */
  --brikx-white: #ffffff;
  --brikx-gradient: linear-gradient(135deg, #7bd6c9 0%, #08936e 100%);

  /* ---------- Fonts ---------- */
  --tj-ff-body: 'Hanken Grotesk', sans-serif;
  --tj-ff-heading: 'Hanken Grotesk', sans-serif;
  --tj-ff-sub: 'Fraunces', Georgia, serif;
  --tj-fw-black: 900;

  /* ---------- Typographic hierarchy ---------- */
  --brand-headline-weight: 900;           /* Hanken Grotesk Black */
  --brand-headline-tracking: 0.01em;      /* +10 */
  /* Brand spec is 30pt (= 40px). Template keeps its responsive scale;
     uncomment (and the h1/h2 rule below) to force the literal size. */
  /* --brand-headline-size: 40px; */
  --brand-sub-size: 21.33px;              /* 16pt */
  --brand-sub-tracking: 0.005em;          /* +5 */
  --brand-btn-size: 17.33px;              /* 13pt */

  /* ---------- Template colour variables ----------
     --tj-color-theme-primary is the template's ACCENT slot (icons, links,
     small highlights) — mapped to the SECONDARY Dark brikx, used sparingly.
     Big fills use Smart Blue / the gradient (see below). */
  --tj-color-heading-primary: #2b3444;
  --tj-color-text-body: #3d4859;
  --tj-color-text-body-2: #a8b2c0;        /* muted text on dark */
  --tj-color-text-body-3: #6b7585;
  --tj-color-text-body-4: #232c3a;
  --tj-color-text-body-5: rgba(255, 255, 255, 0.8);

  --tj-color-theme-primary: #08936e;      /* Dark brikx (accent only) */
  --tj-color-theme-bg: #ffffff;           /* no tints: White */
  --tj-color-theme-bg-2: #ffffff;
  --tj-color-theme-bg-3: #343e51;
  --tj-color-theme-dark: #2b3444;         /* Smart Blue */
  --tj-color-theme-dark-2: #354055;
  --tj-color-theme-dark-3: #4b5566;
  --tj-color-theme-dark-4: #7a8494;
  --tj-color-theme-dark-5: #6b7585;

  --tj-color-grey-1: #ffffff;             /* page background: White */
  --tj-color-grey-2: #aab3c0;
  --tj-color-border-1: #d0d6dd;
  --tj-color-border-2: #434d61;           /* borders on dark */
  --tj-color-border-5: rgba(8, 147, 110, 0.15);
}

/* On Smart Blue sections the accent flips to Light brikx (Dark brikx is
   too low-contrast on navy). Every var(--tj-color-theme-primary) inside
   these sections resolves to Light brikx. */
.tj-service-section, .tj-project-section-3, .tj-contact-section,
.h4-banner-section, .banner-left-box, .tj-slider-section, .h5-banner-section,
.h5-about, .h5-working-process, .h5-pricing-box-wrapper,
.h6-about, .h6-project, .h6-testimonial,
.h7-hero, .h7-testimonial, .h7-team,
.h9-hero, .h9-service, .h9-about, .h9-cta-section,
.h10-process, .h10-testimonial, .h11-service,
.tj-footer-section.footer-2, .tj-footer-section.footer-3,
.hamburger-area, .tj_coming_soon {
  --tj-color-theme-primary: #7bd6c9;
}

/* ==========================================================================
   Typography
   ========================================================================== */
body { font-family: var(--tj-ff-body); }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--tj-ff-heading);
  font-weight: var(--brand-headline-weight);
  letter-spacing: var(--brand-headline-tracking);
}
/* h1, h2 { font-size: var(--brand-headline-size); } */

/* Alternative headline: Hanken Grotesk Black, caps, +10 */
.brand-alt-headline {
  font-family: var(--tj-ff-heading);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.01em;
}

/* Subheading / CTA text: Fraunces, opsz 72, Regular, +5 */
.brand-subheading,
.banner-desc,
.slider-content .slider-desc,
.h4-banner-content .banner-desc,
.tj-banner-section-2 .banner-content-2 .desc,
.h5-banner-area .solution-box .desc,
.h11-banner-section .banner-content-2 .desc,
.h10-hero .banner-content-2 .banner-desc-area .banner-desc {
  font-family: var(--tj-ff-sub);
  font-weight: 400;
  font-variation-settings: "opsz" 72;
  letter-spacing: var(--brand-sub-tracking);
}
.brand-subheading { font-size: var(--brand-sub-size); }

/* Buttons: Hanken Grotesk Bold, caps, tracking 0 */
.tj-primary-btn, .text-btn, .pricing-btn a, .footer-cta .cta-btn,
.h5-pricing-tab-controller, .subscribe-form button, .tj-careers-btn {
  font-family: var(--tj-ff-body);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0;
}
.tj-primary-btn, .text-btn { font-size: var(--brand-btn-size); }

/* ==========================================================================
   Buttons — Smart Blue fill, gradient icon / hover (keeps white text legible)
   ========================================================================== */
.tj-primary-btn { background: var(--brikx-smart-blue); }
.tj-primary-btn .btn-text { color: #fff; }
.tj-primary-btn .btn-icon { background: var(--brikx-gradient); }
.tj-primary-btn .btn-icon i { color: var(--brikx-smart-blue); }
.tj-primary-btn:hover { background: var(--brikx-gradient); }
.tj-primary-btn:hover .btn-text { color: var(--brikx-smart-blue); }
.tj-primary-btn:hover .btn-icon { background: var(--brikx-smart-blue); }
.tj-primary-btn:hover .btn-icon i { color: #fff; }

/* Buttons on Smart Blue sections: white pill, Smart Blue text (as in brand book) */
.tj-service-section .tj-primary-btn, .tj-project-section-3 .tj-primary-btn,
.tj-contact-section .tj-primary-btn, .h4-banner-section .tj-primary-btn,
.banner-left-box .tj-primary-btn, .tj-slider-section .tj-primary-btn,
.h5-banner-section .tj-primary-btn, .h5-about .tj-primary-btn,
.h5-working-process .tj-primary-btn, .h6-about .tj-primary-btn,
.h6-project .tj-primary-btn, .h6-testimonial .tj-primary-btn,
.h7-hero .tj-primary-btn, .h7-testimonial .tj-primary-btn,
.h9-hero .tj-primary-btn, .h9-service .tj-primary-btn, .h9-cta-section .tj-primary-btn,
.h10-process .tj-primary-btn, .h10-testimonial .tj-primary-btn,
.h11-service .tj-primary-btn, .footer-2 .tj-primary-btn, .footer-3 .tj-primary-btn,
.cta-area .tj-primary-btn, .tj-client-section-2 .tj-primary-btn {
  background: #fff;
}
.tj-service-section .tj-primary-btn .btn-text, .tj-project-section-3 .tj-primary-btn .btn-text,
.tj-contact-section .tj-primary-btn .btn-text, .h4-banner-section .tj-primary-btn .btn-text,
.banner-left-box .tj-primary-btn .btn-text, .tj-slider-section .tj-primary-btn .btn-text,
.h5-banner-section .tj-primary-btn .btn-text, .h5-about .tj-primary-btn .btn-text,
.h5-working-process .tj-primary-btn .btn-text, .h6-about .tj-primary-btn .btn-text,
.h6-project .tj-primary-btn .btn-text, .h6-testimonial .tj-primary-btn .btn-text,
.h7-hero .tj-primary-btn .btn-text, .h7-testimonial .tj-primary-btn .btn-text,
.h9-hero .tj-primary-btn .btn-text, .h9-service .tj-primary-btn .btn-text,
.h9-cta-section .tj-primary-btn .btn-text, .h10-process .tj-primary-btn .btn-text,
.h10-testimonial .tj-primary-btn .btn-text, .h11-service .tj-primary-btn .btn-text,
.footer-2 .tj-primary-btn .btn-text, .footer-3 .tj-primary-btn .btn-text,
.cta-area .tj-primary-btn .btn-text, .tj-client-section-2 .tj-primary-btn .btn-text {
  color: var(--brikx-smart-blue);
}

/* ==========================================================================
   Gradient on large brand blocks (the 25%)
   Text on these is Smart Blue: white on Light brikx fails contrast.
   ========================================================================== */
.tj-marquee-section, .h5-maquee-inner, .countup-wrap, .cta-area,
.tj-copyright-area-3, .tj-copyright-area-4, .tj-client-section-2,
.pricing-box.active, .widget-subscribe-3, .rating-box, .call-box,
.customers-box.style-2, .about-bottom-area .client-review-cont,
.tj-faq.style-2 .accordion-item.active, .h5-pricing-tab-controller.active,
.h10-pricing-box.active .pricing-header, .menu_bar.mobile_menu_bar,
#tj-back-to-top.active, .feature-contact {
  background: var(--brikx-gradient);
}

/* Hover fills that used the accent colour */
.choose-box:hover, .service-item.style-3:hover, .service-item.style-4:hover,
.service-item.style-6:hover, .tji-icon-btn:hover, .slider-next:hover,
.slider-prev:hover, .tj-sidebar-widget.widget-categories ul li a:hover,
.service-categories ul li a:hover, .service-categories ul li a.active,
.tj-pagination ul li .page-numbers:hover, .h9-team-item-wrap .team-item::before,
.categories a:hover, .tagcloud a:hover {
  background: var(--brikx-gradient);
  border-color: transparent;
}
/* keep text on those hover fills dark and readable */
.choose-box:hover .title, .choose-box:hover .desc, .choose-box:hover .btn-text,
.service-item.style-3:hover .title, .service-item.style-3:hover .desc,
.service-item.style-4:hover .title, .service-item.style-4:hover .desc,
.service-item.style-6:hover .title, .service-item.style-6:hover .desc {
  color: var(--brikx-smart-blue);
}

/* Text on gradient blocks */
.countup-wrap .inline-content, .countup-wrap .inline-content .odometer,
.countup-wrap .inline-content .odometer span, .countup-wrap .count-text,
.cta-area .cta-content .title,
.tj-copyright-area-3 .copyright-text p, .tj-copyright-area-3 .copyright-text a,
.tj-copyright-area-4 .copyright-text p, .tj-copyright-area-4 .copyright-text a,
.rating-box .title, .rating-box .rating-text, .rating-box .number,
.call-box .title, .call-box .number,
.customers-box.style-2 .customers-text,
.about-bottom-area .client-review-cont, .about-bottom-area .client-info .title,
.widget-subscribe-3 .title {
  color: var(--brikx-smart-blue);
}
.marquee-item .marquee-text {
  -webkit-text-stroke: 2px var(--brikx-smart-blue);
}
.h5-maquee-inner .h5-maquee-slider-item .marquee-box .marquee-icon,
.h5-maquee-inner .h5-maquee-slider-item .marquee-box .marquee-title .title {
  color: var(--brikx-smart-blue);
}

.swiper-pagination-bullet-active, .tj-progress-bar {
  background: var(--brikx-gradient);
  opacity: 1;
}

/* Gradient text for highlight words in hero headings */
.banner-content .banner-title span,
.h4-banner-content .banner-title span {
  background: var(--brikx-gradient);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ==========================================================================
   White cards on a white page need a hairline to stay separated
   (the template relied on grey page + white cards)
   ========================================================================== */
.choose-box, .service-item, .testimonial-item, .process-item, .blog-item,
.project-item, .countup-item.style-2, .contact-item.style-2,
.team-item-inner, .pricing-box, .experience-box, .progress-box,
.h5-strategy-item, .mission-vision-box, .tj-post__navigation,
.tj-latest-comments ul .tj-comment .comment-content, .service-details-item,
.h6-service-item, .h7-faq-wrapper, .tj-faq .accordion-item {
  border: 1px solid var(--tj-color-border-1);
}
/* ...but not on Smart Blue sections, where cards are translucent */
.tj-service-section .service-item, .h5-working-process .process-item,
.h6-testimonial .testimonial-item, .h7-testimonial .testimonial-item,
.h10-testimonial .testimonial-item, .h10-process .h10-process-item,
.h9-service .service-item, .h5-pricing-box-wrapper .pricing-box {
  border-color: var(--tj-color-border-2);
}

/* ==========================================================================
   Preloader (was hardcoded #00ffc2)
   ========================================================================== */
.tj-preloader .tj-preloader-ball-inner,
.tj-preloader .tj-preloader-ball-shadow { background-color: var(--brikx-light); }
.tj-preloader .tj-preloader-ball-shadow { box-shadow: 0 4px 20px 0 var(--brikx-light); }
.tj-preloader .tj-preloader-ball {
  background-color: rgba(123, 214, 201, 0.1);
  box-shadow: 0 0 20px 0 var(--brikx-light);
}

::selection { background: var(--brikx-smart-blue); color: var(--brikx-white); }
* { scrollbar-color: var(--brikx-dark) var(--brikx-white); }
::-webkit-scrollbar-thumb { background: var(--brikx-dark); }