/*
---------------------------------------------
Update Systems — site-specific styles
Loaded after templatemo-space-dynamic.css.
All classes are namespaced usi-* so the template CSS stays untouched.
Brand: navy #14202C · blue #214F82 · gray #97AFC6
---------------------------------------------
*/

:root {
  --usi-navy: #14202C;
  --usi-blue: #214F82;
  --usi-gray: #97AFC6;
  --usi-ink: #2a2a2a;
  --usi-line: #e4eaf1;
  --usi-tint: #f5f8fb;
  --usi-gradient: linear-gradient(105deg, #214F82 0%, #14202C 100%);
}

/*
---------------------------------------------
Buttons
The template markup uses .main-button throughout but never defines it, so every
call-to-action rendered as a plain text link. This supplies the missing style.
(form#contact button keeps the template's own styling — higher specificity.)
---------------------------------------------
*/
a.main-button {
  display: inline-block;
  padding: 13px 30px;
  border-radius: 25px;
  background: var(--usi-gradient);
  color: #fff !important;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.25px;
  transition: all 0.3s ease 0s;
}

a.main-button:hover {
  background: var(--usi-navy);
  box-shadow: 0 10px 24px rgba(20, 32, 44, 0.22);
}

/*
---------------------------------------------
Header logo (mark + wordmark)
---------------------------------------------
*/
/* The template centres the logo with `line-height: 100px` on a single text node,
   which stops working once the logo is a flex row of mark + wordmark: the
   line-height no longer sets the box height, so a hardcoded `margin-top: 20px`
   was standing in for it and left the logo ~7px above the nav's centre line
   (the nav sits at 30px + 40px tall in a 100px header, so its centre is 50px).
   Matching the logo's height to the header and centring instead lines the two
   up exactly, and keeps doing so when the sticky header shrinks to 80px. */
.header-area .main-nav .logo {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 100px;
  line-height: 1.1;
  letter-spacing: 0;
  text-transform: none;
}

.background-header .main-nav .logo {
  height: 80px;
}

.header-area .main-nav .logo img.usi-logo-mark {
  width: auto;
  height: 46px;
  transition: height 0.3s ease 0s;
  /* The artwork has a white matte; multiply drops it into the light header
     whether the bar is #fafafa (top) or #fff (scrolled). */
  mix-blend-mode: multiply;
}

.background-header .main-nav .logo img.usi-logo-mark {
  height: 38px;
}

.header-area .main-nav .logo .usi-logo-text {
  display: block;
  font-size: 22px;
  font-weight: 700;
  color: var(--usi-blue);
  line-height: 1.1;
  letter-spacing: 0.5px;
  text-transform: none;
}

.header-area .main-nav .logo .usi-logo-text small {
  display: block;
  font-size: 11px;
  font-weight: 500;
  color: var(--usi-gray);
  letter-spacing: 4px;
  text-transform: uppercase;
}

/* Six items no longer fit the template's generous nav padding on mid-size screens. */
@media (min-width: 992px) and (max-width: 1300px) {
  .header-area .main-nav .nav li {
    padding-left: 12px;
    padding-right: 12px;
  }
  .header-area .main-nav .nav li:last-child {
    padding-left: 20px;
  }
}

/*
---------------------------------------------
Hero slider
---------------------------------------------
*/
.main-banner .left-content h1 {
  font-size: 48px;
  font-weight: 700;
  color: var(--usi-ink);
  line-height: 64px;
}

.main-banner .left-content h1 em {
  color: var(--usi-blue);
  font-style: normal;
}

.main-banner .left-content h1 span {
  color: var(--usi-navy);
}

/* The template ships pink decorative blobs on the banner; they clash with the
   navy/blue brand palette, so they stay hidden. */
.main-banner:before,
.main-banner:after {
  display: none;
}

/* The slider carries its own breathing room, so the banner needs less. */
.main-banner {
  padding: 200px 0 60px 0;
}

/* The template's 45px gutter leaves the headline almost touching the slide
   image; the copy column reads better with more room beside it. The template
   already clears the margin below 992px, where the columns stack. */
@media (min-width: 993px) {
  .main-banner .left-content {
    margin-right: 80px;
  }
}

/* Space before the hero copy so the headline is not flush against the column
   edge. Modest on small screens, where horizontal room is scarce. */
.main-banner .left-content {
  padding-left: 15px;
}

@media (min-width: 993px) {
  .main-banner .left-content {
    padding-left: 40px;
  }
}

/* owl.css hides .owl-carousel until the script adds .owl-loaded, so before the
   JS runs the hero has no height at all and the whole page lurches down when
   the slider appears. Reserving the height up front removes that jump, and
   holding every slide to the same height stops it recurring on each slide
   change (the three slides have different amounts of copy). */
.usi-hero-slider {
  min-height: 620px;
}

.usi-hero-slider .usi-hero-slide {
  padding: 10px 0 20px 0;
}

@media (min-width: 992px) {
  .usi-hero-slider {
    min-height: 520px;
  }
  .usi-hero-slider .usi-hero-slide {
    min-height: 490px;
  }
}

/* owl.css sets `.owl-item img { width: 100% }`, but the markup also carries
   height="560". With no height of its own that attribute wins, so the photo was
   being drawn 636x560 from a 760x560 source — squashed 16% horizontally.
   height:auto hands the sizing back to CSS; aspect-ratio keeps the box reserved
   before the image loads, and object-fit guards any future off-ratio artwork. */
.usi-hero-slider .usi-hero-image picture {
  display: block;
}

.usi-hero-slider .usi-hero-image img {
  width: 100%;
  height: auto;
  aspect-ratio: 760 / 560;
  object-fit: cover;
  border-radius: 24px;
  box-shadow: 0 24px 60px rgba(20, 32, 44, 0.18);
}

/*
The project ships only Owl's core stylesheet (assets/css/owl.css); the companion
owl.theme.default.css was never included. That leaves .owl-dot and the two nav
buttons with no box of their own, and core CSS on top of that forces
`padding: 0 !important` — so the dots' clickable area collapsed to the 26x6px
bar you can see, and the arrows would have rendered as bare glyphs. Everything
below supplies what the missing theme file would have.
*/
.usi-hero-slider .owl-dots {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  min-height: 46px;
  margin-top: 8px;
}

/* The `!important` is needed to beat owl.css's own `padding: 0 !important` on
   `.owl-carousel button.owl-dot`; this selector is the more specific of the two. */
.usi-hero-slider .owl-dots .owl-dot {
  display: inline-block;
  padding: 20px 4px !important;
  background: none;
  border: 0;
  cursor: pointer;
}

.usi-hero-slider .owl-dots .owl-dot span {
  display: block;
  width: 26px;
  height: 6px;
  border-radius: 3px;
  background: var(--usi-line);
  transition: all 0.3s ease 0s;
}

.usi-hero-slider .owl-dots .owl-dot:hover span {
  background: var(--usi-gray);
}

.usi-hero-slider .owl-dots .owl-dot.active span {
  width: 44px;
  background: var(--usi-gradient);
}

/* Ring the bar itself, not the (deliberately oversized) 46px hit area. */
.usi-hero-slider .owl-dots .owl-dot:focus-visible {
  outline: none;
}

.usi-hero-slider .owl-dots .owl-dot:focus-visible span {
  outline: 2px solid var(--usi-blue);
  outline-offset: 3px;
}

/* Arrows sit on the dots' baseline, opposite the dots, so they overlay no copy.
   Hidden below 992px, where the swipe gesture is the control instead. */
.usi-hero-slider .owl-nav {
  display: none;
}

.usi-hero-slider .owl-nav.disabled {
  display: none;
}

@media (min-width: 992px) {
  .usi-hero-slider .owl-nav,
  .usi-hero-slider .owl-nav.disabled {
    display: flex;
    align-items: center;
    gap: 10px;
    position: absolute;
    inset-inline-end: 0;
    bottom: 0;
    height: 46px;
    margin: 0;
    z-index: 3;
  }

  .usi-hero-slider .owl-nav button.owl-prev,
  .usi-hero-slider .owl-nav button.owl-next {
    width: 44px;
    height: 44px;
    padding: 0 !important;
    border: 1px solid var(--usi-line) !important;
    border-radius: 50%;
    background: #fff !important;
    color: var(--usi-navy) !important;
    font-size: 22px;
    line-height: 42px;
    text-align: center;
    box-shadow: 0 6px 18px rgba(20, 32, 44, 0.10);
    transition: all 0.3s ease 0s;
  }

  .usi-hero-slider .owl-nav button.owl-prev:hover,
  .usi-hero-slider .owl-nav button.owl-next:hover {
    background: var(--usi-gradient) !important;
    border-color: transparent !important;
    color: #fff !important;
    box-shadow: 0 10px 24px rgba(20, 32, 44, 0.22);
  }

  .usi-hero-slider .owl-nav button:focus-visible {
    outline: 2px solid var(--usi-blue);
    outline-offset: 2px;
  }
}

/* On an RTL page Owl reverses the track but keeps the glyphs as they are, so
   the chevrons have to be mirrored to still point the way they travel. */
.usi-hero-slider.owl-rtl .owl-nav button i {
  display: inline-block;
  transform: scaleX(-1);
}

/* Visually hidden, still read out — used for the arrow buttons' labels. */
.usi-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 991px) {
  .main-banner .left-content h1 {
    font-size: 32px;
    line-height: 46px;
  }
  .usi-hero-slider .usi-hero-image {
    margin-top: 30px;
  }
  .usi-hero-slider .owl-dots {
    justify-content: center;
  }
}

