/* ==========================================================================
   Osprey Procurement - custom overrides
   Loaded AFTER zeinet.css + zeinet-color-2.css, so these win on source order.
   Keep all bespoke Osprey styling here (not in the vendor theme files).
   ========================================================================== */

/* --------------------------------------------------------------------------
   Buttons: theme uses sharp-edged buttons. The base .thm-btn ships rounded
   (border-radius: 25px); make it sharp like .thm-btn--two for consistency.
   -------------------------------------------------------------------------- */
.thm-btn {
  border-radius: 0;
}

/* --------------------------------------------------------------------------
   Strategic objective cards (About page): clean numbered cards, no icons,
   so the section reads differently from the icon-based Core Values above.
   -------------------------------------------------------------------------- */
.osprey-obj-card {
  position: relative;
  height: 100%;
  background-color: var(--zeinet-white);
  border: 1px solid var(--zeinet-bdr-color);
  border-top: 3px solid var(--zeinet-base);
  padding: 40px 35px;
  box-shadow: 0 6px 24px rgba(var(--zeinet-black-rgb), 0.05);
  transition: box-shadow 300ms ease, transform 300ms ease;
}
.osprey-obj-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 45px rgba(var(--zeinet-black-rgb), 0.10);
}
.osprey-obj-card__num {
  display: block;
  font-family: var(--zeinet-font);
  font-size: 42px;
  font-weight: 800;
  line-height: 1;
  color: var(--zeinet-base);
  margin-bottom: 20px;
}
.osprey-obj-card__title {
  font-size: 20px;
  font-weight: 700;
  color: var(--zeinet-black);
  margin: 0 0 12px;
}
.osprey-obj-card__text {
  font-size: 16px;
  line-height: 28px;
  color: var(--zeinet-gray);
  margin: 0;
}

/* --------------------------------------------------------------------------
   Footer: solid navbar-navy background with light text (was a faint image
   overlay + light inner card). Matches the header navy exactly.
   -------------------------------------------------------------------------- */
.site-footer-two--home-five {
  background-color: var(--zeinet-black);
  background-image: none;
}
.site-footer-two--home-five::after {
  display: none;
}
.site-footer-two__top {
  background-color: transparent;
}
.site-footer-two__top .footer-widget__title {
  color: var(--zeinet-white);
}
.site-footer-two__about__text,
.site-footer-two__top .footer-widget__links-list li a {
  color: rgba(var(--zeinet-white-rgb), 0.72);
}
.site-footer-two__top .footer-widget__links-list li a:hover {
  color: var(--zeinet-base);
}
.site-footer-two__form input {
  background-color: rgba(var(--zeinet-white-rgb), 0.08);
  color: var(--zeinet-white);
}
.site-footer-two__form input::placeholder {
  color: rgba(var(--zeinet-white-rgb), 0.6);
}
/* Social icons: brand orange by default (they were near-invisible navy on navy);
   hover keeps the orange-filled circle with a white icon. */
.site-footer-two__about__social a {
  background-color: rgba(var(--zeinet-white-rgb), 0.08);
  color: var(--zeinet-base);
}
.site-footer-two--home-five .site-footer-two__about__social a:hover {
  color: var(--zeinet-white);
}

/* --------------------------------------------------------------------------
   SEO: page-header heading is now an <h1> (one H1 per page). Match the theme's
   original .page-header__inner h2 styling.
   -------------------------------------------------------------------------- */
.page-header__inner h1 {
  font-size: 40px;
  color: var(--zeinet-white);
  line-height: 50px;
  margin-bottom: 6px;
  font-weight: 800;
  letter-spacing: var(--zeinet-letter-spacing);
}

/* --------------------------------------------------------------------------
   Benefits ("Why Choose Us"): the image column had a fixed min-height, so when
   the navy content column was taller a white gap appeared under the image.
   Flex the wrapper so both columns are equal height (still stacks on mobile,
   where the columns are width:100%).
   -------------------------------------------------------------------------- */
.benefits__wrapper {
  display: flex;
  flex-wrap: wrap;
}

