.hr-service{background-color:#fff;background-image:url(https://www.diydesignconstruction.com/public/DIYDESIGNCONSTRUCTION/themeaB9xY12z/assets/images/backgrounds/service-h1-bg.webp);background-size:cover}.service-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:60px 120px;padding:50px 15px;max-width:1200px;margin:0 auto}.service-card{position:relative;width:400px;height:600px;background-color:#111111f2;overflow:hidden;cursor:pointer;border-radius:4px}.card-bg{position:absolute;top:0;left:0;width:100%;height:100%;background-size:cover;background-position:center;z-index:1;transition:opacity 0.4s ease-in-out}.card-bg::after{content:'';position:absolute;bottom:0;left:0;width:100%;height:60%;background:linear-gradient(to top,rgb(0 0 0 / .85) 0%,#fff0 100%)}.card-content{position:relative;z-index:2;display:flex;flex-direction:column;justify-content:space-between;height:100%;padding:35px 30px;box-sizing:border-box}.card-number{color:#fff;font-size:1.2rem;font-weight:700;opacity:0;transform:translateY(-10px);transition:all 0.4s ease-in-out}.card-title{color:#fff;font-size:35px;line-height:1.1;text-transform:uppercase;margin:0;letter-spacing:.5px;transition:transform 0.4s ease-in-out;bottom:30px;position:absolute}.service-card:hover .card-bg{opacity:.2}.service-card:hover .card-number{opacity:1;transform:translateY(0)}.service-card:hover .card-title{transform:translateY(-5px)}@media(max-width:767.98px){.service-card{width:100%}}