/*
---------------------------------------------
Page hero for the inner pages
---------------------------------------------
*/
.usi-page-hero {
  margin-top: 100px;
  padding: 70px 0 60px 0;
  background: var(--usi-gradient);
  position: relative;
  overflow: hidden;
}

.usi-page-hero:after {
  content: '';
  position: absolute;
  right: -80px;
  top: -80px;
  width: 320px;
  height: 320px;
  border-radius: 50%;
  border: 40px solid rgba(255, 255, 255, 0.06);
}

.usi-page-hero h1 {
  position: relative;
  z-index: 2;
  color: #fff;
  font-size: 38px;
  font-weight: 700;
  letter-spacing: 0.25px;
}

.usi-page-hero p {
  position: relative;
  z-index: 2;
  color: rgba(255, 255, 255, 0.85);
  margin: 14px 0 0 0;
  max-width: 720px;
}

.usi-breadcrumb {
  position: relative;
  z-index: 2;
  margin-bottom: 12px;
  font-size: 13px;
  letter-spacing: 0.5px;
  color: rgba(255, 255, 255, 0.7);
}

.usi-breadcrumb a {
  color: #fff;
}

@media (max-width: 767px) {
  .usi-page-hero h1 {
    font-size: 28px;
  }
}

/*
---------------------------------------------
Generic section helpers
---------------------------------------------
*/
.usi-section {
  padding: 100px 0;
  /* Keeps #solutions / #services anchor targets clear of the fixed header. */
  scroll-margin-top: 110px;
}

