/**
 * Specific fix for Clutch Rating text readability in hero section
 * Directly targets the exact elements shown in the screenshot
 */

/* Target the specific Clutch section with REVIEWED ON text */
.cl_sec, .clr_title, .clb_title {
  background-color: rgba(18, 18, 18, 0.85) !important;
  padding: 20px !important;
  border-radius: 8px !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5) !important;
  margin-top: 20px !important;
  margin-bottom: 20px !important;
}

/* Fix for "REVIEWED ON" text */
.cl_sec span, .clr_title span {
  color: var(--text-primary) !important;
  font-size: 18px !important;
  font-weight: 800 !important; /* Extra bold for maximum readability */
  letter-spacing: 1px !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7) !important;
}

/* Fix for stars */
.starts i.fa-star, 
.stars i.ri-star-fill {
  color: #FFD700 !important; /* Gold color */
  font-size: 24px !important;
  filter: drop-shadow(0px 0px 3px rgba(255, 215, 0, 0.3)) !important;
  margin-right: 2px !important;
}

/* Fix for Clutch logo */
.cl_sec img[src*="clutch"], 
.clb_title img {
  filter: brightness(1.2) !important;
  max-width: 150px !important;
}

/* Fix for rating text (4.9/5.0) */
.clb_title span,
.clb_title small {
  color: var(--text-primary) !important;
  font-weight: 700 !important; /* Increased from 600 to 700 for better readability */
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7) !important;
}

/* Make the rating number more visible */
.clb_title span:last-child {
  color: var(--text-primary) !important;
  font-size: 24px !important;
  font-weight: 800 !important; /* Extra bold for maximum readability */
}

/* Fix for "Average Review Rating" text */
.clb_title small {
  color: var(--text-secondary) !important;
  font-size: 14px !important;
  font-weight: 700 !important; /* Added bold for better readability */
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.7) !important;
}

/* Fix for company rating sections */
.company-rating, .company-rating-outer, .companyrating-list {
  background-color: rgba(18, 18, 18, 0.8) !important;
  padding: 15px !important;
  border-radius: 8px !important;
  margin: 20px 0 !important;
}

.companyrating-list-item {
  margin-bottom: 10px !important;
  background-color: rgba(30, 30, 30, 0.8) !important;
  padding: 8px !important;
  border-radius: 6px !important;
}

.ratings {
  color: var(--text-primary) !important;
  font-size: 18px !important;
  font-weight: 800 !important; /* Extra bold for maximum readability */
  margin-left: 5px !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7) !important;
}

/* Fix specifically for the REVIEWED ON Clutch section in the screenshot */
.hero-section .cl_sec {
  background-color: rgba(18, 18, 18, 0.9) !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.7) !important;
}

.cl_title {
  text-decoration: none !important;
}

/* Add special styling for mobile */
@media (max-width: 767px) {
  .cl_sec, .clr_title, .clb_title {
    padding: 15px !important;
  }
  
  .cl_sec span, .clr_title span {
    font-size: 16px !important;
  }
  
  .starts i.fa-star, .stars i.ri-star-fill {
    font-size: 20px !important;
  }
  
  .clb_title span:last-child {
    font-size: 20px !important;
  }
}