/* --------------------------------------------------------------------------
   Export & Import (services-one) cards: equal height across the row, and the
   bottom arrow badge removed in markup. Shorter cards stretch to the tallest.
   -------------------------------------------------------------------------- */
.services-one__bottom .row {
  row-gap: 30px;
}
.services-one__single {
  height: 100%;
  margin-bottom: 0;
}
.services-one__single-inner {
  height: 100%;
}

/* --------------------------------------------------------------------------
   Contact form: style the Service-required <select> to match the inputs.
   -------------------------------------------------------------------------- */
.contact-page__form-input-box select {
  height: 50px;
  width: 100%;
  border: none;
  background-color: var(--zeinet-extra);
  padding: 0 26px;
  outline: none;
  font-size: 14px;
  font-weight: 500;
  color: var(--zeinet-gray);
  cursor: pointer;
}

/* --------------------------------------------------------------------------
   CTA band (free-access): supporting line + a direct call action alongside
   the Request a Quote button.
   -------------------------------------------------------------------------- */
.free-access__text {
  max-width: 640px;
  margin: 22px auto 0;
  color: rgba(var(--zeinet-white-rgb), 0.85);
  font-size: 18px;
  line-height: 30px;
}
.free-access__btn-box--cta {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 22px 44px;
}
.free-access__call {
  display: inline-flex;
  align-items: center;
  gap: 16px;
}
.free-access__call__icon {
  width: 54px;
  height: 54px;
  flex-shrink: 0;
  border-radius: 50%;
  background-color: var(--zeinet-base);
  color: var(--zeinet-white);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  transition: all 300ms ease;
}
.free-access__call:hover .free-access__call__icon {
  background-color: var(--zeinet-white);
  color: var(--zeinet-base);
}
.free-access__call__text {
  display: flex;
  flex-direction: column;
  text-align: left;
  line-height: 1.35;
}
.free-access__call__label {
  font-size: 14px;
  color: rgba(var(--zeinet-white-rgb), 0.8);
}
.free-access__call__number {
  font-size: 20px;
  font-weight: 700;
  color: var(--zeinet-white);
}

/* --------------------------------------------------------------------------
   Dark header: white logo on navy, white nav links, orange accents
   -------------------------------------------------------------------------- */

/* Top bar -> deep navy (was orange) */
.main-header-topbar {
  background-color: var(--zeinet-black2);
}

/* Subtle divider between top bar and the main navbar */
.main-header-five {
  border-top: 1px solid rgba(var(--zeinet-white-rgb), 0.08);
}

/* Top bar text + icons -> light, orange on hover */
.main-header-topbar__info a,
.main-header-topbar__info__icon,
.main-header-topbar__social__title {
  color: var(--zeinet-white);
}
.main-header-topbar__info a:hover,
.main-header-topbar__social a:hover {
  color: var(--zeinet-base);
}

/* Main navbar (static + sticky) -> navy */
.main-header-five,
.stricky-header.main-header-five {
  background-color: var(--zeinet-black);
}

/* Nav links -> white. Selectors mirror the theme's own (0,3,2) rule at
   zeinet.css:14040 (which sets them to navy); matching specificity + later
   source order lets white win. Hover/current stay orange via the theme. */
.main-header-five .main-menu .main-menu__list > li > a,
.main-header-five.stricky-header .main-menu__list > li > a {
  color: var(--zeinet-white);
}

/* Right-side icons (search / cart) + mobile toggler -> white, orange on hover */
.main-header-five .main-menu__search,
.main-header-five .mobile-nav__toggler {
  color: var(--zeinet-white);
}
.main-header-five .main-menu__search:hover,
.main-header-five .mobile-nav__toggler:hover {
  color: var(--zeinet-base);
}

/* Wide wordmark logo: constrain height so it fits the navbar row */
.main-header-five .main-menu__logo img {
  width: auto;
  height: auto;
  max-height: 72px;
}

/* ==========================================================================
   Form feedback: button loader, toast, inline alert, validation state.
   Used by assets/js/osprey-forms.js on the contact + newsletter forms.
   ========================================================================== */

