/* ============================================================
   US Finance Inc. — Brand Color Overrides
   Replaces the template's teal palette with blue / grey / white.
   ============================================================ */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap");

:root {
  /* ---- Body font override ---- */
  --tj-ff-body: 'Inter', sans-serif;
  --tj-fs-body: 16.8px;
  --tj-fs-p: 16.8px;
  /* ---- Brand tokens ---- */
  --usf-primary:       #242c82;
  --usf-primary-light: #eef0f7;   /* very light blue-grey for section bgs */
  --usf-primary-medium: rgba(36, 44, 130, 0.25);
  --usf-primary-dark:  #1a2060;
  --usf-white:         #ffffff;
  --usf-off-white:     #f5f6fa;
  --usf-text:          #2d2d2d;
  --usf-text-light:    #5a5a5a;

  /* ---- Override EVERY template variable ---- */
  /* Primary teal → brand blue */
  --tj-color-theme-primary: #242c82;

  /* Light teal backgrounds → light blue-grey */
  --tj-color-theme-bg:   #eef0f7;
  --tj-color-theme-bg-2: #e4e7f2;
  --tj-color-theme-bg-3: #1c2340;

  /* Dark teal → dark navy / charcoal */
  --tj-color-theme-dark:   #111833;
  --tj-color-theme-dark-2: #1c2340;
  --tj-color-theme-dark-3: #3a3f5c;
  --tj-color-theme-dark-4: #6b7089;
  --tj-color-theme-dark-5: #6b7089;

  /* Headings — was teal-black, now dark navy */
  --tj-color-heading-primary: #111833;

  /* Body text — was teal-grey, now neutral grey */
  --tj-color-text-body:   #3a3f5c;
  --tj-color-text-body-2: #9a9fb5;
  --tj-color-text-body-3: #6b7089;
  --tj-color-text-body-4: #1c2340;

  /* Greys — remove teal tint */
  --tj-color-grey-1: #f0f1f5;
  --tj-color-grey-2: #9a9fb5;
  --tj-color-grey-3: rgba(255, 255, 255, 0.1);

  /* Borders — remove teal tint */
  --tj-color-border-1: #d0d3de;
  --tj-color-border-2: #2e3452;
  --tj-color-border-3: rgba(255, 255, 255, 0.15);
  --tj-color-border-4: rgba(255, 255, 255, 0.2);
  --tj-color-border-5: rgba(36, 44, 130, 0.15);
}

/* ---- Light background utility ---- */
.usf-light-bg {
  background-color: var(--usf-primary-light) !important;
}

/* ---- Footer ---- */
.tj-footer-section {
  background-color: #111833 !important;
}

/* ============================================================
   Hardcoded teal rgba overrides
   main.css uses rgba(30,138,138,...) in places that CSS
   variables can't reach. Override the selectors here.
   ============================================================ */

/* Mega-menu service icon gradient */
.mega-menu-service-icon,
.service-icon-box {
  background: linear-gradient(-45deg, rgba(36,44,130,0.3) 0%, rgba(36,44,130,0) 50%, rgba(36,44,130,0.3) 100%) !important;
}

/* h5 client logo teal overlays */
.h5-client-item .client-logo::after {
  background: rgba(36, 44, 130, 0.6) !important;
}
.h5-client-item .client-logo:hover {
  background: rgba(36, 44, 130, 0.7) !important;
}

