@import "https://fonts.googleapis.com/css2?family=Nunito:wght@400;500;600;700&family=Poppins:wght@400;500;600&display=swap";body{box-sizing:border-box;margin:0;padding:0}*{box-sizing:inherit}.services-grid{grid-template:"Prin Prin Sec"300px"ter cuar quint"300px/1fr 1fr 1fr;gap:20px;width:100%;margin:auto;display:grid}@media (width<=992px){.services-grid{grid-template-columns:1fr 1fr;grid-template-areas:"Prin Prin""Sec ter""cuar quint"}}@media (width<=768px){.services-grid{grid-template-columns:1fr;grid-template-areas:"Prin""Sec""ter""cuar""quint"}}.service-item{border-radius:10px;position:relative;overflow:hidden;box-shadow:0 4px 15px #0000001a}.prin{grid-area:Prin}.sec{grid-area:Sec}.ter{grid-area:ter}.cuar{grid-area:cuar}.quint{grid-area:quint}.service-item img{object-fit:cover;width:100%;height:100%;transition:transform .5s,filter .5s}.service-item:hover img{filter:brightness(60%);transform:scale(1.1)}.service-item .details{opacity:0;color:#fff;text-align:center;background-color:#673ab7d9;flex-direction:column;justify-content:center;align-items:center;padding:20px;transition:opacity .4s;display:flex;position:absolute;inset:0}.service-item:hover .details{opacity:1}.details h3{margin:0;font-family:Nunito,sans-serif;font-size:1.5rem;font-weight:700;transition:transform .4s;transform:translateY(20px)}.details p{opacity:0;margin:10px 0 0;font-family:Poppins,sans-serif;font-size:1rem;transition:transform .4s;transform:translateY(20px)}.service-item:hover .details h3,.service-item:hover .details p{opacity:1;transform:translateY(0)}