*{
    box-sizing:
    border-box;
    margin:0;
    padding:0}
html,body{
    font-family:Inter, system-ui,Arial;
    background:#F9F7F2;
    color:#222;
    background-image: url("assets/carousel-bg.png");
    background-size: cover;     
    background-repeat: no-repeat;
    background-position: center;
    height: 100vh;
    margin: 0;
}

.container{
    max-width:1100px;
    margin:auto;
    padding:48px 20px
}
.center{
    text-align:center
}

.badge{
  display:inline-block;
  background:#E6F2FF;
  color:#075985;
  padding:6px 12px;
  border-radius:999px;
  font-weight:600;
  font-size:13px
}

h1{
    font-size:36px;
    margin-top:14px
}
.lead{
    max-width:820px;
    margin:18px auto;
    color:#606060
}


h1{
    font-size:36px;
    margin-top:14px
}
.lead1{
    max-width:820px;
    margin:18px auto;
    color:#606060
}

/* ================= PARTNERS ================= */
.partner-strip{overflow:hidden;margin:36px 0}
.partner-track{
  display:flex;
  gap:16px;
  width:max-content;
  animation:partnerScroll 26s linear infinite
}
.partner-card{
  min-width:150px;
  height:68px;
  background:#EFF1F6;
  border-radius:10px;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 6px 18px rgba(0,0,0,.06)
}
.partner-card img{max-height:56px;filter:grayscale(60%)}

@keyframes partnerScroll{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}
}

/* ================= REVIEWS ================= */
.reviews{margin-top:24px;overflow:hidden}

.reviews-track{
  display:flex;
  gap:16px;
  width:max-content;
  animation-duration:30s;
  animation-timing-function:linear;
  animation-iteration-count:infinite
}

.review{
  min-width:320px;
  background: #F3F3F3;
  border-radius:14px;
  padding:18px;
  box-shadow:0 8px 20px rgba(0,0,0,.06)
}
.review p{color:#555;margin-bottom:12px}

.meta{display:flex;gap:12px;align-items:center}
.avatar{width:44px;height:44px;border-radius:50%;object-fit:cover}
.name{font-weight:700}
.role{font-size:13px;color:#777}

/* animations */
.ltr{animation-name:scrollLTR}
.rtl{animation-name:scrollRTL}

@keyframes scrollLTR{
  from{transform:translateX(-50%)}
  to{transform:translateX(0)}
}
@keyframes scrollRTL{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}
}

/* pause on hover */
.reviews-track:hover,
.partner-track:hover{
  animation-play-state:paused
}

/* mobile */
@media(max-width:640px){
  h1{font-size:26px}
}