/* Reset and basic styling */

/* Carousel Container */
.carousel-container {
  width: 100%;
  display: flex;
  flex-direction: column;
  padding: 20px 0px;
  gap: 40px;
  margin: auto;
  overflow: hidden; /* Hides cards that are off-screen */
  position: relative;
}

/* The Moving Track */
.carousel-track {
  display: flex;
  transition: transform 0.5s ease-in-out; /* Smooth sliding animation */
  gap: 20px; /* Space between cards */
}

/* Individual Cards */
.testimonial-card {
  /* Calculation: 100% width / 3 items. 
       We subtract the gap logic to fit perfectly, 
       but simplified: min-width 30-33% works well with flex 
    */
  min-width: calc((100% / 3) - 14px);
  background: white;
  padding: 30px 35px;
  border-radius: 10px;
  /* box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); */
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Navigation Buttons */
.nav-btn {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
  border: none;

  cursor: pointer;

  font-size: 18px;
  z-index: 10;
}

.nav-btn:hover {
  background-color: var(--primary-theme-color);
}
.carosoul-navigation-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* Dots */
.dots-container {
}

.dot {
  display: inline-block;
  height: 10px;
  width: 10px;
  margin: 0 3px;
  background-color: #bbb;
  border-radius: 50%;
  cursor: pointer;
  transition: background-color 0.3s;
}

.dot.active {
  background-color: var(--primary-theme-color);
}

.review-star {
  display: flex;
  gap: 2px;
}

.each-star-div {
  width: 25px;
  height: 25px;
}

.each-star-div img {
  width: 100%;
}

.client-avatar {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  margin-top: 10px;
}

.client-avatar img {
  width: 100%;
}
.client-app-type {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
}

.app-type-icon-div {
  width: 30px;
  height: 30px;
}

.app-type-icon-div img {
  width: 100%;
}

@media screen and (max-width: 700px) {
  .testimonial-card {
    /* Calculation: 100% width / 3 items. 
         We subtract the gap logic to fit perfectly, 
         but simplified: min-width 30-33% works well with flex 
      */
    min-width: calc((100%) - 14px);
    background: white;
    padding: 30px 35px;
    border-radius: 10px;
    /* box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); */
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
}