/* --- Submit-button loading state --- */
.thm-btn.is-loading {
  pointer-events: none;
  opacity: 0.85;
  cursor: progress;
}
.thm-btn.is-loading > span {
  position: relative;
  z-index: 1;
}
.osprey-spinner {
  display: inline-block;
  width: 15px;
  height: 15px;
  margin-right: 9px;
  vertical-align: -2px;
  border: 2px solid rgba(255, 255, 255, 0.45);
  border-top-color: #ffffff;
  border-radius: 50%;
  animation: osprey-spin 0.6s linear infinite;
}
@keyframes osprey-spin {
  to {
    transform: rotate(360deg);
  }
}

/* --- Inline response alert (below each form) --- */
.osprey-form__response {
  width: 100%;
}
.osprey-form__response:not(:empty) {
  margin-top: 20px;
}
.osprey-alert.alert {
  border: 0;
  border-left: 4px solid transparent;
  border-radius: 0;
  font-size: 15px;
  line-height: 1.55;
  padding: 15px 44px 15px 18px;
}
.osprey-alert.alert-success {
  background-color: #e9f7ef;
  border-left-color: #1e9e5a;
  color: #14663a;
}
.osprey-alert.alert-danger {
  background-color: #fdecec;
  border-left-color: var(--zeinet-primary, #d80e1f);
  color: #a01019;
}

/* --- Toast --- */
#osprey-toast-container {
  z-index: 2000;
}
.osprey-toast {
  border: 0;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 10px 34px rgba(10, 30, 69, 0.22);
  border-left: 4px solid var(--zeinet-base, #f47a1f);
}
.osprey-toast .toast-header {
  border-bottom: 1px solid rgba(10, 30, 69, 0.08);
  color: var(--zeinet-black, #0a2a5e);
  font-weight: 700;
}
.osprey-toast .osprey-toast__body {
  color: #3a4351;
  font-size: 14px;
}
.osprey-toast__dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: 9px;
  border-radius: 50%;
  background-color: #1e9e5a;
}
.osprey-toast--success {
  border-left-color: #1e9e5a;
}
.osprey-toast--success .osprey-toast__dot {
  background-color: #1e9e5a;
}
.osprey-toast--error {
  border-left-color: var(--zeinet-primary, #d80e1f);
}
.osprey-toast--error .osprey-toast__dot {
  background-color: var(--zeinet-primary, #d80e1f);
}

/* --- Invalid field highlight --- */
.osprey-invalid {
  border-color: var(--zeinet-primary, #d80e1f) !important;
  box-shadow: 0 0 0 1px rgba(216, 14, 31, 0.25);
}

/* ==========================================================================
   Page preloader: brand-on-brand entrance. Replaces the old Zeinet globe
   (assets/images/loader.png) that spun via .preloader__image. Navy backdrop
   matches the dark header; the white Osprey wordmark pulses and an orange
   ring spins beneath it. jQuery fades .preloader out on window load.
   Overrides the vendor rules in zeinet.css (loaded earlier).
   ========================================================================== */
.preloader {
  background-color: var(--zeinet-black, #0a2a5e);
  background-image: none;
}
/* Old globe image element is no longer rendered, but neutralise it in case
   any cached markup still ships it. */
.preloader__image {
  display: none !important;
}
.preloader__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 26px;
}
.preloader__logo {
  width: 240px;
  max-width: 66vw;
  height: auto;
  animation: osprey-preloader-pulse 1.8s ease-in-out infinite;
}
.preloader__spinner {
  display: block;
  width: 42px;
  height: 42px;
  border: 3px solid rgba(255, 255, 255, 0.18);
  border-top-color: var(--zeinet-base, #f47a1f);
  border-radius: 50%;
  animation: osprey-preloader-spin 0.8s linear infinite;
}
@keyframes osprey-preloader-spin {
  to {
    transform: rotate(360deg);
  }
}
@keyframes osprey-preloader-pulse {
  0%,
  100% {
    opacity: 0.55;
  }
  50% {
    opacity: 1;
  }
}
@media (prefers-reduced-motion: reduce) {
  .preloader__logo {
    animation: none;
    opacity: 1;
  }
  .preloader__spinner {
    animation-duration: 1.6s;
  }
}