/* Marquee Container */
.marquee-container {
  position: relative;
  width: 100%;
  overflow: hidden;
  padding: 20px 0 0;
  margin-top: 0px;
  display: flex;
}

/* First Row - Right to Left */
.marquee-row-1 .marquee-content {
  display: flex;
  gap: 24px;
  animation: marquee-rtl 180s linear infinite;
  flex-shrink: 0;
}

.marquee-row-1 .marquee-content-clone {
  display: flex;
  gap: 24px;
  animation: marquee-rtl 180s linear infinite;
  flex-shrink: 0;
}

/* Second Row - Left to Right (opposite direction) */
.marquee-row-2 .marquee-content {
  display: flex;
  gap: 24px;
  animation: marquee-ltr 180s linear infinite;
  flex-shrink: 0;
}

.marquee-row-2 .marquee-content-clone {
  display: flex;
  gap: 24px;
  animation: marquee-ltr 180s linear infinite;
  flex-shrink: 0;
}
.reviewsWrap{
  margin-top: 50px;
}
/* Pause animation on reviewsWrap hover */
.reviewsWrap:hover .marquee-content {
  animation-play-state: paused;
}

/* Right to Left animation */
@keyframes marquee-rtl {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

/* Left to Right animation (opposite) */
@keyframes marquee-ltr {
  0% {
    transform: translateX(-50%);
  }
  100% {
    transform: translateX(0);
  }
}

/* Review Card */
.review-card {
  background: white;
  border-radius: 16px;
  padding: 24px;
  min-width: 380px;
  max-width: 380px;
  height: 274px;
  box-shadow: 0px 0px 16px 0px #469FDF33;
  transition: all 0.3s ease;
  flex-shrink: 0;
  border: 1px solid #CFDEF0;
  display: flex;
  flex-direction: column;
}

.review-card:hover {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  transform: translateY(-4px);
}

.review-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 16px;
  gap: 12px;
}

.platform-name {
  flex-shrink: 0;
  font-size: 14px;
  font-weight: 600;
  color: #464860;
}

.rating-info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
}

.rating-number {
  font-size: 13px;
  font-weight: 400;
  color: #60738A;
}

.review-time {
 
  
 font-size: 11px;
  font-weight: 400;
  color: #9ca3af;
}

/* Stars */
.stars-rating {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}

.stars {
  display: flex;
  gap: 2px;
}

.star {
  color: #fbbf24;
  font-size: 18px;
}

.rating-text {
  font-size: 14px;
  font-weight: 600;
  color: #1a1a1a;
  margin-left: 4px;
}

/* Company Name */
.reviwe-title {
  font-size: 14px;
  font-weight: 500;
 
line-height: 150%;
  color: #464860;
  margin-bottom: 10px;
}

/* Review Text Wrapper */
.review-text-wrapper {
  flex: 1;
  margin-bottom: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Review Text */
.review-text {
  font-size: 12px;
  font-weight: 400;
  line-height: 180%;
  color: #60738A;
  margin: 0;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
}


.review-read-more {
  color: #0654E6;
  font-weight: 500;
  text-decoration: underline;
  white-space: nowrap;
  transition: color 0.2s ease;
  font-size: 12px;
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.review-read-more:hover {
  color: #1d4ed8;
  text-decoration: none;
}

.review-read-more.dynamic::after {
  content: '';
  display: inline-block;
  width: 12px;
  height: 12px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%230654E6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'/%3E%3Cpolyline points='15 3 21 3 21 9'/%3E%3Cline x1='10' y1='14' x2='21' y2='3'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  transition: transform 0.2s ease;
}



.review-read-more:hover::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%231d4ed8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'/%3E%3Cpolyline points='15 3 21 3 21 9'/%3E%3Cline x1='10' y1='14' x2='21' y2='3'/%3E%3C/svg%3E");
  transform: translate(1px, -1px);
}

/* Verified Badge */
.verified-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background-color: #E3FFEE;
  color: #0E9E42;
  padding: 2px 10px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 500;
  line-height: 180%;
  margin-bottom: 20px;
}

 

/* Review Details */
.review-details {
  margin-bottom: 8px;
  padding-bottom: 20px;
  border-bottom: 1px solid #D8EAFF;
}

