/* Old CSS */
/* ✅ Style for Section Heading (Top Content) */
.testimonial-heading {
    text-align: center;
    font-size: 24px;
    font-weight: bold;
    color: #333;
    margin-bottom: 20px;
}

/* Section Title */
.review-title {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 20px;
    color: #333;
    text-align: left;
}
.socialreviewimage{
    padding-left:30px;
    padding-right:30px;
    height:auto;
    width:auto;
}
.review-text {
    text-align: left;
    font-family: Arial, Helvetica, sans-serif;
    font-size:12px;
}
.reviewer-name {
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    color: #333;
    font-size: 12px;
    margin: 0;
    text-align: left;
}
/* ✅ Review Title */
.review-title-text {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    font-weight: bold;
    color: #000;
    margin-top: 5px;
    margin-bottom: 5px;
    text-align: left;
}

/* Verified Badge */
.verified-badge {
    color: grey;
    padding: 4px 8px;
    border-radius: 5px;
    font-size: 12px;
    font-weight: bold;
    display: inline-block;
   
 
}

/* Review Timestamp */
.review-timestamp {
    font-size: 12px;
    color: gray;
  
    text-align: left;
    display: block;
}

/* Reviewer Name */

.review-name {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    color: #333;
    display: flex;
    align-items: center;
    gap: 5px;
    font-weight: bold;
    padding-top: 15px;
    padding-bottom:15px;

}
/* Review Card Hover Effect */
.review-card:hover {
    transform: translateY(-5px);
}

/* ✅ Review Header (Stars & Verified Badge) */
.review-header {
    display: flex;
    align-items: center;
    gap: 5px;
}

/* ✅ Star Ratings */
.review-stars {
    font-size: 16px;
    display: flex;
    align-items: center;
    gap: 2px;
}




/* ✅ General Styling */
/* Star Rating Colors */
.star-five { background-color: #00b67a; } /* Green */
.star-four { background-color: #73cf11; } /* Light Green */
.star-three { background-color: #ffce00; } /* Yellow */
.star-two { background-color: #ff8622; } /* Orange */
.star-one { background-color: #ff3722; } /* Red */
/* ✅ General Styling */
.reviews-section {
    background: #f9f9f9;
    padding: 40px 20px;
    display: flex;
    justify-content: center;
}

.reviewcontainer {
    max-width: 1200px;
    width: 100%;
}

/* ✅ Layout Styling */
.reviews-layout {
    display: flex;
    gap: 30px;
    align-items: flex-start;
    justify-content: center;
    flex-wrap: wrap;
}

/* ✅ Left Section (Logos & Button) */
.review-left-section {
    display: flex;
    flex-direction: column;
    align-items: center;
   
    max-width: 100%;
}

.review-image-box img {
    max-width: 100%;
    transition: transform 0.3s ease-in-out;
}

.review-image-box img:hover {
    transform: scale(1.05);
}

.more-testimonials-btn {
    display: inline-block;
    padding: 10px 15px;
    background: #0073e6;
    color: #fff;
    text-transform: uppercase;
    font-weight: bold;
    border-radius: 5px;
    text-decoration: none;
    transition: background 0.3s ease-in-out;
}

.more-testimonials-btn:hover {
    background: #005bb5;
}

/* ✅ Masonry Layout (Column-wise Stacking) */
.reviews-wrapper {
    width: 100%;
     overflow-x: hidden; /* Ensures no horizontal scroll */
    height: 500px; /* Adjust height as needed */
    overflow-y: auto;
    padding: 10px 0;
    scroll-behavior: smooth;
}

/* ✅ Masonry Effect using CSS Columns */
.review-grid {
    column-count: 4; /* Adjust based on available space */
    column-gap: 15px;
}

/* ✅ Review Cards (Auto-Height Without Gaps) */
.review-card {
    background: #fff;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.1);
    display: inline-block; /* Important for Masonry effect */
    width: 100%;
    margin-bottom: 15px; /* Prevents overlapping */
    break-inside: avoid; /* Ensures cards don't break across columns */
}

/* ✅ Review Header */
.review-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.review-stars {
    display: flex;
}

.star {
    font-size: 30px;
    margin-right: 3px; 
    color: #fff;
    
}

.filled {
    color: #fff;
}

.empty {
    color: #ccc;
}



/* ✅ Scrollbar Customization */
.reviews-wrapper::-webkit-scrollbar {
    width: 6px;
}

.reviews-wrapper::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 3px;
}

.reviews-wrapper::-webkit-scrollbar-thumb {
    background: #0073e6;
    border-radius: 3px;
}

.reviews-wrapper::-webkit-scrollbar-thumb:hover {
    background: #005bb5;
}

/* ✅ Responsive Adjustments */
@media (max-width: 1024px) {
    .review-grid {
        column-count: 2;
    }
}

@media (max-width: 768px) {
    .review-grid {
         column-count: 1;
    }
}

/* ✅ Align Social Logos in a Single Row */
.review-left-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 100%;
}

/* ✅ Create a Flexbox for Social Logos */
.review-socials {
   display: flex;
    justify-content: center;
    align-items: center;
    gap: 30px; /* Ensures even spacing */
    margin-bottom: 30px;
}
/* ✅ Style Social Logos */
.review-image-box {
    flex: 1; /* Ensures each logo gets equal space */
    display: flex;
    justify-content: center;
     max-width: 220px;
}


/* ✅ Style Social Logos */
.review-image-box img {
    
    max-width:100%;
    height:auto;
    transition: transform 0.3s ease-in-out;
}

.review-image-box img:hover {
    transform: scale(1.1);
}

/* ✅ Center Button */
.more-testimonials-container {
    text-align: center;
    margin-top: 15px;
}

.more-testimonials-btn {
    display: inline-block;
    padding: 10px 15px;
    background: #0073e6;
    color: #fff;
    text-transform: uppercase;
    font-weight: bold;
    border-radius: 5px;
    text-decoration: none;
    transition: background 0.3s ease-in-out;
}

.more-testimonials-btn:hover {
    background: #005bb5;
}

/* ✅ Responsive Adjustment */
@media (max-width: 768px) {
    .review-socials {
        flex-direction: column;
         align-items: center;
        gap: 15px; /* Adds spacing when stacked */
    }
    .review-image-box {
        width: 100%;
        justify-content: center;
    }
    .star {
    font-size: 21px;
    margin-right: 3px;
}
}