#searchBar { background-image: url('/images/search.svg'); background-position: 16px 16px; background-repeat: no-repeat; width: 100%; font-size: 16px; margin-bottom: 12px; padding: 12px 20px 12px 40px; border: 1px solid #ddd; } .features-container { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 3fr)); gap: 25px 30px; } .feature-card { border: 2px solid rgba(0, 0, 0, .25); border-radius: 0.25rem; padding: 1.25rem; display: flex; flex-direction: column; align-items: flex-start; background: rgba(13, 110, 253, 0.05); transition: transform 0.3s, border 0.3s; } .feature-card a { text-decoration: none; color: inherit; display: flex; flex-direction: column; width: 100%; height: 100%; } .feature-card .card-text { flex: 1; } .feature-card:hover { border: 1px solid rgba(0, 0, 0, .5); cursor: pointer; transform: scale(1.1); } .feature-card:hover .card-title { text-decoration: underline; } .card-title.text-primary { color: #000; /* Replace with your desired shade of blue */ } .home-card-icon { width: 30px; height: 30px; transform: translateY(-5px); } .home-card-icon-colour { filter: invert(0.2) sepia(2) saturate(50) hue-rotate(190deg); } .favorite-icon { display: none; position: absolute; top: 10px; right: 10px; } /* Only show the favorite icons when the parent card is being hovered over */ .feature-card:hover .favorite-icon { display: block; } .favorite-icon img { filter: brightness(0); } .jumbotron { padding: 3rem 3rem; /* Reduce vertical padding */ }