/* h5 working process step gradient */
.h5-working-process-item .process-step {
  background-image: linear-gradient(180deg, #242c82 0%, rgba(36,44,130,0) 116.09%) !important;
}

/* Service icon box gradients (h9, h10, etc.) */
.service-icon-box,
.h9-service-icon,
.h10-service-icon {
  background: linear-gradient(135deg, rgba(36,44,130,0.3) 0%, rgba(36,44,130,0) 50%, rgba(36,44,130,0.3) 100%) !important;
  border-color: rgba(36,44,130,0.15) !important;
}

/* Pulse animation override */
@-webkit-keyframes pulse3 {
  0% { -webkit-box-shadow: 0 0 0 0px rgba(36,44,130,0.4); box-shadow: 0 0 0 0px rgba(36,44,130,0.4); }
  100% { -webkit-box-shadow: 0 0 0 8px rgba(0,0,0,0); box-shadow: 0 0 0 8px rgba(0,0,0,0); }
}
@keyframes pulse3 {
  0% { -webkit-box-shadow: 0 0 0 0px rgba(36,44,130,0.4); box-shadow: 0 0 0 0px rgba(36,44,130,0.4); }
  100% { -webkit-box-shadow: 0 0 0 8px rgba(0,0,0,0); box-shadow: 0 0 0 8px rgba(0,0,0,0); }
}

/* ============================================================
   Contrast & readability fixes
   ============================================================ */

/* Ensure body text is readable */
body {
  color: #3a3f5c;
}

/* Sub-titles (section labels) — blue, good contrast on white & light bgs */
.sub-title,
.sub-title i {
  color: #242c82 !important;
}

/* Section titles — dark navy for strong contrast */
.sec-title {
  color: #111833;
}
/* Highlighted word in titles — brand blue */
.sec-title span,
.title-highlight span,
.sec-title.title-highlight span {
  color: #242c82 !important;
}

/* Description text — neutral dark grey */
.desc {
  color: #3a3f5c;
}

/* Buttons — ensure white text on blue bg */
.tj-primary-btn {
  background-color: #242c82 !important;
  color: #ffffff !important;
}
.tj-primary-btn .btn-text span {
  color: #ffffff !important;
}
.tj-primary-btn .btn-icon {
  background-color: #1a2060 !important;
}
.tj-primary-btn .btn-icon i {
  color: #ffffff !important;
}
.tj-primary-btn:hover {
  background-color: #1a2060 !important;
}

/* Dark variant button */
.tj-primary-btn.btn-dark {
  background-color: #111833 !important;
}
.tj-primary-btn.btn-dark .btn-icon {
  background-color: #ffffff !important;
}
.tj-primary-btn.btn-dark .btn-icon i {
  color: #111833 !important;
}

/* Text-link buttons */
.text-btn .btn-text span {
  color: #111833;
}
.text-btn .btn-icon {
  background-color: #111833;
}
.text-btn .btn-icon i {
  color: #ffffff;
}
.text-btn:hover .btn-icon {
  background-color: #242c82 !important;
}
.text-btn:hover .btn-text span {
  color: #5b6abf;
}

/* Text-btn inside hovered dark-bg cards (service-item, choose-box, etc.) */
.service-item:hover .text-btn .btn-text span,
.choose-box:hover .text-btn .btn-text span {
  color: #ffffff !important;
}
.service-item:hover .text-btn .btn-icon,
.choose-box:hover .text-btn .btn-icon {
  background-color: rgba(255, 255, 255, 0.2) !important;
}
.service-item:hover .text-btn .btn-icon i,
.choose-box:hover .text-btn .btn-icon i {
  color: #ffffff !important;
}
/* Direct hover on the link itself inside dark card → lighter blue */
.service-item:hover .text-btn:hover .btn-text span,
.choose-box:hover .text-btn:hover .btn-text span {
  color: #b8bfef !important;
}

/* Links */
a {
  color: #242c82;
}
a:hover {
  color: #1a2060;
}

/* Nav active / hover */
.mainmenu ul > li.current-menu-ancestor > a,
.mainmenu ul > li.current-menu-item > a,
.mainmenu ul > li:hover > a {
  color: #242c82 !important;
}
.mainmenu ul > li > .sub-menu > li:hover > a,
.mainmenu ul > li > .sub-menu > li.current-menu-item > a {
  color: #242c82 !important;
}

/* Scrollbar */
* {
  scrollbar-color: #242c82 #ffffff;
}
::-webkit-scrollbar-thumb {
  background: #242c82 !important;
}

/* Choose boxes — white bg, navy border on hover */
.choose-box {
  background-color: #ffffff;
  border-color: #d0d3de;
}
.choose-box:hover {
  border-color: #242c82 !important;
  background-color: #242c82 !important;
}
.choose-box .choose-icon i {
  color: #242c82;
}
/* Flip icon, title, desc to white on hover */
.choose-box:hover .choose-icon,
.choose-box:hover .choose-icon i {
  color: #ffffff !important;
}
.choose-box:hover .title {
  color: #ffffff !important;
}
.choose-box:hover .desc {
  color: rgba(255, 255, 255, 0.85) !important;
}

/* Service items */
.service-item .service-icon i {
  color: #242c82;
}
.service-item .title a {
  color: #111833;
}
.service-item .title a:hover {
  color: #242c82;
}

/* Countup numbers */
.countup-number,
.odometer {
  color: #242c82 !important;
}

/* CTA section */
.tj-cta-section .cta-area {
  background-color: #242c82 !important;
}
.tj-cta-section .cta-area .title {
  color: #ffffff;
}

/* h9 CTA wrapper */
.h9-cta-wrapper {
  background-color: #242c82 !important;
}
.h9-cta-wrapper .title,
.h9-cta-wrapper .desc {
  color: #ffffff !important;
}

/* Strategy items */
.strategy-item .strategy-icon {
  color: #242c82;
}
.strategy-item:hover .strategy-icon {
  background-color: #242c82 !important;
  color: #ffffff !important;
}

/* h7 about cards */
.h7-about-card-icon i {
  color: #242c82;
}

/* h8 about items */
.h8-about-item .title {
  color: #111833;
}

/* Experience box */
.experience-box {
  background-color: #242c82 !important;
  color: #ffffff !important;
}
.experience-box .sub-title {
  color: rgba(255,255,255,0.7) !important;
}
.experience-box .customers-number {
  color: #ffffff !important;
}
.experience-box .customers-text {
  color: rgba(255,255,255,0.85) !important;
}

/* Customers box */
.customers-box {
  background-color: #242c82 !important;
}
.customers-box .customers-text {
  color: #ffffff !important;
}

/* Preloader — change green dot/glow to white */
.tj-preloader .tj-preloader-ball {
  background-color: rgba(255, 255, 255, 0.15) !important;
  box-shadow: 0 0 20px 0 rgba(255, 255, 255, 0.6) !important;
}
.tj-preloader .tj-preloader-ball-shadow {
  background-color: rgba(255, 255, 255, 0.5) !important;
  box-shadow: 0 4px 20px 0 rgba(255, 255, 255, 0.4) !important;
}
.tj-preloader .tj-preloader-ball-inner {
  background-color: #ffffff !important;
  box-shadow: 0 0 15px 0 rgba(255, 255, 255, 0.5) !important;
}

/* Override teal glow SVG to blue hue */
.bg-shape-3 img {
  filter: hue-rotate(200deg) saturate(0.6) brightness(0.7) !important;
}

/* Footer — white logo via filter */
.tj-footer-section .footer-logo img {
  filter: brightness(0) invert(1);
}

/* Footer — remove divider lines */
.tj-copyright-area .copyright-content-area {
  border-top: none !important;
  border-bottom: none !important;
}
.footer-disclaimer {
  border-top: none !important;
}

/* Footer — widget titles */
.tj-footer-section .footer-widget .title,
.tj-footer-section h5 {
  color: #ffffff !important;
}

/* Footer — body text */
.tj-footer-section .footer-text p {
  color: rgba(255, 255, 255, 0.7);
}

/* Footer — links bright and readable */
.tj-footer-section a,
.footer-main-area a,
.tj-footer-section .widget-nav-menu ul li a {
  color: rgba(255, 255, 255, 0.8) !important;
}
.tj-footer-section a:hover,
.footer-main-area a:hover,
.tj-footer-section .widget-nav-menu ul li a:hover {
  color: #ffffff !important;
}

/* Footer — contact info links */
.tj-footer-section .footer-text a {
  color: rgba(255, 255, 255, 0.8) !important;
}
.tj-footer-section .footer-text a:hover {
  color: #ffffff !important;
}

/* Footer — copyright bar */
.tj-copyright-area .footer-contact a {
  color: rgba(255, 255, 255, 0.7) !important;
}
.tj-copyright-area .footer-contact a:hover {
  color: #ffffff !important;
}
.copyright-text p {
  color: rgba(255, 255, 255, 0.5);
}

/* Footer — contact icons */
.tj-copyright-area .footer-contact .icon i {
  color: rgba(255, 255, 255, 0.6);
}

/* Swiper pagination */
.swiper-pagination-bullet-active {
  background-color: #242c82 !important;
}

/* Progress bars */
.progress-bar {
  background-color: #242c82 !important;
}

/* Back to top */
#tj-back-to-top {
  background-color: #242c82 !important;
}

