/* Treatment section  */

.category-title {
   font-size: 2.5rem;
   font-weight: 500;
   margin-bottom: 1.5rem;
   text-align: center;
   color: var(--dark-green);
}

.symptoms-section {
   background: linear-gradient(1deg, #169F8680 -15.33%, #FFFFFF00 111.91%);
   padding: 7rem 0;
}

.browse-tabs {
   display: flex;
   border-bottom: 2px solid #e9ecef;
   margin-bottom: 2rem;
}

.browse-tab {
   background: none;
   background-color: #f8f9fa;
   border: none;
   padding: 1rem 2rem;
   font-size: 1rem;
   font-weight: 500;
   color: #6c757d;
   cursor: pointer;
   border-bottom: 2px solid transparent;
   transition: all 0.3s ease;
}

.browse-tab.active {
   color: white;
   background-color: var(--dark-green);
   border-radius: 8px 8px 0 0;
}

.browse-tab:not(.active):hover {
   color: var(--light-green);
}

.alphabet-circles {
   display: inline-flex;
   /* grid-template-columns: repeat(13, 1fr); */
   gap: 0.5rem;
   margin-bottom: 2rem;
   flex-wrap: wrap;
}

.circle-btn {
   width: 40px;
   height: 40px;
   border: 2px solid #e9ecef;
   border-radius: 50%;
   background: white;
   display: flex;
   align-items: center;
   justify-content: center;
   font-weight: 500;
   color: #495057;
   cursor: pointer;
   transition: all 0.3s ease;
}

.circle-btn:hover {
   border-color: var(--dark-green);
   color: var(--dark-green);
}

.circle-btn.active {
   background-color: var(--dark-green);
   border-color: var(--dark-green);
   color: white;
}

.symptoms-card {
   background-color: white;
   border-radius: 8px;
   padding: 30px;
   border: 1px solid #d8dde0;
   width: 100%;
   margin-top: 48px;
}

.symptoms-heading {
   display: inline-block;
   padding: 12px 28px;
   font-size: 22px;
   font-weight: 600;
   color: var(--dark-green);
   background-color: var(--parrot-green);
}

.symptoms-card .symptoms-card-list {
   list-style: none;
   margin: 0;
   padding: 0;
}

.symptoms-card .symptoms-card-list li a {
   padding: 12px 0;
   border-bottom: 1px solid #e9ecef;
   cursor: pointer;
   display: block;
   /* padding: 14px 0; */
   color: var(--primary-blue);
   text-decoration: underline;
   font-size: 18px;
   letter-spacing: .5px;
   word-spacing: .5px;
}

.symptoms-card .symptoms-card-list li a:hover {
   color: var(--dark-green)
}

.symptoms-card .symptoms-card-list li:last-child a {
   border-bottom: 0px solid #e9ecef;
}


@media (max-width: 992px) {

   .alphabet-circles {
      grid-template-columns: repeat(5, 1fr);
   }
}

@media (max-width: 768px) {

   .hero-badges {
      justify-content: center;
   }

   .alphabet-circles {
      grid-template-columns: repeat(4, 1fr);
   }

}