/* General Styles */  
* {  
  margin: 0;  
  padding: 0;  
  box-sizing: border-box;  
}  
  
body {  
  font-family: 'Roboto', Arial, sans-serif;  
  background-color: #f5f5f5;  
  color: #333;  
  line-height: 1.6;  
}  
  
a {  
  text-decoration: none;  
  color: inherit;  
}  
  
/* Header Styles */  
header {  
  background-color: #fff;  
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);  
  padding: 15px 20px;  
  display: flex;  
  align-items: center;  
  justify-content: space-between;  
  flex-wrap: wrap;  
}  
  
.logo {  
  font-size: 24px;  
  font-weight: bold;  
  color: #4285f4;  
  display: flex;  
  align-items: center;  
}  
  
.logo i {  
  margin-right: 10px;  
}  
  
.search-bar {  
  display: flex;  
  flex: 1;  
  max-width: 500px;  
  margin: 0 20px;  
}  
  
.search-bar input {  
  flex: 1;  
  padding: 10px 15px;  
  border: 1px solid #ddd;  
  border-radius: 4px 0 0 4px;  
  font-size: 16px;  
}  
  
.search-bar button {  
  background-color: #4285f4;  
  color: white;  
  border: none;  
  padding: 10px 15px;  
  border-radius: 0 4px 4px 0;  
  cursor: pointer;  
}  
  
nav ul {  
  display: flex;  
  list-style: none;  
}  
  
nav ul li {  
  margin-right: 20px;  
}  
  
nav ul li a {  
  color: #555;  
  font-weight: 500;  
  padding: 5px 0;  
  position: relative;  
}  
  
nav ul li a.active,  
nav ul li a:hover {  
  color: #4285f4;  
}  
  
nav ul li a.active:after {  
  content: '';  
  position: absolute;  
  bottom: -5px;  
  left: 0;  
  width: 100%;  
  height: 3px;  
  background-color: #4285f4;  
}  
  
.user-actions {  
  display: flex;  
  align-items: center;  
}  
  
.user-actions a {  
  margin-left: 15px;  
  color: #555;  
  font-size: 18px;  
}  
  
.user-actions a:hover {  
  color: #4285f4;  
}  
  
/* Main Content Styles */  
main {  
  padding: 20px;  
  max-width: 1200px;  
  margin: 0 auto;  
}  
  
section {  
  margin-bottom: 30px;  
}  
  
section h2 {  
  font-size: 22px;  
  margin-bottom: 20px;  
  color: #333;  
  border-bottom: 1px solid #eee;  
  padding-bottom: 10px;  
}  
  
/* App Grid Styles */  
.app-grid {  
  display: grid;  
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));  
  gap: 20px;  
}  
  
.app-card {  
  background-color: #fff;  
  border-radius: 8px;  
  overflow: hidden;  
  box-shadow: 0 2px 10px rgba(0,0,0,0.05);  
  transition: transform 0.3s, box-shadow 0.3s;  
  cursor: pointer;  
  padding: 15px;  
  display: flex;  
  flex-direction: column;  
}  
  
.app-card:hover {  
  transform: translateY(-5px);  
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);  
}  
  
.app-icon {  
  width: 64px;  
  height: 64px;  
  border-radius: 12px;  
  overflow: hidden;  
  margin-bottom: 10px;  
}  
  
.app-icon img {  
  width: 100%;  
  height: 100%;  
  object-fit: cover;  
}  
  
.app-info h3 {  
  font-size: 18px;  
  margin-bottom: 5px;  
  color: #333;  
}  
  
.app-developer {  
  font-size: 14px;  
  color: #666;  
  margin-bottom: 5px;  
}  
  
.app-rating {  
  display: flex;  
  align-items: center;  
  margin-bottom: 10px;  
}  
  
.stars {  
  color: #ffc107;  
  margin-right: 5px;  
}  
  
.rating-count {  
  font-size: 14px;  
  color: #777;  
}  
  
.download-btn {  
  background-color: #4285f4;  
  color: white;  
  border: none;  
  padding: 8px 15px;  
  border-radius: 4px;  
  cursor: pointer;  
  font-size: 14px;  
  margin-top: 10px;  
  transition: background-color 0.3s;  
}  
  
.download-btn:hover {  
  background-color: #3367d6;  
}  
  
/* Category Grid Styles */  
.category-grid {  
  display: grid;  
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));  
  gap: 15px;  
}  
  
.category-card {  
  background-color: #fff;  
  border-radius: 8px;  
  padding: 20px 15px;  
  text-align: center;  
  box-shadow: 0 2px 5px rgba(0,0,0,0.05);  
  transition: transform 0.3s, box-shadow 0.3s;  
  display: flex;  
  flex-direction: column;  
  align-items: center;  
}  
  
.category-card:hover {  
  transform: translateY(-5px);  
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);  
}  
  
.category-card i {  
  font-size: 30px;  
  margin-bottom: 10px;  
  color: #4285f4;  
}  
  
.category-card span {  
  font-size: 16px;  
  color: #333;  
}  
  
/* Footer Styles */  
footer {  
  background-color: #fff;  
  padding: 20px;  
  text-align: center;  
  margin-top: 30px;  
  border-top: 1px solid #eee;  
}  
  
.footer-content p {  
  color: #777;  
  font-size: 14px;  
}  
  
/* Responsive Styles */  
@media (max-width: 768px) {  
  header {  
    flex-direction: column;  
    align-items: flex-start;  
  }  
    
  .search-bar {  
    margin: 15px 0;  
    max-width: 100%;  
    width: 100%;  
  }  
    
  nav ul {  
    margin-top: 15px;  
    width: 100%;  
    overflow-x: auto;  
    padding-bottom: 5px;  
  }  
    
  .app-grid {  
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));  
  }  
}  
  
@media (max-width: 480px) {  
  .app-grid {  
    grid-template-columns: 1fr;  
  }  
    
  .category-grid {  
    grid-template-columns: repeat(2, 1fr);  
  }  
}