/* Mobile menu bar */
.menu_bar.mobile_menu_bar {
  background: #242c82 !important;
}

/* Header top bar (if visible) */
.header-top {
  background-color: #242c82 !important;
}

/* Hamburger / offcanvas contact info */
.hamburger-infos .contact-link {
  color: #3a3f5c;
}
.hamburger-infos .subtitle {
  color: #6b7089;
}

/* Team details */
.team-designation {
  color: #242c82;
}

/* Remove icon rotation on social/contact icon buttons */
.tji-icon-btn i {
  transform: rotate(0deg) !important;
  -webkit-transform: rotate(0deg) !important;
}

/* Form controls focus */
.form-control:focus {
  border-color: #242c82;
  box-shadow: 0 0 0 0.2rem rgba(36, 44, 130, 0.15);
}

/* ============================================================
   Dark-background section overrides
   .tj-service-section has bg: #111833 — all text must be light
   ============================================================ */

/* Headings inside dark sections */
.tj-service-section .sec-title,
.tj-service-section .sec-title span {
  color: #ffffff !important;
}
.tj-service-section .sub-title,
.tj-service-section .sub-title i {
  color: #8b93d4 !important;
}
.tj-service-section .desc {
  color: rgba(255, 255, 255, 0.65) !important;
}

/* Service style-2 cards on dark bg */
.service-item.style-2 .title,
.service-item.style-2 .title a {
  color: #ffffff !important;
}
.service-item.style-2 .desc {
  color: rgba(255, 255, 255, 0.6) !important;
}
.service-item.style-2 .service-icon i {
  color: #8b93d4 !important;
}
.service-item.style-2:hover {
  background-color: #1c2340 !important;
  border-color: #1c2340 !important;
}
.service-item.style-2:hover .title,
.service-item.style-2:hover .title a {
  color: #ffffff !important;
}
.service-item.style-2:hover .desc {
  color: rgba(255, 255, 255, 0.75) !important;
}
.service-item.style-2:hover .service-icon i {
  color: #ffffff !important;
}

