/* home page styles */

 :root {
     --brand-green: #00b67a;
     --brand-green-dark: #009e69;
     --light-bg: #f5f5f7;
 }

 body {
     background-color: var(--light-bg);
     font-family: system-ui, -apple-system, sans-serif;
 }

 .btn-brand {
     background-color: var(--brand-green);
     color: white;
     border: none;
 }

 .btn-brand:hover {
     background-color: var(--brand-green-dark);
     color: white;
 }

 .page-home .hero-section {
     background-color: #0d1b2a;
     color: white;
     padding: 80px 0;
 }

 .category-card {
     transition: transform 0.2s;
     border: none;
 }

 .category-card:hover {
     transform: translateY(-5px);
     box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
 }

 .brand-logo {
     max-height: 60px;
     position: absolute;
 }


 .auto-complete-col-mid p {
     margin-bottom: 0px;
     font-size: 14px;
 }


 .auto-complete-col-mid h5 {
     margin-bottom: 0px;
     font-weight: bold;
     font-size: 16px;
 }

 .auto-complete-col-star {
     background: #256F82;
     padding: 2px 8px;
     max-width: 60px;
     font-size: 14px;
     border-radius: 12px;
     color: #ffffff;
 }

 .ui-autocomplete.ui-front li a {
     text-decoration: none;
 }

 .auto-complete-col-star .img-span {
     margin-right: 5px;
 }

 .ui-autocomplete.ui-front li.ui-menu-item {
     padding: 10px;
 }

 .ui-menu .ui-menu-item-wrapper {
     padding: 0px 0px;
 }

 .ui-state-active,
 .ui-widget-content .ui-state-active,
 .ui-widget-header .ui-state-active,
 a.ui-button:active,
 .ui-button:active,
 .ui-button.ui-state-active:hover {
     border: none;
     background: none;
     font-weight: normal;
     color: #256F82;
     padding: 0px 0px;

 }

 /* end home page styles */

 /* review page styles */

 .company-header {
     background-color: white;
     padding: 10px 0px 40px 0px;
     border-bottom: 1px solid #dee2e6;
 }

 .category-section a {
     color: #256F82;
     text-decoration: none;
     font-size: 14px;
     font-weight: normal;
 }

 .progress-bar-fill {
     background-color: #F8C324;
 }


 /* find company page styles */

 .find-company .hero-section {
     background-color: #256F82;
     color: white;
     padding: 80px 0;
 }

 /* write a review page styles */

 .review-star-span {
     cursor: pointer;
     width: 30px;
     min-width: 30px;
 }