/* Home page hero */

.hero-home {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  max-height: 100vh;
  overflow: hidden;
  background-image: url("https://cdn.propelholdings.com/web/v3/heros/home-hero.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(24px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 767.98px) {
  .hero-home {
    background-image: url("https://cdn.propelholdings.com/web/v3/heros/home-hero-mob.webp");
    padding-top: var(--space-xl);
    padding-bottom: var(--space-xl);
  }

  .hero-home .row {
    align-items: flex-start !important;
    padding-top: 10rem;
  }
}

/* 2nd section */
.section-two {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 100vh;
  overflow: hidden;
  background-image: url("https://cdn.propelholdings.com/web/v3/heros/home-sec2-bg.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.section-pgb {
  position: relative;
  width: 100%;
  min-height: 100vh;
  overflow: hidden;
  background-image: url("https://cdn.propelholdings.com/web/v3/pgb-home-bg.webp");
  background-size: cover;
  background-position: left;
  background-repeat: no-repeat;
}

.section-careers{
  position: relative;
  width: 100%;
  min-height: 100vh;
  background-image: url("https://cdn.propelholdings.com/web/v3/heros/home-sec9-bg.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
}
.section-why-invest {
  position: relative;
  width: 100%;
  min-height: 100vh;
  background-image: url("https://cdn.propelholdings.com/web/v3/heros/home-sec12-bg.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
}

.section-what-we-do {
  position: relative;
  width: 100%;
  min-height: 100vh;
  background-image: url("https://cdn.propelholdings.com/web/v3/heros/home-sec3-bg.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
}
.section-news {
  position: relative;
  width: 100%;
  min-height:60vh;
  overflow: hidden;
  padding-bottom:5rem;
  padding-top:5rem;
  background:var(--color-surface);
}

.content-card {
  text-decoration: none;
  color: inherit;
}

.content-card img {
  width: 100%;
  aspect-ratio: 1 / 0.7;
  object-fit: cover;
  box-shadow: 0 34px 42.23px 8.67px rgba(0, 23, 49, 0.08);
  border-radius: 20px;
}

.content-card h3 {
  font-size: 24px;
  line-height: 1.1;
  margin-bottom: 10px;
  color: #2f4765;
}

.content-card p {
  font-size: 18px;
  line-height: 1.45;
  color: #586b84;
  margin-bottom: 20px;
  max-width: 90%;
}

.card-link-text {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #2f3c97;
  font-weight: 700;
  font-size: 16px;
}

.stat-number {
  display: inline-flex;
  align-items: flex-start;
  justify-content: center;
  gap: 0;
  line-height: 0.96;
  white-space: nowrap;
}

.stat-number .odometer {
  display: inline-block;
  font: inherit;
  line-height: 0.96 !important;
  vertical-align: top;
}

.stat-number .odometer-inside,
.stat-number .odometer-digit,
.stat-number .odometer-value,
.stat-number .odometer-formatting-mark {
  font: inherit;
  line-height: 0.96 !important;
}

.stat-number,
.stat-number .odometer,
.stat-number .odometer-inside,
.stat-number .odometer-digit,
.stat-number .odometer-value,
.stat-number .odometer-formatting-mark {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
}

.odometer-suffix {
  display: inline-block;
  line-height: 0.96;
  margin-left: 0.1em;
  transform: translateY(0.05em);
}

/* AI PLATFORM CSS*/
.section-ai-platform {
  position: relative;
  width: 100%;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background-image: url("https://cdn.propelholdings.com/web/v3/heros/home-sec5-bg.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
}

@media (max-width: 991.98px) {
  .section-ai-platform .row.min-vh-100 {
    min-height: auto !important;
  }

  .section-ai-platform {
    padding-top: 72px;
    padding-bottom: 72px;
  }
}
.quote-mark-img{
  display: block;
  width: 48px;
  height: auto;
  margin-bottom: 2rem;
}


/* OUR BRANDS CSS*/

.brands-divider {
  position: relative;
  height: 1px;
  background: #d9dee6;
}

.brands-divider-active {
  position: absolute;
  top: 50%;
  left: 0;
  width: 25%;
  height: 4px;
  background: #4b607d;
  transform: translateY(-50%);
  transition: left 0.25s ease;
}

.brand-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 200px;
}

.brand-item {
  width: 100%;
  background: transparent;
  border: 0;
  padding: 0;
  text-align: center;
  cursor: pointer;
}

.brand-logo-slot {
  height: 110px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.brand-logo-stack {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
}

.brand-logo {
  display: block;
  width: 100%;
  height: auto;
  margin: 0 auto;
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.brand-logo-active {
  position: absolute;
  inset: 0;
  opacity: 0;
}

.brand-item.is-active .brand-logo-active,
.brand-item:hover .brand-logo-active,
.brand-item:focus-visible .brand-logo-active {
  opacity: 1;
}

.brand-item.is-active .brand-logo-default,
.brand-item:hover .brand-logo-default,
.brand-item:focus-visible .brand-logo-default {
  opacity: 0;
}

.brand-description {
  margin-top: 2rem;
  max-width: 280px;
  color: #506784;
  font-size: clamp(1rem, 1.15vw, 1.5rem);
  line-height: 1.25;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease;
}

.brand-description.is-active {
  opacity: 1;
  visibility: visible;
}

/* mobile carousel */
#brandsCarousel .carousel-item {
  padding-inline: 1rem;
}

#brandsCarousel .brand-description {
  opacity: 1;
  visibility: visible;
  margin-inline: auto;
}

#brandsCarousel .brand-logo-slot {
  height: 90px;
}

#brandsCarousel .carousel-control-prev,
#brandsCarousel .carousel-control-next {
  opacity: 1;
}

#brandsCarousel .carousel-control-prev .material-symbols-outlined,
#brandsCarousel .carousel-control-next .material-symbols-outlined {
  font-size: 22px;
}

.brands-divider-active {
  --divider-width: 25%;
  width: var(--divider-width);
}

@media (max-width: 991.98px) {
  .brands-divider-active {
    --divider-width: 120px;
    transform: translateY(-50%);
    transition: left 0.25s ease;
  }

  .brands-main {
    justify-content: center;
  }

  .brand-logo-slot {
    height: 90px;
  }

  .brand-description {
    max-width: 320px;
    margin-inline: auto;
  }
}

.section-mission-split {
  background: #121245;
  position: relative;
  width: 100%;
  height:fit-content;
}

.mission-visual {
  min-height:100vh;
  display: flex;
  align-items: center;
  background: linear-gradient(rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03 )), url("https://cdn.propelholdings.com/web/v3/heros/man-with-child-construction.webp") center center / cover no-repeat;
}

.mission-visual h3{
  color:#ffffff;
}
.mission-visual p{
  color:#ffffff !important;
}
.mission-content {
  min-height:100vh;
  display: flex;
  align-items: center;
  background: #121245;
  
}

.icon-white {
  width: 50px;
  height: 50px;
  border-radius: 10px;
  background: white;
  color: #3f3a96;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  font-weight: 600;
  line-height: 1;
  margin-bottom: 28px;
}

@media (max-width: 991.98px) {
  .mission-visual {
    min-height: 60vh;
    display: relative;
  }
  .mission-content {
    min-height:50vh;
    display: relative;
  }
}

.mission-inner {
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
  text-align:left;
}

.mission-item {
  display: block;
  width: 100%;
  text-align: left;
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0 0 40px;
  color: #f4f7fb;
  opacity: 1;
  filter: none;
  transition: opacity 0.25s ease, filter 0.25s ease;
}

.mission-title {
  color: #ffffff !important;
  font-size: 24px;
}

.mission-subtitle {
  display: block;
  font-size: 20px;
  color: #ffffff !important;
  font-weight: 200;
}

/* desktop hover behavior only */
@media (min-width: 992px) {
  .mission-item {
    opacity: 0.4;
    filter: blur(2px);
  }

  .mission-item.is-active {
    opacity: 1;
    filter: blur(0);
  }

  .mission-inner:hover .mission-item {
    opacity: 0.4;
    filter: blur(2px);
  }

  .mission-inner:hover .mission-item:hover,
  .mission-inner:hover .mission-item:focus-visible {
    opacity: 1;
    filter: blur(0);
  }
}

/* mobile/tablet static */
@media (max-width: 991.98px) {

  .mission-visual {
    padding: 24px;
  }

  .mission-content {
    padding: 32px 24px 48px;
  }

  .mission-card {
    padding: 32px 28px;
    border-radius: 24px;
  }

  .mission-item,
  .mission-item.is-active,
  .mission-inner:hover .mission-item,
  .mission-inner:hover .mission-item:hover,
  .mission-inner:hover .mission-item:focus-visible {
    opacity: 1;
    filter: none;
  }
}

/*awards scroller section*/
section.section-awards {
  scroll-snap-align: center !important;
}

.section-awards {
  min-height: 50vh;
  display: flex;
  background: #F6F6F6;
  overflow: hidden;
}

.scroller {
  max-width: 100%;
}

.scroller__inner {
  padding-block: 1rem;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 2.5rem;
}

.scroller[data-animated="true"] {
  overflow: hidden;
  -webkit-mask: linear-gradient(
    90deg,
    rgba(246, 246, 246, 0) 0%,
    rgba(246, 246, 246, 0.6) 8%,
    rgba(246, 246, 246, 1) 22%,
    rgba(246, 246, 246, 1) 78%,
    rgba(246, 246, 246, 0.6) 92%,
    rgba(246, 246, 246, 0) 100%
  );
  mask: linear-gradient(
    90deg,
    rgba(246, 246, 246, 0) 0%,
    rgba(246, 246, 246, 0.6) 8%,
    rgba(246, 246, 246, 1) 22%,
    rgba(246, 246, 246, 1) 78%,
    rgba(246, 246, 246, 0.6) 92%,
    rgba(246, 246, 246, 0) 100%
  );
}


.scroller[data-animated="true"] .scroller__inner {
  width: max-content;
  flex-wrap: nowrap;
  animation: awards-scroll var(--_animation-duration, 40s)
    var(--_animation-direction, forwards) linear infinite;
}

.scroller[data-direction="right"] {
  --_animation-direction: reverse;
}

.scroller[data-direction="left"] {
  --_animation-direction: forwards;
}

.scroller[data-speed="fast"] {
  --_animation-duration: 20s;
}

.scroller[data-speed="slow"] {
  --_animation-duration: 55s;
}

.award-item {
  width: 220px;
  height: 110px;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

.award-item img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}

@keyframes awards-scroll {
  to {
    transform: translate(calc(-50% - 1.25rem));
  }
}

@media (max-width: 991.98px) {
  .scroller__inner {
    gap: 1.75rem;
  }

  .award-item {
    width: 160px;
    height: 80px;
  }

  .scroller[data-speed="slow"] {
    --_animation-duration: 32s;
  }
}
/* CAREERS SCROLL SECTION */
.vscroll {
  position: relative;
  height: 100vh;
  overflow: hidden;
}

.vscroll__track {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  animation: vscroll-up 30s linear infinite;
}

.vscroll__img {
  width: 100%;
  border-radius: 24px;
  object-fit: cover;
  display: block;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

@keyframes vscroll-up {
  from { transform: translateY(0); }
  to   { transform: translateY(-50%); }
}

/* Respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce) {
  .vscroll__track { animation: none; }
}

@media (max-width: 991.98px) {
  .vscroll { height: 420px; margin-top: 2.5rem; }
}