/* Service icon boxes inside dark sections */
.tj-service-section .service-icon {
  background: linear-gradient(-45deg, rgba(139,147,212,0.3) 0%, rgba(139,147,212,0) 50%, rgba(139,147,212,0.3) 100%) !important;
  border-color: rgba(139,147,212,0.2) !important;
}

/* Service style-1 cards (dark bg cards with icons) */
.service-item.style-1 .service-icon {
  background: linear-gradient(-45deg, rgba(139,147,212,0.35) 0%, rgba(139,147,212,0.05) 50%, rgba(139,147,212,0.35) 100%) !important;
  border-color: rgba(139,147,212,0.25) !important;
}
.service-item.style-1 .service-icon i {
  color: #b8bfef !important;
}
.service-item.style-1 .service-content .title a {
  color: #ffffff !important;
}
.service-item.style-1 .service-content .title a:hover {
  color: #b8bfef !important;
}
.service-item.style-1 .service-content .desc {
  color: rgba(255, 255, 255, 0.65) !important;
}
.service-item.style-1 .text-btn .btn-text span {
  color: #ffffff !important;
}
.service-item.style-1 .text-btn .btn-icon {
  background-color: #242c82 !important;
}
.service-item.style-1 .text-btn .btn-icon i {
  color: #ffffff !important;
}

