/* ================================================================

   Service Areas Section

   Hyderabad & Karimnagar locality grids.

   ================================================================ */



.areas-section {



  background: var(--bg-subtle);



}







.areas-dual-grid {



  display: grid;



  grid-template-columns: 1fr 1fr;



  gap: 30px;



}







.area-card {



  background: #ffffff;



  border-radius: var(--radius-lg);



  padding: 28px;



  box-shadow: var(--shadow-md);



  border: 1.5px solid var(--border-color);



  transition: all var(--transition-normal);



}







.area-card.active-zone {



  border-color: var(--primary-blue);



  box-shadow: 0 0 0 3px var(--primary-blue-glow);



}







.area-card-header {



  display: flex;



  justify-content: space-between;



  align-items: flex-start;



  margin-bottom: 16px;



}







.area-title-group {



  display: flex;



  gap: 14px;



}







.area-title-group i {



  font-size: 1.8rem;



  color: var(--primary-blue);



}







#knrAreaCard .area-title-group i {



  color: var(--primary-orange);



}







.area-title-group h3 {



  font-size: 1.3rem;



  margin-bottom: 4px;



}







.coverage-pill {



  font-size: 0.78rem;



  color: var(--text-muted);



}







.area-lead {



  font-size: 0.88rem;



  font-weight: 600;



  color: var(--slate-700);



  margin-bottom: 12px;



}







.locality-tags {



  display: flex;



  flex-wrap: wrap;



  gap: 8px;



}







.loc-tag {



  background: var(--slate-100);



  color: var(--slate-700);



  font-size: 0.82rem;



  font-weight: 600;



  padding: 5px 12px;



  border-radius: var(--radius-full);



  border: 1px solid var(--border-color);



  transition: all var(--transition-fast);



}







.loc-tag:hover {



  background: var(--primary-blue-light);



  color: var(--primary-blue-dark);



  border-color: var(--border-focus);



}







/* ==========================================================================



   Why Choose Us & Testimonials



   ========================================================================== */



@media (max-width: 768px) {



  .areas-dual-grid {



    grid-template-columns: 1fr;



  }



}

@media (max-width: 768px) { .area-card-header { flex-direction: column; align-items: flex-start; gap: 12px; } }