/* ==========================================================
   Page banners (global)
   - .inner-banner-new : every inner page (about, services, contact ...)
   - .inner-banner     : privacy policy / terms
   - home hero entrance animation lives in animations.css
   Change it here once and every page follows.
   ========================================================== */

/* ---------- Inner page banner ---------- */
.inner-banner-new {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  min-height: 420px;
  padding: 70px 0 64px;
  text-align: center;
}
/* richer banners (with buttons / partner logos) get more height */
.inner-banner-new:has(.btn-row),
.inner-banner-new:has(.banner-ul-images) {
  min-height: 540px;
}
.inner-banner-new > .container {
  width: 100%;
}

/* slow zoom on the photo, plus a dark gradient so text is always readable */
.inner-banner-new::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background: inherit;
  background-size: cover;
  background-position: center;
  animation: banner-zoom 24s ease-out both;
}
.inner-banner-new::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(7, 15, 77, .5) 0%, rgba(7, 15, 77, .2) 45%, rgba(7, 15, 77, .58) 100%);
  pointer-events: none;
}

/* breadcrumb */
.inner-banner-new .crumbs {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 20px;
  font-size: 14px;
  color: rgba(255, 255, 255, .85);
}
.inner-banner-new .crumbs a {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #fff;
  opacity: .9;
  transition: color .25s, opacity .25s;
}
.inner-banner-new .crumbs a:hover {
  color: var(--brand-accent, #ff4a35);
  opacity: 1;
}
.inner-banner-new .crumbs i {
  font-size: 18px;
  line-height: 1;
  opacity: .75;
}
.inner-banner-new .crumbs b {
  font-weight: 500;
  color: #ffb9ae;
}

/* small label above the title becomes a pill */
.inner-banner-new > .container > span {
  display: inline-flex;
  align-items: center;
  margin: 0 auto 18px;
  padding: 7px 20px;
  border: 1px solid rgba(255, 74, 53, .55);
  border-radius: 50px;
  background: rgba(255, 74, 53, .16);
  color: #ff9486;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .6px;
}

/* title */
.inner-banner-new h3,
.inner-banner-new h2 {
  margin: 0;
  padding: 0;
  color: #fff;
  font-size: clamp(30px, 4.2vw, 50px);
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: -.4px;
  text-align: center;
  text-shadow: 0 3px 24px rgba(0, 0, 0, .35);
}
.inner-banner-new h3::after,
.inner-banner-new h2::after {
  content: "";
  display: block;
  width: 72px;
  height: 4px;
  margin: 20px auto 0;
  border-radius: 4px;
  background: linear-gradient(90deg, #ff4a35, #ff7a3d);
}

/* intro text */
.inner-banner-new p {
  max-width: 740px;
  margin: 22px auto 0;
  padding: 0;
  font-size: 18px;
  line-height: 1.75;
  text-align: center;
  opacity: .93;
}

/* buttons and partner logos */
.inner-banner-new .btn-row {
  margin-top: 32px;
}
.inner-banner-new .banner-ul-images {
  display: flex;
  justify-content: center;
  margin: 44px 0 0;
  padding: 0;
  list-style: none;
}
.inner-banner-new .banner-ul-images img {
  max-width: 100%;
  height: auto;
}

/* entrance: the pieces rise in one after another when the page opens */
.inner-banner-new .crumbs                { animation: banner-rise .7s .05s both; }
.inner-banner-new > .container > span   { animation: banner-rise .7s .15s both; }
.inner-banner-new h3,
.inner-banner-new h2                    { animation: banner-rise .8s .25s both; }
.inner-banner-new p                     { animation: banner-rise .8s .4s both; }
.inner-banner-new .btn-row              { animation: banner-rise .8s .55s both; }
.inner-banner-new .banner-ul-images     { animation: banner-rise .9s .7s both; }

@keyframes banner-rise {
  from { opacity: 0; transform: translate3d(0, 26px, 0); }
  to   { opacity: 1; transform: none; }
}
@keyframes banner-zoom {
  from { transform: scale(1); }
  to   { transform: scale(1.09); }
}

/* ---------- Privacy / Terms banner ---------- */
.inner-banner .inner-title {
  padding-top: 100px;
  padding-bottom: 100px;
}
.inner-banner .inner-title h3 {
  margin-bottom: 14px;
  font-size: clamp(30px, 4vw, 44px);
  font-weight: 700;
  animation: banner-rise .8s .15s both;
}
.inner-banner .inner-title ul {
  animation: banner-rise .8s .3s both;
}

/* ---------- Mobile ---------- */
@media (max-width: 767px) {
  .inner-banner-new {
    min-height: 340px;
    padding: 52px 0 46px;
  }
  .inner-banner-new:has(.btn-row),
  .inner-banner-new:has(.banner-ul-images) {
    min-height: 460px;
  }
  .inner-banner-new p {
    font-size: 16px;
    line-height: 1.7;
  }
  .inner-banner-new h3 br,
  .inner-banner-new p br {
    display: none;
  }
  .inner-banner-new .banner-ul-images {
    margin-top: 30px;
  }
  .inner-banner .inner-title {
    padding-top: 70px;
    padding-bottom: 70px;
  }
}

/* respect "reduce motion" */
@media (prefers-reduced-motion: reduce) {
  .inner-banner-new::before,
  .inner-banner-new .crumbs,
  .inner-banner-new > .container > span,
  .inner-banner-new h3,
  .inner-banner-new h2,
  .inner-banner-new p,
  .inner-banner-new .btn-row,
  .inner-banner-new .banner-ul-images,
  .inner-banner .inner-title h3,
  .inner-banner .inner-title ul {
    animation: none;
  }
}