/* h8-choose section — light background override */
.tj-choose-section.h8-choose {
  background-color: #ffffff !important;
  overflow: visible !important;
}
.h8-choose-content-wrapper {
  padding-top: 60px;
  padding-bottom: 60px;
}
.h8-choose-content-wrapper .sec-title,
.h8-choose-content-wrapper .sec-title div {
  overflow: visible !important;
  clip-path: none !important;
  -webkit-clip-path: none !important;
}
.h8-choose-content-wrapper .sec-heading .sec-title {
  color: #111833 !important;
}
.h8-choose-content-wrapper .sec-heading .sub-title {
  color: #242c82 !important;
}
.h8-choose-box .choose-content .title {
  color: #111833 !important;
}
.h8-choose-box .choose-content .desc {
  color: #5a5a5a !important;
}
.h8-choose-box {
  border-bottom-color: rgba(0, 0, 0, 0.12) !important;
}
.h8-choose-box-wrapper {
  border-color: rgba(0, 0, 0, 0.12) !important;
}
.h8-choose-box .choose-content .choose-icon {
  background-color: transparent !important;
  border: 1px solid rgba(36, 44, 130, 0.3) !important;
}
.h8-choose-box .choose-content .choose-icon i {
  color: #242c82 !important;
}
.h8-choose-box:hover {
  background-color: transparent !important;
}
.h8-choose-box:hover .choose-content .title {
  color: #111833 !important;
}
.h8-choose-box:hover .choose-content .desc {
  color: #5a5a5a !important;
}
.h8-choose-box:hover .choose-content .choose-icon {
  background-color: #242c82 !important;
}
.h8-choose-box:hover .choose-content .choose-icon i {
  color: #ffffff !important;
}

/* About / Mission sections — taller images */
#mission .about-img,
.tj-about-section .about-img {
  height: 550px;
}
#mission .about-img img,
.tj-about-section .about-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Hero section — gradient fade from brand navy tint to white */
.tj-banner-section-2.h10-hero {
  background: linear-gradient(
    180deg,
    #adb8e0 0%,
    #c5cdef 35%,
    #dfe4f5 65%,
    #ffffff 100%
  ) !important;
}

/* Hero banner description width */
.banner-desc {
  max-width: 600px !important;
}

/* Hero banner logo */
.hero-banner-logo {
  margin-bottom: 20px;
}

/* Logo sizing — 50% larger than template defaults */
.site_logo .logo {
  max-width: 204px !important;
}
.footer-logo {
  max-width: 225px !important;
}
.hamburger_logo .mobile_logo img {
  max-width: 204px !important;
}

/* h9-cta section — proper padding and text styling */
.h9-cta-section .cta-content {
  padding: 80px 0 !important;
}
.h9-cta-section .cta-content .title {
  color: #ffffff !important;
  font-size: 48px !important;
  line-height: 1.2 !important;
  margin-bottom: 0 !important;
}
.h9-cta-section .cta-content .title::before {
  display: none !important;
}

/* Checkmark bullet style for list-items */
.list-items.style-2 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding-left: 0 !important;
  list-style: none;
}
.list-items.style-2 li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  font-size: 16px;
  color: #2d2d2d;
}
.list-items.style-2 li i.fa-circle-check {
  color: #242c82 !important;
  font-size: 20px;
  flex-shrink: 0;
}

/* Service style-3 (stacked rows on light bg) — dark heading text */
.tj-service-section.service-3 .sec-title {
  color: #111833 !important;
}
.tj-service-section.service-3 .sub-title {
  color: #242c82 !important;
}
.tj-service-section.service-3 .sec-title span {
  color: #242c82 !important;
}
.tj-service-section.service-3 .service-item.style-3 .title a {
  color: #111833 !important;
}
.tj-service-section.service-3 .service-item.style-3 .desc {
  color: #5a5a5a !important;
}
.tj-service-section.service-3 .service-item.style-3:hover .title a,
.tj-service-section.service-3 .service-item.style-3:hover .desc {
  color: #ffffff !important;
}

/* Force equal-height service-2 cards */
.service-item.style-2 {
  height: 100%;
  min-height: 220px;
  display: flex;
  align-items: center;
}

/* Countup section spacing fix */
.tj-countup-section {
  margin-top: 0;
  margin-bottom: 0;
}

/* Hero video styles */
.hero-video-wrapper {
  position: relative;
  width: 100%;
  height: 100vh;
  min-height: 600px;
  overflow: hidden;
}

.hero-video-wrapper video {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  transform: translate(-50%, -50%);
  object-fit: cover;
  z-index: 0;
}

.hero-video-wrapper .hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, rgba(36, 44, 130, 0.85) 0%, rgba(26, 32, 96, 0.75) 100%);
  z-index: 1;
}