.usi-section-tint {
  background: var(--usi-tint);
}

.usi-section-heading {
  margin-bottom: 50px;
}

.usi-section-heading h2 {
  font-size: 30px;
  font-weight: 700;
  color: var(--usi-ink);
  line-height: 44px;
  letter-spacing: 0.25px;
}

.usi-section-heading h2 em {
  font-style: normal;
  color: var(--usi-blue);
}

.usi-section-heading h2 span {
  color: var(--usi-navy);
}

.usi-section-heading p {
  margin-top: 16px;
  margin-bottom: 0;
}

.usi-eyebrow {
  display: inline-block;
  margin-bottom: 14px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--usi-blue);
}

/*
---------------------------------------------
Cards (solutions, services, values)
---------------------------------------------
*/
.usi-card {
  height: 100%;
  padding: 34px 30px;
  background: #fff;
  border: 1px solid var(--usi-line);
  border-radius: 20px;
  transition: all 0.3s ease 0s;
}

.usi-card:hover {
  transform: translateY(-6px);
  border-color: transparent;
  box-shadow: 0 18px 40px rgba(20, 32, 44, 0.12);
}

.usi-card .usi-card-icon {
  width: 62px;
  height: 62px;
  margin-bottom: 22px;
  border-radius: 16px;
  background: var(--usi-gradient);
  color: #fff;
  font-size: 24px;
  line-height: 62px;
  text-align: center;
}

.usi-card h3,
.usi-card h4 {
  font-size: 19px;
  font-weight: 700;
  color: var(--usi-navy);
  margin-bottom: 12px;
  line-height: 28px;
}

.usi-card p {
  margin-bottom: 0;
}

.usi-card ul {
  margin: 14px 0 0 0;
  padding: 0;
  list-style: none;
}

.usi-card ul li {
  position: relative;
  padding-left: 22px;
  font-size: 14px;
  line-height: 28px;
  color: var(--usi-ink);
}

.usi-card ul li:before {
  font-family: FontAwesome;
  content: "\f00c";
  position: absolute;
  left: 0;
  top: 0;
  font-size: 12px;
  color: var(--usi-blue);
}

.usi-card-grid > [class*="col-"] {
  margin-bottom: 30px;
}

