/*
  TSQ Soft brand override.
  Loaded after main.css — redeclaring these :root custom properties here
  re-themes the whole eNno template without editing the vendor file directly,
  so template updates can still be dropped in cleanly.
*/
:root {
  --heading-color: #16233B;      /* navy, from the logo */
  --accent-color: #E8720C;       /* orange, from the logo */
  --contrast-color: #ffffff;
}

/* main.css sets the homepage hero to min-height:70vh with vertical
   centering (align-items:center) plus 120px top padding — on a tall
   browser window that leaves a large empty gap above the heading before
   the content centers. Tightened so the heading sits close under the
   header instead. */
.hero {
  min-height: 0;
  padding: 25px 0 40px 0;
}

/* main.css only applies the floating up-down animation when .animated is
   inside .hero. Made unscoped so any picture site-wide can float the same
   way just by carrying the .animated class, not only the hero image. */
.animated {
  animation: up-down 2s ease-in-out infinite alternate-reverse both;
}

:root {
  --nav-color: #16233B;
  --nav-hover-color: #E8720C;
  --nav-dropdown-color: #16233B;
  --nav-dropdown-hover-color: #E8720C;
}

.accent-background {
  --background-color: #E8720C;
  --default-color: #ffffff;
  --heading-color: #ffffff;
  --surface-color: #F28C33;
  --contrast-color: #ffffff;
}

/* Third brand color (green, from the logo) reserved for small highlights only —
   checkmarks, badges — not a second competing accent. */
.service-details .service-details-content ul li i,
.about .content ul li i,
.checklist-item i {
  color: #2E9E56;
}

/* main.css only styles .btn-get-started when it's inside .hero, but the
   site reuses that same class as its general CTA button on Services pages,
   Products pages, the lower sections of the homepage, and the Contact form
   submit button — all outside any .hero wrapper. Without this, those buttons
   render as plain unstyled links/buttons instead of the theme's orange pill. */
.btn-get-started {
  color: var(--contrast-color);
  background: var(--accent-color);
  font-family: var(--heading-font);
  font-weight: 400;
  font-size: 15px;
  letter-spacing: 1px;
  display: inline-block;
  padding: 10px 28px 12px 28px;
  border: none;
  border-radius: 50px;
  transition: 0.5s;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.1);
  cursor: pointer;
}

.btn-get-started:hover {
  color: var(--contrast-color);
  background: color-mix(in srgb, var(--accent-color), transparent 15%);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.1);
}

.header {
  min-height: 130px;
}

.header .logo img {
  max-height: 116px;
}

/* The tagline ("Digital Transformation & Beyond") is baked into logo.png
   alongside the wordmark, so it only gets legible once the logo itself is
   scaled up — 88px made it unreadably small. Keep the header logo smaller
   on narrow screens so it doesn't crowd the mobile nav toggle. */
@media (max-width: 768px) {
  .header {
    min-height: 96px;
  }

  .header .logo img {
    max-height: 76px;
  }
}

.footer-about img {
  max-height: 76px;
}

/* Product/service detail hero images render at native resolution (up to
   1536px tall) with no cap in main.css — constrain and center them. */
.service-details .services-img {
  display: block;
  max-height: 420px;
  width: auto;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
}

.services section img.img-fluid[style*="max-height"] {
  max-width: 100%;
}

/* Google Translate widget — hide the default Google chrome (top banner,
   iframe borders) so only the plain language dropdown shows in the header. */
.goog-te-banner-frame.skiptranslate,
body > .skiptranslate:first-child {
  display: none !important;
}
body {
  top: 0 !important;
}
.google-translate-widget {
  display: flex;
  align-items: center;
  margin-left: 22px;
  flex-shrink: 0;
}
.google-translate-widget .goog-te-gadget {
  font-family: var(--nav-font) !important;
  font-size: 0 !important;
  line-height: 1;
}
.google-translate-widget .goog-te-gadget-simple {
  background: transparent;
  border: 1px solid rgba(22, 35, 59, 0.2);
  border-radius: 50px;
  padding: 6px 14px;
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  cursor: pointer;
}
.google-translate-widget .goog-te-gadget-simple:hover {
  border-color: var(--accent-color);
}
.google-translate-widget .goog-te-gadget-simple .goog-te-menu-value span {
  font-size: 13px;
  color: var(--nav-color);
}
.google-translate-widget img {
  display: none !important;
}
@media (max-width: 1200px) {
  .google-translate-widget {
    display: none;
  }
}