.hero-video-wrapper .hero-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;
  text-align: center;
  padding: 0 15px;
}

.hero-video-wrapper .hero-content h1 {
  color: #fff;
  font-size: clamp(2.5rem, 5vw, 4.5rem);
  font-weight: 700;
  margin-bottom: 20px;
  line-height: 1.15;
  max-width: 900px;
}

.hero-video-wrapper .hero-content h1 span {
  color: rgba(255, 255, 255, 0.7);
}

.hero-video-wrapper .hero-content p {
  color: rgba(255, 255, 255, 0.85);
  font-size: clamp(1rem, 2vw, 1.25rem);
  max-width: 650px;
  margin-bottom: 35px;
  line-height: 1.7;
}

.hero-video-wrapper .hero-content .hero-btns {
  display: flex;
  gap: 15px;
  flex-wrap: wrap;
  justify-content: center;
}

.hero-video-wrapper .hero-content .hero-btns .tj-primary-btn {
  background-color: #fff;
  color: var(--usf-primary);
}

.hero-video-wrapper .hero-content .hero-btns .tj-primary-btn .btn-text span {
  color: var(--usf-primary);
}

.hero-video-wrapper .hero-content .hero-btns .tj-primary-btn .btn-icon i {
  color: var(--usf-primary);
}

.hero-video-wrapper .hero-content .hero-btns .btn-outline {
  border: 2px solid rgba(255, 255, 255, 0.5);
  background: transparent;
  color: #fff;
}

.hero-video-wrapper .hero-content .hero-btns .btn-outline .btn-text span {
  color: #fff;
}

.hero-video-wrapper .hero-content .hero-btns .btn-outline .btn-icon i {
  color: #fff;
}

.hero-video-wrapper .hero-scroll-down {
  position: absolute;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  color: #fff;
  text-align: center;
  font-size: 14px;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.hero-video-wrapper .hero-scroll-down span {
  display: block;
  margin-top: 8px;
  animation: scrollBounce 2s infinite;
}

@keyframes scrollBounce {
  0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
  40% { transform: translateY(10px); }
  60% { transform: translateY(5px); }
}

/* Hero fallback for mobile */
.hero-video-fallback {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url('../images/hero/hero-img.webp') center/cover no-repeat;
  z-index: 0;
}

@media (max-width: 768px) {
  .hero-video-wrapper video {
    display: none;
  }
  .hero-video-fallback {
    display: block;
  }
}

/* Disclaimer section */
.usf-disclaimer-section {
  background-color: var(--usf-primary-light);
  padding: 40px 0;
}

.usf-disclaimer-section .disclaimer-text {
  font-size: 12px;
  line-height: 1.8;
  color: var(--usf-text-light);
}

.usf-disclaimer-section .disclaimer-text p {
  margin-bottom: 10px;
}

/* Breadcrumb override */
.tj-breadcrumb-section {
  background-color: var(--usf-primary);
}

/* Section alternating backgrounds */
.usf-section-light {
  background-color: var(--usf-off-white);
}

.usf-section-dark {
  background-color: var(--usf-primary);
}

/* US Finance specific service items */
.service-item.style-1 .service-icon i {
  color: var(--usf-primary);
}

/* Countup section */
.tj-countup-section .countup-number {
  color: var(--usf-primary);
}

/* CTA section override */
.tj-cta-section .cta-area {
  background-color: var(--usf-primary);
}

/* Team details */
.team-details-area .social-links a:hover {
  background-color: var(--usf-primary);
}

/* Contact form */
.contact-form .tj-primary-btn {
  background-color: var(--usf-primary);
}

/* Footer logo sizing */
.footer-logo img {
  max-height: 50px;
  width: auto;
}

/* Header logo sizing */
.site_logo img {
  max-height: 45px;
  width: auto;
}

/* Accordion / FAQ override */
.tj-faq .accordion-item.active .faq-title,
.tj-faq .faq-title:not(.collapsed) {
  color: var(--usf-primary);
}

/* Progress bar colors */
.progress-bar {
  background-color: var(--usf-primary);
}

/* Link colors */
a:hover {
  color: var(--usf-primary);
}

/* Pagination active */
.swiper-pagination-bullet-active {
  background-color: var(--usf-primary) !important;
}

/* Strategy section */
.h5-strategy .strategy-item:hover .strategy-icon {
  background-color: var(--usf-primary);
}

/* Choose section h8 */
.h8-choose .choose-item:hover {
  border-color: var(--usf-primary);
}

/* Financing capabilities list */
.usf-capabilities-list {
  list-style: none;
  padding: 0;
  margin: 20px 0;
}

.usf-capabilities-list li {
  padding: 8px 0;
  padding-left: 25px;
  position: relative;
  color: var(--usf-text);
  font-size: 16px;
}

.usf-capabilities-list li::before {
  content: '\f00c';
  font-family: 'Font Awesome 6 Pro';
  position: absolute;
  left: 0;
  color: var(--usf-primary);
  font-weight: 300;
}

/* Page header / breadcrumb for subpages */
.usf-page-header {
  background: linear-gradient(135deg, var(--usf-primary) 0%, var(--usf-primary-dark) 100%);
  padding: 140px 0 80px;
  text-align: center;
}

.usf-page-header h1 {
  color: #fff;
  font-size: 3rem;
  font-weight: 700;
  margin-bottom: 15px;
}

/* Page header banners — brand blue instead of teal */
.tj-page-header {
  background-color: #111833 !important;
  background-blend-mode: normal !important;
  position: relative;
}
.tj-page-header::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(17, 24, 51, 0.75);
  z-index: 0;
}
.tj-page-header > * {
  position: relative;
  z-index: 1;
}
.page-header-overlay {
  display: none !important;
}