/* Value cards: compact, centred, numbered feel */
.usi-value {
  height: 100%;
  padding: 30px 24px;
  text-align: center;
  background: #fff;
  border: 1px solid var(--usi-line);
  border-radius: 20px;
  transition: all 0.3s ease 0s;
}

.usi-value:hover {
  background: var(--usi-gradient);
  border-color: transparent;
}

.usi-value:hover h4,
.usi-value:hover p,
.usi-value:hover i {
  color: #fff;
}

.usi-value i {
  font-size: 30px;
  color: var(--usi-blue);
  margin-bottom: 16px;
  display: block;
  transition: all 0.3s ease 0s;
}

.usi-value h4 {
  font-size: 18px;
  font-weight: 700;
  color: var(--usi-navy);
  margin-bottom: 10px;
  transition: all 0.3s ease 0s;
}

.usi-value p {
  font-size: 14px;
  line-height: 26px;
  margin-bottom: 0;
  transition: all 0.3s ease 0s;
}

/*
---------------------------------------------
Vision & mission
---------------------------------------------
*/
.usi-vm {
  height: 100%;
  padding: 44px 40px;
  border-radius: 24px;
  background: var(--usi-gradient);
  color: #fff;
}

.usi-vm.usi-vm-alt {
  background: #fff;
  border: 1px solid var(--usi-line);
}

.usi-vm i {
  font-size: 34px;
  margin-bottom: 20px;
  display: block;
}

.usi-vm h3 {
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 18px;
}

.usi-vm p,
.usi-vm li {
  color: rgba(255, 255, 255, 0.9);
  font-size: 15px;
  line-height: 30px;
}

.usi-vm.usi-vm-alt i,
.usi-vm.usi-vm-alt h3 {
  color: var(--usi-navy);
}

.usi-vm.usi-vm-alt p,
.usi-vm.usi-vm-alt li {
  color: var(--usi-ink);
}

.usi-vm ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.usi-vm ul li {
  position: relative;
  padding-left: 26px;
  margin-bottom: 8px;
}

.usi-vm ul li:before {
  font-family: FontAwesome;
  content: "\f0da";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--usi-blue);
}

.usi-vm.usi-vm-alt ul li:before {
  color: var(--usi-blue);
}

/*
---------------------------------------------
Why choose us
---------------------------------------------
*/
.usi-feature {
  display: flex;
  gap: 20px;
  margin-bottom: 34px;
}

.usi-feature i {
  flex: 0 0 auto;
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: rgba(33, 79, 130, 0.09);
  color: var(--usi-blue);
  font-size: 20px;
  line-height: 52px;
  text-align: center;
}

.usi-feature h4 {
  font-size: 18px;
  font-weight: 700;
  color: var(--usi-navy);
  margin-bottom: 8px;
}

.usi-feature p {
  margin-bottom: 0;
}

/*
---------------------------------------------
Logo grids (clients & partners)
---------------------------------------------
*/
.usi-logo-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
}

.usi-logo-grid.usi-logo-grid-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.usi-logo-tile {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 130px;
  padding: 22px;
  background: #fff;
  border: 1px solid var(--usi-line);
  border-radius: 16px;
  transition: all 0.3s ease 0s;
}

.usi-logo-tile:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 34px rgba(20, 32, 44, 0.1);
}

.usi-logo-tile img {
  width: auto;
  max-width: 100%;
  max-height: 84px;
  object-fit: contain;
}

@media (max-width: 991px) {
  .usi-logo-grid,
  .usi-logo-grid.usi-logo-grid-4 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 575px) {
  .usi-logo-grid,
  .usi-logo-grid.usi-logo-grid-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .usi-logo-tile {
    height: 104px;
    padding: 14px;
  }
}

/* Auto-scrolling partner strip on the home page */
.usi-partner-slider .owl-item {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 90px;
}

.usi-partner-slider .owl-item img {
  width: auto;
  max-width: 90%;
  max-height: 60px;
  object-fit: contain;
  filter: grayscale(100%);
  opacity: 0.65;
  transition: all 0.3s ease 0s;
}

.usi-partner-slider .owl-item img:hover {
  filter: none;
  opacity: 1;
}

.usi-partner-slider .owl-nav,
.usi-partner-slider .owl-dots {
  display: none;
}

/*
---------------------------------------------
Contact page extras
---------------------------------------------
*/
.usi-contact-card {
  display: flex;
  gap: 18px;
  padding: 24px;
  margin-bottom: 20px;
  background: #fff;
  border: 1px solid var(--usi-line);
  border-radius: 16px;
}

.usi-contact-card i {
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: var(--usi-gradient);
  color: #fff;
  font-size: 18px;
  line-height: 48px;
  text-align: center;
}

