/* @import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap'); */
/* vmbs-slider.css */
*{box-sizing:border-box;margin:0;padding:0}
:root{
  --primary:#00adef;
  --btn:rgba(0,0,0,0.15);
  --white:#ffffff;
  --shadow-dark: rgba(0,0,0,0.12);
  --shadow-light: rgba(255,255,255,0.6);
  --radius: 12px;
}

/* Section/viewport */
.testimonial-section{
  min-height: 60vh;
  display:grid;
  place-items:center;
  padding: 2.5rem 1rem;
}

.testimonial-section-inner{
  width:100%;
  max-width:980px;
  overflow:hidden; /* <-- IMPORTANT: hide overflowing slides */
  position:relative;
}

/* Slider track (horizontal row) */
.slider{
  display:flex;
  flex-wrap:nowrap;
  transition: transform 0.7s cubic-bezier(.22,.9,.36,1);
  will-change: transform;
}

/* Each slide = one viewport width */
.item{
  flex: 0 0 100%;
  min-width: 100%;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:1rem;
  padding: 1rem;
  box-sizing:border-box;
  position:relative;
}

/* Testimonial panel (neomorphism) */
.item .testimonial{
  width: 65%;
  min-height: 220px; /* JS will adjust to tallest if needed */
  padding: 1.5rem 1.75rem;
  background: var(--primary);
  color: var(--white);
  border-radius: var(--radius);
  box-shadow:
    10px 10px 24px var(--shadow-dark),
    -8px -8px 18px var(--shadow-light);
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  line-height: 1.55;
  font-weight: 300;
  overflow: hidden;
  transform: translateX(30px);     /* initial offscreen for animation */
  opacity: 0;                      /* hidden until animation class */
  transition: transform .6s ease, opacity .6s ease;
}

/* initial text states for staggering */
.item .testimonial .testimonial-text{
  font-weight:600;
  font-size:0.95rem;
  margin-bottom: 1rem;
  max-height: calc(1.25rem * 6); /* collapsed height */
  overflow-y: auto;              /* <-- make this scrollable vertically */
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;   /* prevent touch chaining to page */
  transform: translateY(16px);
  opacity: 0;
  transition: transform .4s ease, opacity .4s ease, max-height .35s ease;
}

/* author/role */
.item .testimonial .author{
  margin-top:0.5rem;
  font-style:italic;
  color: rgba(255,255,255,0.92);
}
.item .testimonial .role{
  font-size:0.8rem;
  color: rgba(255,255,255,0.82);
}

/* read more button (will be appended by JS when needed) */
.read-more-toggle{
  display:inline-block;
  margin-top:0.6rem;
  background:transparent;
  color: #fff;
  border: 1px solid rgba(255,255,255,0.14);
  padding:0.25rem 0.6rem;
  border-radius:8px;
  cursor:pointer;
  font-size:0.8rem;
}

/* image / logo */
.item .image{
  width: 30%;
  max-width:260px;
  object-fit: contain;
}

/* animation applied by JS */
.item.animation .testimonial{
  transform: translateX(0);
  opacity: 1;
}

/* staggered text reveal (when animation class present) */
.item.animation .testimonial .testimonial-text{
  transform: translateY(0);
  opacity: 1;
  transition-delay: .25s;
}

/* Dots / Pagination Styling */
.vmbs-dots {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: center;
  padding-top: 12px;
  width: 100%;
}

.vmbs-dots button {
  width: 12px;
  height: 12px;
  border-radius: 50%; /* This makes them circular */
  background: rgba(0, 0, 0, 0.15);
  border: none;
  cursor: pointer;
  padding: 0; /* Remove any default padding */
  margin: 0; /* Remove any default margins */
  transition: all 0.22s ease;
  overflow: hidden; /* Ensures content stays within the circle */
  text-indent: -9999px; /* Hide any text content */
}

.vmbs-dots button.active {
  width: 12px;
  height: 12px;
  background: #00adef; /* Your primary color */
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
  transform: none; /* Remove any transforms that might be stretching it */
}

/* If dots are still not perfectly round, add this: */
.vmbs-dots button::before {
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
}

/* responsive tweaks */
@media (max-width:900px){
  .item .testimonial{ width:60%; min-height:200px; padding:1.1rem; }
  .item .image{ width:36%; max-width:200px; }
}
@media (max-width:640px){
/* Section/viewport */
.testimonial-section{
  min-height: 100%;
  display:grid;
  place-items:center;
  padding: 2.5rem 1rem;
}

.testimonial-section-inner{
  width:100%;
  max-width:980px;
  overflow:hidden; /* <-- IMPORTANT: hide overflowing slides */
  position:relative;
}

/* Slider track (horizontal row) */
.slider{
  display:flex;
  flex-wrap:nowrap;
  height: 100%!important;
  transition: transform 0.7s cubic-bezier(.22,.9,.36,1);
  will-change: transform;
}
  .item{ 
    flex-direction:column; 
    text-align:center; 
    align-items:center; 
  }
  .item .testimonial {
    box-sizing: border-box;
    padding: 20px;
    background: #00adef;
    box-shadow: 8px 8px 20px rgba(0,0,0,0.15),
                -8px -8px 20px rgba(255,255,255,0.3); /* neomorphism */
    border-radius: 16px;
    width: 100%;
    order:2; /* put image first */
  }
  .item .image{ 
    width:60%; 
    max-width:200px; 
    margin:10px auto 0; 
    order:1; /* put image first */
  }
  .vmbs-dots {
    padding-top: 12px;
    position: relative;
    bottom: 0; 
  }
}


/* optional: a minimal custom scrollbar for testimonial text */
.item .testimonial .testimonial-text::-webkit-scrollbar{ width:8px }
.item .testimonial .testimonial-text::-webkit-scrollbar-thumb{ background: rgba(0,0,0,0.15); border-radius:8px }