/* Broker Programs section — bottom spacing */
#broker-programs {
  margin-bottom: 60px;
}

/* About page — values heading on one line */
.tj-choose-section .sec-title {
  white-space: nowrap;
}
.tj-page-link span i {
  color: #a8b0d4 !important;
}

/* Contact page — equal height info tiles */
.tj-contact-area .row-gap-4 {
  align-items: stretch !important;
}
.tj-contact-area .row-gap-4 > [class*="col"] {
  display: flex;
}
.tj-contact-area .contact-item.style-2 {
  width: 100%;
  height: 100%;
}

/* ---- Video tile play overlay ---- */
.usf-video-tile {
  cursor: pointer;
  position: relative;
}
.usf-play-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(17, 24, 51, 0.25);
  transition: background 0.3s ease;
  z-index: 2;
}
.usf-video-tile:hover .usf-play-overlay {
  background: rgba(17, 24, 51, 0.4);
}
.usf-play-btn {
  width: 60px;
  height: 60px;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  transition: transform 0.3s ease, background 0.3s ease;
}
.usf-video-tile:hover .usf-play-btn {
  transform: scale(1.1);
  background: #ffffff;
}
.usf-play-btn::after {
  content: '';
  display: block;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 10px 0 10px 18px;
  border-color: transparent transparent transparent #242c82;
  margin-left: 4px;
}