.usi-contact-card h4 {
  font-size: 16px;
  font-weight: 700;
  color: var(--usi-navy);
  margin-bottom: 6px;
}

.usi-contact-card p,
.usi-contact-card a {
  font-size: 15px;
  line-height: 26px;
  color: var(--usi-ink);
  margin-bottom: 0;
}

.usi-contact-card a:hover {
  color: var(--usi-blue);
}

.usi-map {
  border: 1px solid var(--usi-line);
  border-radius: 20px;
  overflow: hidden;
  line-height: 0;
}

.usi-map iframe {
  width: 100%;
  height: 380px;
  border: 0;
  display: block;
}

.usi-alert {
  padding: 16px 20px;
  border-radius: 14px;
  margin-bottom: 24px;
  font-weight: 500;
  font-size: 15px;
}

.usi-alert-success {
  background: #e7f6ee;
  color: #14663f;
  border: 1px solid #b7e2cb;
}

.usi-alert-error {
  background: #fdecec;
  color: #98211f;
  border: 1px solid #f4c3c2;
}

.usi-alert a {
  color: inherit;
  font-weight: 700;
  text-decoration: underline !important;
}

/* Form field labels the template does not provide */
.usi-form-note {
  font-size: 13px;
  color: #6a7a8c;
  margin: 6px 0 18px 0;
}

/*
---------------------------------------------
Floating WhatsApp button
---------------------------------------------
*/
.usi-whatsapp {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 999;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #25d366;
  color: #fff !important;
  font-size: 28px;
  line-height: 56px;
  text-align: center;
  box-shadow: 0 10px 26px rgba(37, 211, 102, 0.45);
  transition: all 0.3s ease 0s;
}

.usi-whatsapp:hover {
  transform: scale(1.08);
}

/*
---------------------------------------------
Footer
---------------------------------------------
*/
footer.usi-footer {
  margin-top: 0;
  padding: 80px 0 0 0;
  background: var(--usi-navy);
}

footer.usi-footer .usi-footer-logo img {
  width: auto;
  height: 96px;
  background: #fff;
  padding: 10px 14px;
  border-radius: 14px;
}

footer.usi-footer h5 {
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 22px;
  letter-spacing: 0.5px;
}

footer.usi-footer p,
footer.usi-footer li,
footer.usi-footer a {
  font-size: 14px;
  line-height: 28px;
  color: rgba(255, 255, 255, 0.72);
  text-align: left;
  margin: 0;
}

footer.usi-footer a:hover {
  color: #fff;
}

footer.usi-footer ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

footer.usi-footer .usi-footer-contact li {
  position: relative;
  padding-left: 28px;
  margin-bottom: 10px;
}

footer.usi-footer .usi-footer-contact li i {
  position: absolute;
  left: 0;
  top: 7px;
  color: var(--usi-gray);
}

footer.usi-footer .usi-footer-col {
  margin-bottom: 40px;
}

footer.usi-footer .usi-profile-button {
  display: inline-block;
  margin-top: 18px;
  padding: 11px 22px;
  border-radius: 23px;
  background: var(--usi-blue);
  color: #fff !important;
  font-size: 14px;
  font-weight: 500;
}

footer.usi-footer .usi-profile-button:hover {
  background: #fff;
  color: var(--usi-navy) !important;
}

footer.usi-footer .usi-footer-bottom {
  margin-top: 20px;
  padding: 24px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

footer.usi-footer .usi-footer-bottom p {
  text-align: center;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.6);
}

/*
---------------------------------------------
CTA band
---------------------------------------------
*/
.usi-cta {
  padding: 80px 0;
  background: var(--usi-gradient);
  text-align: center;
}

.usi-cta h2 {
  font-size: 30px;
  font-weight: 700;
  color: #fff;
  line-height: 44px;
  margin-bottom: 14px;
}

.usi-cta p {
  color: rgba(255, 255, 255, 0.85);
  max-width: 720px;
  margin: 0 auto 30px auto;
}

.usi-cta .usi-cta-button {
  display: inline-block;
  padding: 13px 30px;
  border-radius: 25px;
  background: #fff;
  color: var(--usi-navy) !important;
  font-size: 15px;
  font-weight: 600;
}

.usi-cta .usi-cta-button:hover {
  background: var(--usi-gray);
  color: #fff !important;
}

/* The template hard-codes 120px top margins on #about; inner pages set their own. */
.usi-no-top-margin {
  margin-top: 0 !important;
}