.subject-info {
  display: flex;
  align-items: center;
  gap: 6px;
 position: relative;
 
font-weight: 400;
font-style: Regular;
font-size: 12px;
leading-trim: CAP_HEIGHT;
line-height: 140%;
letter-spacing: 0%;
vertical-align: middle;
color: #464860;

}
.subject-info::before{
  content: '';
  background: url('./image/doc.svg');
  width: 15px;
  height: 15px;
  background-size:contain;
}

.subject-icon {
  font-size: 16px;
}

/* Review Footer */
.review-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: auto;
  padding-top: 12px;
}

.author-info {
  display: flex;
  align-items: center;
  gap: 10px;
}

.author-avatar {
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  border-radius: 50%;
  background: #0654E6;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 14px;
}

.author-name {
  font-size: 14px;
  font-weight: 500;
  line-height: 100%;
  color: #464860;
}

.review-date {
  font-size: 12px;
  font-weight: 400;
  color: #5B5D62;
}

.grade-badge {
display: flex;
    align-items: center;
    gap: 5px;
    font-size: 13px;
    color: #7188A6;
    font-weight: 400;
    font-size: 11px;
    line-height: 110%;
}
.grade-badge::before{

content: '';
background: url(./image/star.svg);
width:12px;
height: 12px;
background-repeat: no-repeat;
display: inline-block;

}

.star-icon {
  font-size: 14px;
}

/* See All Reviews Button */
.see-all-reviews {
  text-align: center;
  margin-top: 60px;
}

.see-all-btn {
  background-color: #0654E6;
  color: white;
  border: none;
  padding: 9px 20px;
  border-radius: 12px;
  font-size: 15px;
  display: block;
  max-width: max-content;
  width: 100%;
  margin: 0 auto;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  height: 41px;
}

.see-all-btn:hover {
  background-color: #1d4ed8;
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.4);
  transform: translateY(-2px);
}

.see-all-btn:active {
  transform: translateY(0);
}
.verified-icon{
  background: url(./image/verify.svg);
  display: inline-block;
  width: 15px;
  height: 15px;
  background-size: contain;
  background-repeat: no-repeat;
}

/* Responsive Design */
@media (max-width: 768px) {


  .review-card {
    min-width: 340px;
    max-width: 340px;
    height: auto;
    min-height: 274px;
    padding: 20px;
  }

  .marquee-row-1 .marquee-content {
    animation: marquee-rtl 120s linear infinite;
  }

  .marquee-row-2 .marquee-content {
    animation: marquee-ltr 120s linear infinite;
  }
}

@media (max-width: 575px) {


  .review-card {
    min-width: 300px;
    max-width: 300px;
    height: auto;
    min-height: 260px;
    padding: 16px;
  }
    .marquee-container {
               padding: 0px 15px;
        
    }
  .see-all-btn {
    width: 100%;
    max-width: 300px;
    font-weight: 400;
  }
    .marquee-row-1 .marquee-content {
        animation: marquee-rtl 90s linear infinite;
        padding: 19px 15px 0;
        margin: 0px 15px;
    }

    .marquee-row-2 .marquee-content {
        animation: marquee-ltr 90s linear infinite;
        padding: 19px 15px 0px;
        margin: 0px 15px;
    }
    /* Webkit browsers (Chrome, Safari, Edge) */
.marquee-content::-webkit-scrollbar {
  width: 6px;                  /* Very thin – matches your image */
  height: 6px;
}
.reviewsWrap {
    margin-top: 30px;
}

.marquee-content::-webkit-scrollbar-track {
 background: #E9F4FF;     /* Fully transparent track */
  border-radius: 10px;
}

.marquee-content::-webkit-scrollbar-thumb {
  background: #0554E6;        /* Very light blue-gray when inactive */
  border-radius: 10px;
  transition: background 0.2s ease;
}

.marquee-content::-webkit-scrollbar-thumb:hover,
.marquee-content::-webkit-scrollbar-thumb:active {
  background: #0554E6         /* Bright blue when hovering or scrolling (exactly like your image) */
}

/* Optional: make corner fully clean */
.marquee-content::-webkit-scrollbar-corner {
  background: #E9F4FF;
}
}