.bottom-nav {
      position: fixed;
      bottom: 0;
      width: 100%;
      background-color: #fff;
      border-top: 1px solid #ddd;
      z-index: 1000;
    }
    .nav-item {
      flex: 1;
      text-align: center;
      font-size: 12px;
    }
    .nav-link {
      color: #666;
      padding: 10px 5px;
      display: flex;
      flex-direction: column;
      align-items: center;
      font-weight: 500;
    }
    .nav-link.active {
      color: red;
    }
    .nav-link i {
      font-size: 20px;
      margin-bottom: 3px;
    }

    @media (min-width: 768px) {
      .bottom-nav {
        display: none;
      }
    }
    
    
    body {
      background-color: #f8f9fa;
      padding-bottom: 60px;
    }
    .service-card {
      background-color: white;
      padding: 15px;
      border-bottom: 1px solid #dee2e6;
      display: flex;
      align-items: center;
    }
    .service-card svg {
      width: 24px;
      height: 24px;
      fill: #dc3545;
      margin-right: 15px;
    }
    .service-card-title {
      font-size: 16px;
      font-weight: 500;
      margin-bottom: 3px;
    }
    .service-card-desc {
      font-size: 13px;
      color: #6c757d;
    }
    .bottom-nav {
      position: fixed;
      bottom: 0;
      width: 100%;
      background-color: #fff;
      border-top: 1px solid #ddd;
      z-index: 1000;
    }
    .nav-item {
      flex: 1;
      text-align: center;
      font-size: 12px;
    }
    .nav-link {
      color: #666;
      padding: 10px 5px;
      display: flex;
      flex-direction: column;
      align-items: center;
      font-weight: 500;
    }
    .nav-link.active {
      color: red;
    }
    .nav-link svg {
      width: 20px;
      height: 20px;
      margin-bottom: 3px;
      fill: currentColor;
    }
    @media (min-width: 768px) {
      .bottom-nav {
        display: none;
      }
    }
    