/* =========================================
   HOME — page-specific stylesheet (final)
   ========================================= */

/* ----- Section headings ----- */
.section-padding h2{
  text-align:center;
  font-weight:800;
  letter-spacing:.2px;
  margin-bottom:1.25rem;
  position:relative;
}
.section-padding h2::after{
  content:"";
  display:block;
  width:92px; height:5px;
  margin:12px auto 0;
  border-radius:999px;
  background:linear-gradient(90deg,#667eea,#764ba2);
  box-shadow:0 10px 28px rgba(102,126,234,.28);
}

/* Optional small subtitle under headings */
.section-subtitle{
  text-align:center;
  color:#6c757d;
  max-width:760px;
  margin:10px auto 0;
  font-size:1.05rem;
}

/* ----- Section spacing + alternating backgrounds ----- */
.section-padding{ padding:90px 0; }
.section-padding:nth-of-type(odd){  background-color:#ffffff; }
.section-padding:nth-of-type(even){ background-color:#f3f6fb; }
.section-padding.bg-light{ background-color:#eef3ff !important; }

/* Soft divider between adjacent sections */
.section-padding + .section-padding{ position:relative; }
.section-padding + .section-padding::before{
  content:""; position:absolute; left:0; right:0; top:0; height:18px;
  pointer-events:none;
  background:linear-gradient(to bottom, rgba(0,0,0,.06), rgba(0,0,0,0));
  opacity:.35;
}

/* =========================================
   Services (cards)
   ========================================= */
.section-padding .card{
  border-radius:16px;
  box-shadow:0 10px 28px rgba(0,0,0,.08);
  border:1px solid #e9eef6;
  transition:transform .22s ease, box-shadow .22s ease;
}
.section-padding .card:hover{
  transform:translateY(-6px);
  box-shadow:0 18px 40px rgba(0,0,0,.14);
}
.section-padding .card .fa-3x{
  display:inline-flex; align-items:center; justify-content:center;
  width:82px; height:82px; border-radius:50%;
  box-shadow:inset 0 0 0 8px rgba(102,126,234,.12), 0 10px 24px rgba(102,126,234,.18);
  margin-bottom:16px;
}
.section-padding .card-title{
  font-weight:800; letter-spacing:.2px; margin-bottom:12px;
}

/* Compact feature list inside service cards */
.feature-list{
  list-style:none; padding:0; margin:12px 0 0;
  display:inline-block; text-align:left; max-width:520px;
}
.feature-list.feature-list--compact li{
  position:relative; padding:10px 0 10px 30px; border-bottom:1px solid #eee;
  font-size:1.05rem; line-height:1.55;
}
.feature-list.feature-list--compact li:last-child{ border-bottom:none; }
.feature-list.feature-list--compact li::before{
  content:""; position:absolute; left:0; top:12px; width:16px; height:16px; border-radius:50%;
  background:linear-gradient(45deg,#667eea,#764ba2);
  box-shadow:0 4px 10px rgba(102,126,234,.35);
}
.feature-list.feature-list--compact li::after{
  content:""; position:absolute; left:3px; top:14px; width:10px; height:6px;
  border-left:2px solid #fff; border-bottom:2px solid #fff; transform:rotate(-45deg);
}

/* =========================================
   Why Partner list
   ========================================= */
.why-points {
  list-style: none; padding: 0; margin: 0;
}
.why-points li {
  position: relative;
  padding-left: 44px;
  margin: 18px 0;
  line-height: 1.6;
  word-break: break-word;
  hyphens: auto;
}
.why-points li .ico, .why-points li i {
  position: absolute; left: 0; top: .25em;
  width: 28px; height: 28px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: #eaf0ff; color: #3b82f6; font-size: 14px; font-weight: 700;
}
.why-points li b {
  font-weight: 800; letter-spacing: .2px; margin-right: 4px;
}

/* =========================================
   Reviews — fixed height (scroll inside), 6 cards
   ========================================= */
#reviewsContainer{ row-gap:1.5rem; }

/* Outer card */
#reviewsContainer .card{
  border-radius:18px;
  border:1px solid #e9eef6;
  background:#ffffff;
  box-shadow:0 10px 28px rgba(0,0,0,.08);
  height:280px;
  width:100%;
  display:flex;
  flex-direction:column;
}

/* Keep card body tidy */
#reviewsContainer .card-body{
  /* padding:20px 20px 16px; */
  display:flex;
  flex-direction: column;
  flex: 1;
  padding: 20px;
}

/* Name + stars */
#reviewsContainer .card-title{ font-weight:800; margin-bottom:8px; }
#reviewsContainer .card-subtitle{ margin-bottom:12px; color:#d1a53f !important; }

/* Scrollable quote area with fixed height */
#reviewsContainer .card-text{
  position:relative;
  background:#f9fbff;
  border:1px solid #eef2f7;
  border-radius:12px;
  padding:14px 16px 14px 44px;
  margin:0 0 10px;
  color:#3b4251;
  line-height:1.6;
  max-height: 140px;          
  overflow-y: auto;           
  scrollbar-width: thin;      
}
#reviewsContainer .card-text::-webkit-scrollbar{ width:8px; }
#reviewsContainer .card-text::-webkit-scrollbar-thumb{
  background:rgba(0,0,0,.15); border-radius:8px;
}

#reviewsContainer .card-text::before{
  content:"“"; 
  position:absolute; 
  left:12px; top:2px;
  font-size:44px; 
  line-height:1; 
  color:#a9b4c9; 
  font-weight:700;
}