/* ---- Bento Stats Grid ---- */
.usf-bento-grid {
  padding: 80px 0;
}
.usf-bento-grid .bento-row {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 20px;
}
.usf-bento-grid .bento-row + .bento-row {
  margin-top: 20px;
}
.usf-bento-grid .bento-card {
  background: #ffffff;
  border-radius: 16px;
  overflow: hidden;
  position: relative;
}
/* Stat card */
.usf-bento-grid .bento-stat {
  padding: 32px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 220px;
}
.usf-bento-grid .bento-stat .stat-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.usf-bento-grid .bento-stat .stat-label {
  font-size: 15px;
  font-weight: 500;
  color: #5a5a5a;
}
.usf-bento-grid .bento-stat .stat-step {
  font-size: 15px;
  font-weight: 600;
  color: #bbb;
}
.usf-bento-grid .bento-stat .stat-value {
  font-size: 64px;
  font-weight: 700;
  color: #111833;
  line-height: 1;
  letter-spacing: -0.03em;
}
.usf-bento-grid .bento-stat .stat-value .stat-suffix {
  font-size: 40px;
  color: #242c82;
}
.usf-bento-grid .bento-stat .stat-desc {
  font-size: 15px;
  color: #5a5a5a;
  margin-top: 8px;
}
/* Heading card */
.usf-bento-grid .bento-heading {
  padding: 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.usf-bento-grid .bento-heading .sub-title {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: #242c82;
  background: rgba(36, 44, 130, 0.08);
  display: inline-block;
  padding: 6px 14px;
  border-radius: 4px;
  margin-bottom: 20px;
  width: fit-content;
}
.usf-bento-grid .bento-heading h2 {
  font-size: 38px;
  font-weight: 500;
  color: #111833;
  line-height: 1.2;
  letter-spacing: -0.03em;
  margin-bottom: 24px;
}
.usf-bento-grid .bento-heading h2 span {
  color: #242c82;
}
/* Video card */
.usf-bento-grid .bento-video {
  position: relative;
  cursor: pointer;
  min-height: 220px;
}
.usf-bento-grid .bento-video img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.usf-bento-grid .bento-video .play-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 64px;
  height: 64px;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s ease, background 0.3s ease;
  z-index: 3;
  pointer-events: none;
}
.usf-bento-grid .bento-video .play-btn::after {
  content: '';
  display: block;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 10px 0 10px 18px;
  border-color: transparent transparent transparent #242c82;
  margin-left: 3px;
}
.usf-bento-grid .bento-video:hover .play-btn {
  transform: translate(-50%, -50%) scale(1.1);
  background: #ffffff;
}
.usf-bento-grid .bento-video::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(17, 24, 51, 0.2);
  transition: background 0.3s ease;
  pointer-events: none;
}
.usf-bento-grid .bento-video:hover::after {
  background: rgba(17, 24, 51, 0.35);
}
/* Image card */
.usf-bento-grid .bento-img {
  min-height: 220px;
}
.usf-bento-grid .bento-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Customer/CTA card */
.usf-bento-grid .bento-cta {
  background: #242c82;
  padding: 32px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 220px;
  position: relative;
  overflow: hidden;
}
.usf-bento-grid .bento-cta::before {
  content: '';
  position: absolute;
  top: -40px;
  right: -40px;
  width: 120px;
  height: 120px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 50%;
}
.usf-bento-grid .bento-cta h6 {
  font-size: 20px;
  font-weight: 500;
  color: #ffffff;
  line-height: 1.4;
  font-style: italic;
}
.usf-bento-grid .bento-cta .text-btn {
  color: #ffffff;
}
/* Grid spans — row 1 */
.bento-col-4 { grid-column: span 4; }
.bento-col-5 { grid-column: span 5; }
.bento-col-3 { grid-column: span 3; }
/* Responsive */
@media (max-width: 991px) {
  .usf-bento-grid .bento-row {
    grid-template-columns: repeat(2, 1fr);
  }
  .bento-col-4, .bento-col-5, .bento-col-3 {
    grid-column: span 1;
  }
  .usf-bento-grid .bento-heading h2 {
    font-size: 30px;
  }
}
@media (max-width: 575px) {
  .usf-bento-grid .bento-row {
    grid-template-columns: 1fr;
  }
}

/* YouTube modal */
.usf-video-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0, 0, 0, 0.85);
  align-items: center;
  justify-content: center;
}
.usf-video-modal.active {
  display: flex;
}
.usf-video-modal .modal-inner {
  position: relative;
  width: 90%;
  max-width: 900px;
  aspect-ratio: 16 / 9;
}
.usf-video-modal .modal-inner iframe {
  width: 100%;
  height: 100%;
  border: none;
  border-radius: 12px;
}
.usf-video-modal .modal-close {
  position: absolute;
  top: -40px;
  right: 0;
  width: 36px;
  height: 36px;
  background: rgba(255, 255, 255, 0.15);
  border: none;
  border-radius: 50%;
  color: #fff;
  font-size: 20px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
}
.usf-video-modal .modal-close:hover {
  background: rgba(255, 255, 255, 0.3);
}

.usf-page-header .breadcrumb-nav {
  color: rgba(255, 255, 255, 0.7);
  font-size: 16px;
}

.usf-page-header .breadcrumb-nav a {
  color: rgba(255, 255, 255, 0.85);
  text-decoration: none;
}

.usf-page-header .breadcrumb-nav a:hover {
  color: #fff;
}