/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Aug 27 2025 | 10:06:47 */
/* Add your CSS code here.

For example:
.example {
    color: red;
}

For brushing up on your CSS knowledge, check out http://www.w3schools.com/css/css_syntax.asp

End of comment */ 

.t-wrap{
  position: relative;
  background: #ffe6e6;             /* soft pink like reference */
  border-radius: 28px;
  padding: 56px 24px 72px;         /* room for dots */
  overflow: hidden;
}

/* Scroll track */
.t-track{
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 100%;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;           /* Firefox */
}
.t-track::-webkit-scrollbar{ display:none; }

/* Cards */
.t-card{
  scroll-snap-align: center;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 8px 20px rgba(0,0,0,.06);
  padding: 18px 18px 14px;
  max-width: 640px;
  margin-inline: auto;
}
.t-head{
  display: flex; align-items: center; gap: 12px; margin-bottom: 10px;
}
.t-avatar{
  width: 44px; height: 44px; border-radius: 50%; object-fit: cover;
}
.t-meta{ line-height: 1.1; }
.t-name{ margin: 0; font-weight: 700; }
.t-role{ margin: 2px 0 0; color: #8a8f98; font-size: .9rem; }
.t-text{ margin: 10px 0 14px; color: #4a4f57; }
.t-foot{
  display: flex; align-items: center; justify-content: space-between;
  border-top: 1px dashed #f0f0f0; padding-top: 10px;
}
.t-stars i{ font-size: 1rem; color: #ffb703; } /* gold stars */
.t-date{ color: #8a8f98; font-size: .9rem; }

/* Controls */
.t-nav{
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 40px; height: 40px; border: 0; border-radius: 50%;
  background: #fff; box-shadow: 0 6px 16px rgba(0,0,0,.12);
  display: grid; place-items: center; cursor: pointer;
}
.t-prev{ left: 12px; }
.t-next{ right: 12px; }

/* Dots */
.t-dots{
  position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%);
  display: flex; gap: 8px; align-items: center; justify-content: center;
}
.t-dot{
  width: 8px; height: 10px; border-radius: 50%;
  background:#800000; opacity: 1; transition: .2s;
	border: 0px solid white;
}
.t-dot.is-active{     width: 8px;
    height: 10px; border-radius: 50%; opacity: 1; background:#e2838b;
border: 0px solid white;}

/* RESPONSIVE columns like your CSS: 1 / 2 / 3 */
@media (min-width: 576px){
  .t-track{ grid-auto-columns: 50%; }
}
@media (min-width: 992px){
  .t-track{ grid-auto-columns: calc(100% / 3); }
}

/* Nice hover */
.t-card:hover{ box-shadow: 0 10px 26px rgba(0,0,0,.12); transform: translateY(-1px); transition: .25s; }