/* ================= RESET ================= */
*{
  margin:0;
  padding:0;
  box-sizing:border-box;
  font-family:'Segoe UI', Arial, sans-serif;
}

/* ================= SLIDER WRAPPER ================= */
.keyword-slider{
  width:100%;
  padding:40px 0;
  background:#f2f3ff;
}


/* DARK OVERLAY */
.slider-bg::after{
  content:"";
  position:absolute;
  inset:0;
  background:rgba(0,0,0,0.6);
  z-index:1;
}

/* ================= TEXT SLIDER ================= */
.text-slider{
  position:absolute;
  inset:0;
  z-index:2;
  display:flex;
  align-items:center;
  justify-content:center;   /* 🔥 DESKTOP CENTER */
  overflow:hidden;
}

/* SLIDE TRACK */
.slide-track{
  width:100%;
  display:flex;
  flex-direction:column;
  align-items:center;       /* 🔥 CENTER ITEMS */
  animation:verticalSlide 16s linear infinite;
}

/* ================= EACH TITLE ================= */
.slide-item{
  width:100%;
  max-width:90%;
  color:#ffffff;
  font-size:14px;
  font-weight:600;
  text-align:center;        /* 🔥 CENTER TEXT */
  padding:8px 10px;
  line-height:1.45;
  white-space:normal;
  text-shadow:0 2px 6px rgba(0,0,0,0.6);
}

/* ================= ANIMATION ================= */
@keyframes verticalSlide{
  0%   { transform:translateY(0); }
  100% { transform:translateY(-50%); }
}

/* ================= MOBILE (UNCHANGED & PERFECT) ================= */
@media (max-width:768px){

  .keyword-slider{
    padding:30px 0;
  }

  .slider-bg{
    height:220px;
  }

  .text-slider{
    justify-content:flex-start;   /* ✅ mobile same as before */
  }

  .slide-track{
    align-items:flex-start;
  }

  .slide-item{
    max-width:100%;
    font-size:11px;
    padding:6px 8px;
    text-align:left;              /* ✅ mobile same */
  }
}
       













  /* ================= CHOOSE SERVICE SECTION ================= */
.cs-section{
  padding:50px 0;
  background:#f6f8fc;
  font-family:'Segoe UI',sans-serif;
}

.cs-title{
  text-align:center;
  font-size:28px;
  font-weight:700;
  margin-bottom:30px;
  color:#0b1f3a;
}

/* ===== DESKTOP GRID ===== */
.cs-slider{
  max-width:1100px;
  margin:auto;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:22px;
  padding:0 16px;
}

/* ===== CARD ===== */
.cs-card{
  background:#fff;
  border-radius:16px;
  padding:20px 12px;
  text-align:center;
  text-decoration:none;
  color:#111;
  box-shadow:0 10px 25px rgba(0,0,0,.08);
  transition:transform .35s ease, box-shadow .35s ease;
}

.cs-card:hover{
  transform:translateY(-8px);
  box-shadow:0 16px 35px rgba(0,0,0,.15);
}

/* ===== IMAGE ===== */
.cs-img-wrap{
  width:120px;
  height:120px;
  margin:0 auto 12px;
  border-radius:50%;
  background:#eef2fb;
  display:flex;
  align-items:center;
  justify-content:center;
}

.cs-img-wrap img{
  width:75%;
  height:auto;
}

/* ===== TEXT ===== */
.cs-label{
  display:block;
  font-size:16px;
  font-weight:600;
  margin-top:6px;
}

/* ================= MOBILE SLIDER ================= */
@media(max-width:768px){

  .cs-slider{
    display:flex;
    gap:14px;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    padding:0 16px;
  }

  .cs-slider::-webkit-scrollbar{
    display:none;
  }

  .cs-card{
    flex:0 0 45%;   /* ✅ 2 cards full + 3rd 20% visible */
    scroll-snap-align:start;
  }

  .cs-title{
    font-size:24px;
  }
}