/* ===========================================
   ROOT VARIABLES – FULL MANUAL CONTROL
   =========================================== */
:root {
  /* THEME COLORS */
  --eco-green: #2f8c36;
  --eco-green-dark: #1c8a00;
  --mountain-purple: #8b2ccf;
  --carbon-black: #111111;
  --soft-grey: #f3f3f3;
  --white: #ffffff;

  /* SECTION BACKGROUND */
  --section-bg: #ffffff;

  /* CARD CONTROL */
  --card-bg: var(--white);
  --card-radius: 14px;
  --card-padding: 15px;
  --card-shadow: 0 6px 15px rgba(0,0,0,0.08);
  --card-width: 100%;               /* change to 90%, 80%, etc */

  /* AVATAR CONTROL */
  --avatar-size: 50px;
  --avatar-radius: 50%;             /* make square or circle */

  /* FONT SIZES */
  --name-size: 15px;
  --company-size: 12px;
  --message-size: 14px;

  /* SPACING */
  --gap: 40px;

  /* HEIGHT OF SCROLL AREA */
  --scroll-height: 450px;

  /* ANIMATION SPEEDS PER COLUMN (super control) */
  --speed-col-1: 18s;    /* fast */
  --speed-col-2: 22s;    /* slow */
  --speed-col-3: 16s;    /* ultra fast */
  --speed-col-4: 25s;    /* slow */

  /* DIRECTIONS */
  --direction-col-1: scrollUp;
  --direction-col-2: scrollDown;
  --direction-col-3: scrollUp;
  --direction-col-4: scrollDown;
}

/* ===========================================
   SECTION
   =========================================== */
.testimonials-section {
  padding: 40px;
  background: var(--section-bg);
}

/* 4 COLUMN SCROLL GRID */
.scroll-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--gap);
  overflow: hidden;
  height: var(--scroll-height);
  position: relative;
}

/* Each column */
.scroll-column {
  display: flex;
  flex-direction: column;
  gap: var(--gap);
  width: 100%;
}

/* ===========================================
   TESTIMONIAL CARD
   =========================================== */
.t-card {
  width: var(--card-width);
  background: var(--card-bg);
  padding: var(--card-padding);
  border-radius: var(--card-radius);
  box-shadow: var(--card-shadow);
}

/* Top row: avatar + name */
.top {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Avatar */
.avatar {
  width: var(--avatar-size);
  height: var(--avatar-size);
  border-radius: var(--avatar-radius);
  object-fit: cover;
}

/* Text */
.top h4 {
  font-size: var(--name-size);
  font-weight: 600;
  margin: 0;
}

.company {
  font-size: var(--company-size);
  color: #999;
}

.msg {
  margin-top: 10px;
  font-size: var(--message-size);
  line-height: 1.5;
}

/* ===========================================
   INFINITE SCROLL ANIMATIONS
   =========================================== */
@keyframes scrollUp {
  0% { transform: translateY(0); }
  100% { transform: translateY(-100%); }
}

@keyframes scrollDown {
  0% { transform: translateY(-100%); }
  100% { transform: translateY(0); }
}

/* Apply animation using root variables */
.scroll-column:nth-child(1) {
  animation: var(--direction-col-1) var(--speed-col-1) linear infinite;
}

.scroll-column:nth-child(2) {
  animation: var(--direction-col-2) var(--speed-col-2) linear infinite;
}

.scroll-column:nth-child(3) {
  animation: var(--direction-col-3) var(--speed-col-3) linear infinite;
}

.scroll-column:nth-child(4) {
  animation: var(--direction-col-4) var(--speed-col-4) linear infinite;
}