/* ---------- Root ---------- */
.brand-showcase {
  color: #1A1A1A;
  overflow: hidden;
}

.brand-showcase__inner {
  max-width: 1310px;
  margin: 0 auto;
  display: flex;
  gap: 0;
  align-items: start;
}

/* ============================================================
       Content (text) column
       ============================================================ */
.brand-showcase__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  max-width: 540px;

}
.brand-showcase__content > :first-child{
  position: relative;
  left: 50%;
  transform: translateX(-61%);
}
.brand-showcase__content > :nth-child(2){
  position: relative;
  left: 50%;
  transform: translateX(-77%);
}
/* ---------- Brand logo ---------- */
.brand-showcase__brand-logo {
  max-width: 336px;
  width: 100%;
  height: auto;
  margin-bottom: 20px;
}

/* ---------- 'Powered by' badge ---------- */
.brand-showcase__powered-by-logo {
  max-width: 140px;
  width: 100%;
  height: auto;
}

/* ---------- Headline + description ---------- */
.brand-showcase__heading {
  margin: 0;
  font-family: "Playfair Display", serif;
  font-style: italic;
  font-weight: 500;
  font-size: 54px;
  line-height: 100%;
  letter-spacing: -0.01em;
  color: #000000;
  margin: 36px 0;
}

.brand-showcase__desc {
  margin: 0;
  line-height: 23px;
  color: #75787B;
  font-size: 18px;
  max-width: 518px;
  font-weight: 300;
  font-family: Archivo;
}

/* ============================================================
       Visual column
       ============================================================ */
.brand-showcase__visual {
  position: relative;
  width: 100%;
  max-width: 810px;
  margin: 0 auto;
  right: 30px;
}

.brand-showcase__visual-img {
  width: 100%;
  height: auto;
  display: block;
}

.brand-showcase__visual-img--desktop {
  display: block;
  min-width: 810px;
}

.brand-showcase__visual-img--mobile {
  display: none;
}


/* ============================================================
       Fade-in animation (JS-driven via .is-visible)
       Respects reduced-motion preference
       ============================================================ */
.brand-showcase__content,
.brand-showcase__visual {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.brand-showcase.is-visible .brand-showcase__content {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.05s;
  min-width: 580px;
}

.brand-showcase.is-visible .brand-showcase__visual {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.2s;
}

@media (prefers-reduced-motion: reduce) {

  .brand-showcase__content,
  .brand-showcase__visual {
    opacity: 1;
    transform: none;
    transition: none;
  }
}
 /* brand-showcase-2 css  */
 .brand-showcase-2 .brand-showcase__inner {
  max-width: 1360px;
  margin: 0 auto;
  gap: 32px;
 }
 .brand-showcase-2 .brand-showcase__content > :nth-child(2){
  transform: unset;
  position: unset;
 }
 .brand-showcase-2 .brand-showcase__content > :first-child{
  position: unset;
  transform: unset;
 }
 .brand-showcase-2 .brand-showcase.is-visible .brand-showcase__content{
  min-width: 537px;
  max-width: 537px;
  margin-top: 40px;
 }
 .brand-showcase-2 .brand-showcase__visual{
  right: 0;
  max-height: 469px;
  max-width: 791px;
 }
 .brand-showcase-2 .brand-showcase__visual-img--desktop{
  max-height: 469px;
  min-width: 791px;
 }
/* ============================================================
       Mobile layout (≤ 767px)
       ============================================================ */
@media (max-width: 767px) {
  .brand-showcase {
    padding: 0;
    margin-bottom: -26px;
  }

  .brand-showcase__inner {
    flex-direction: column;
    gap: 0;
  }

  .brand-showcase__content {
    align-items: start;
    text-align: left;
    gap: 28px;
    max-width: none;
  }

  .brand-showcase__heading {
    font-size: 28px;
    margin: 16px 0;
  }

  .brand-showcase__desc {
    font-size: 14px;
    line-height: 18px;
  }

  .brand-showcase__visual {
    max-width: 460px;
    right: unset;
  }
.brand-showcase__brand-logo {
  max-width: 220px;
  margin-bottom: 10px;
  position: unset !important;
  transform: unset !important;
}
.brand-showcase__powered-by-logo{
  max-width: 98px;
  position: relative;
  left: 57px !important;
  transform: unset !important;
}
  .brand-showcase__visual-img--desktop {
    display: none;
  }

  .brand-showcase__visual-img--mobile {
    display: block;
    position: relative;
    top: -20px;
  }
  .brand-showcase.is-visible .brand-showcase__content{
    min-width: unset;
    padding: 16px;
    gap: 0;
    align-items: start;
  }

  /* .brand-showcase-2 css for mobile  */
   /* .brand-showcase-2 .brand-showcase__content > :nth-child(2){
  transform: unset;
  position: unset;
 }
 .brand-showcase-2 .brand-showcase__content > :first-child{
  position: unset;
  transform: unset;
 } */
  .brand-showcase-2 .brand-showcase.is-visible .brand-showcase__content{
    min-width: 100%;
    margin-top: 0;
  }
   .brand-showcase-2 .brand-showcase__visual-img--desktop{
  min-width: unset;
 }
}