#reviewsContainer small.text-muted{
  display:block;
   margin-top:6px; 
   color:#6b7280 !important;
   font-size:0.85rem;
}

/* =========================================
   CTA band
   ========================================= */
.cta-section{
  background-color:#1e293b; /* or swap for gradient */
  color:#fff;
}
.cta-section .btn{
  border-radius:28px; padding:12px 28px; font-weight:700;
  box-shadow:0 10px 24px rgba(0,0,0,.15);
}
.cta-section .btn:hover{ transform:translateY(-2px); }

/* =========================================
   Clients rail (horizontal scroller)
   ========================================= */
.clients-rail{ position:relative; margin-top:18px; }
.rail-viewport{
  overflow:auto; -webkit-overflow-scrolling:touch; scroll-behavior:smooth;
  padding-bottom:4px;
}
.rail-track{
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:calc((100% - 32px) / 3); /* 3 cards visible */
  gap:16px; list-style:none; padding:0; margin:0;
}
.rail-card .card{
  border:1px solid #e9eef6;
  border-radius:16px;
  box-shadow:0 10px 28px rgba(0,0,0,.08);
  overflow:hidden;
  transition:transform .2s ease, box-shadow .2s ease;
  background:#fff;
}
.rail-card .card:hover{
  transform:translateY(-4px);
  box-shadow:0 18px 40px rgba(0,0,0,.14);
}
.rail-card .thumb{ width:100%; aspect-ratio:16/10; background:#f3f6fb; display:block; overflow:hidden; }
.rail-card .thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.rail-card .thumb .img-fallback{
  width:100%; height:100%; display:flex; align-items:center; justify-content:center;
  color:#9aa7bd; font-weight:600;
}
.rail-card .card-body{ padding:16px 16px 18px; }
.rail-card .card-title{ font-weight:800; letter-spacing:.2px; margin-bottom:6px; }
.rail-card .card-text{ color:#3b4251; font-size:.98rem; line-height:1.6; min-height:3.2em; }

.rail-btn{
  position:absolute; top:50%; transform:translateY(-50%);
  z-index:2; width:40px; height:40px; border-radius:10px;
  border:1px solid rgba(170,195,255,.28); background:rgba(255,255,255,.9);
  color:#4f46e5; font-weight:800; display:flex; align-items:center; justify-content:center;
  box-shadow:0 6px 18px rgba(0,0,0,.08);
}
.rail-btn:hover{ background:#fff; }
.rail-btn:disabled{ opacity:.4; cursor:not-allowed; }
.rail-prev{ left:-12px; } .rail-next{ right:-12px; }

/* =========================================
   Responsive tweaks
   ========================================= */
@media (max-width: 992px){
  .section-padding{ padding:72px 0; }
  .rail-track{ grid-auto-columns: calc((100% - 16px) / 2); }
}
@media (max-width: 576px){
  .section-padding h2{ font-size:1.55rem; }
  .section-padding h2::after{ width:64px; height:3px; margin-top:10px; }
  .rail-track{ grid-auto-columns: 100%; }
  .rail-prev{ left:-6px; } .rail-next{ right:-6px; }
}