@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

.ms-solutions{
  position:relative;
  width:100%;
  padding: 10px 0;
  font-family:"Inter",sans-serif;
  overflow:visible;
}

/* Horizontal slider track */
.ms-solutions__track{
  --gap: 36px;
  --peek: 170px;
  --cardW: 412px;

  display:flex;
  gap: var(--gap);

  overflow-x:auto;
  overflow-y:hidden;

  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch;

  padding: 10px 0 10px 20px;
  padding-right: var(--peek);

  scrollbar-width: none;
}
.ms-solutions__track::-webkit-scrollbar{ display:none; }

/* Cards */
.ms-card{
  position:relative;
  flex: 0 0 var(--cardW);
  width: var(--cardW);
  max-width: var(--cardW);
  min-width: 0;

  box-sizing:border-box;

  background: var(--ms-card-bg);
  border:1px solid #6d6d6d;
  border-radius:0;
  padding:74px 34px 60px;

  scroll-snap-align:start;

  color:#2b2f36;

  min-height:440px;

  display:flex;
  flex-direction:column;
}

/* top gradient strip */
.ms-card::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:30px;
  background:linear-gradient(90deg,#e7b07b 0%,#e4dbcd 100%);
}

/* Title */
.ms-card__title{
  margin:0 0 30px 0;
  font-size: var(--ms-title-font-size);
  font-family: var(--ms-title-font-family);
  font-weight: var(--ms-title-font-weight);
  font-style: var(--ms-title-font-style);
  line-height:1.35;
  color: var(--ms-title-color);

  min-width:0;
  overflow-wrap:anywhere;
  word-break:break-word;
}

/* Description */
.ms-card__desc{
  font-size:16px;
  line-height:1.55;
  color:#000;
  margin:0 0 16px 0;

  min-width:0;
  overflow-wrap:anywhere;
  word-break:break-word;
}

.ms-card__desc *{
  min-width:0;
  overflow-wrap:anywhere;
  word-break:break-word;
}

/* Link */
.ms-card__link{
  display:inline-flex;
  align-items:center;
  gap:7px;
  max-width:100%;

  font-size:12px;
  font-weight:800;
  color: var(--ms-learn-more-color);
  text-decoration:none;

  margin-top:auto;

  min-width:0;
  overflow-wrap:anywhere;
  word-break:break-word;
}

.ms-card__link::after{
  content:"↗";
  font-size:13px;
  transform:translateY(-1px);
  color: var(--ms-learn-more-color);
}

.ms-card__link:hover{ text-decoration:underline; }

.ms-card__link--disabled{
  opacity:.55;
  cursor:not-allowed;
  text-decoration:none !important;
}

/* Logos row
.ms-card__logos{
  margin-top:22px;
  display:flex;
  gap:12px;
  align-items:center;
  min-width:0;
}

/* Logo blocks 
.ms-card__logo,
.ms-card__logo--ph{
  width:62px;
  height:28px;
  background:#ffffff;
  border:1px solid rgba(0,0,0,0.08);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:12px;
  font-weight:600;
  color:#4b5563;
}

.ms-card__logo img{
  max-width:90%;
  max-height:80%;
  object-fit:contain;
  display:block;
}

/* ===== ARROWS (matches screenshot) ===== */

.ms-solutions__nav{
  position:absolute;
  top:-105px;
  width:48px;
  height:48px;
  border:none;
  background:transparent;
  cursor:pointer;
  padding:0;
  z-index:5;

  display:flex;
  align-items:center;
  justify-content:center;

  font-size:0; /* hides ‹ › text */
}

/* arrow shape */
.ms-solutions__nav::before{
  content:"";
  width:26px;
  height:26px;
  border-top:2px solid var(--ms-arrow-color);
  border-right:2px solid var(--ms-arrow-color);
}

/* prev arrow */
.ms-solutions__nav--prev{
  right:110px;
}
.ms-solutions__nav--prev::before{
  transform:rotate(-135deg);
}

/* next arrow */
.ms-solutions__nav--next{
  right:40px;
}
.ms-solutions__nav--next::before{
  transform:rotate(45deg);
}

.ms-solutions__nav:hover::before{
  border-color: var(--ms-arrow-color);
}

/* Responsive */
@media (max-width: 1024px){
  .ms-solutions__track{
    --gap: 28px;
    --peek: 110px;
    --cardW: 320px;
    padding-left: 16px;
  }
}

@media (max-width: 768px){
  .ms-solutions__track{
    --gap: 18px;
    --peek: 70px;
    --cardW: 270px;
  }

  .ms-solutions__nav{
    display:none;
  }
}

@media (max-width: 480px){
  .ms-solutions__track{
    --gap: 14px;
    --peek: 44px;
    --cardW: 238px;
    padding-left: 14px;
  }

  .ms-card{
    padding:54px 18px 24px;
  }

  .ms-card__title{
    font-size:18px;
  }

  .ms-card__desc{
    font-size:14px;
  }
}