@font-face {
    font-family: 'Montserrat';
    src:    url('../../assets/fonts/montserrat-light.woff2') format('woff2'),
            url('../../assets/fonts/montserrat-light.woff')  format('woff'),
            url('../../assets/fonts/montserrat-light.ttf')   format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'MontserratBold';
    src:    url('../../assets/fonts/montserrat-bold-webfont.woff2') format('woff2'),
            url('../../assets/fonts/montserrat-bold-webfont.woff')  format('woff'),
            url('../../assets/fonts/montserrat-bold-webfont.ttf')   format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Open Sans';
    src: url('../../assets/fonts/open-sans-regular-webfont.woff2') format('woff2'),
         url('../../assets/fonts/open-sans-regular-webfont.woff')  format('woff'),
         url('../../assets/fonts/open-sans-regular-webfont.ttf')   format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
  }

.horse-app {
  background: #fff;
  padding: 60px 20px;
  font-family: Montserrat, sans-serif;
}

.horse-app__inner {
  display: flex;
  align-items: flex-start;
  max-width: 1200px;
  margin: 0 auto;
  gap: 40px;
  flex-wrap: wrap;
}

/* Image column */
.horse-app__image {
  flex: 0 0 41.666%; /* ~5/12 of width */
  z-index: 4;
}
.horse-app__image img {
  width: 100%;
  display: block;
  object-fit: contain;
  margin-top: -30%;
  z-index: 5;
}

/* Content column */
.horse-app__content {
  flex: 1 1 50%;     /* take up the rest */
  display: flex;
  flex-direction: column;
  gap: 20px;
}


.horse-app__logo {
  display: block;       /* make it a block so margins apply */
  width: 100%;          /* let it fill its container up to… */
  max-width: 80px;     /* …this maximum width—you can tweak that value */
  height: auto;         /* preserve its aspect ratio */
  margin: 0 auto;  /* auto left/right centers it, 10px bottom space */
  /* margin-bottom: -10px; */
}

.horse-app__title {
  font-family: 'Open Sans', sans-serif;
  font-size: 2rem;
  margin: 0;
  align-items: center;
  text-align: center;
  text-transform: none !important;
}

.horse-app__divider {
  width: 100%;
  height: 1px;
  margin: 8px auto;
  margin-top: -10px;
  background: linear-gradient(to right, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0));
  justify-content: center;
}

.horse-app__subtitle {
  font-size: 1rem;
  color: #5d5d5d;
  margin: 0;
  align-items: center;
  text-align: center;
  text-transform: uppercase;
  font-family: 'Montserrat', sans-serif;
  font-weight: 400;
  margin-top: -12px;
}

/* Store badges */
.horse-app__stores {
  display: flex;
  gap: 12px;
  justify-content: center;
}
.store-badge img {
  height: 40px;
  display: block;
}

/* Description */
.horse-app__description {
  font-family: 'Open Sans', sans-serif;
  color: #4a4a4a;
  line-height: 1.6;
}

.horse-app__description .p {
  margin-bottom: 0 !important;
}

/* Features grid */
.horse-app__features-heading {
  font-family: MontserratBold, sans-serif;
  font-weight: 700;
  font-size: 1.75rem;
  margin: 30px 0 10px;
}

.horse-app__features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
}

.feature-item__title {
  font-family: MontserratBold, sans-serif;
  font-weight: 700;
  font-size: 1.1rem;
  text-transform: uppercase;
  margin-bottom: 3px;
}

.feature-item__desc {
  font-family: 'Open Sans', sans-serif;
  font-size: 0.9rem;
  line-height: 1.4;
}

/* Responsive: on small screens stack them */
@media (max-width: 768px) {
  .horse-app__inner {
    flex-direction: column;
    gap: 20px;
  }
  .horse-app__image,
  .horse-app__content {
    flex: 1 1 100%;
  }
  .horse-app__content {
    margin-top: -90px;
    z-index: 6;
  }
}