/* Cards reused across pages (Zeinet service-five, counter-four, news-four). */

/* Service card: light panel, photo, ringed icon overlapping the photo,
   orange fill on hover, two translucent bars in the bottom right corner. */
.zn-svc { position: relative; z-index: 2; height: 100%; padding: 20px 18px 40px; overflow: hidden; background-color: var(--surface); }
.zn-svc::after { content: ''; position: absolute; inset: 0; z-index: -1; background-color: var(--primary); opacity: 0; transform: scale(0.8, 1); transition: all 0.4s; }
.zn-svc:hover::after { opacity: 1; transform: scale(1, 1); }
.zn-svc__thumb { position: relative; display: block; }
.zn-svc__thumb img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
.zn-svc__content { margin-top: -38px; padding: 0 0 0 21px; }
.zn-svc .zn-ring { margin: 0 0 19px; }
.zn-svc:hover .zn-ring__inner .zn-icon { transform: rotateY(180deg); }
.zn-svc__title { margin: 0 0 5px; font-size: 20px; font-weight: 700; transition: color 300ms linear; }
.zn-svc__title a { color: inherit; background: linear-gradient(currentColor, currentColor) 0 95% / 0 1px no-repeat; transition: all 500ms ease; }
.zn-svc__title a:hover { background-size: 100% 1px; }
.zn-svc:hover .zn-svc__title, .zn-svc:hover .zn-svc__title a { color: var(--white); }
.zn-svc__text { margin: 0 0 23px; font-size: 14px; line-height: 25px; transition: color 300ms linear; }
.zn-svc:hover .zn-svc__text { color: var(--white); }
.zn-svc .zn-btn--navy::before { background-color: var(--white); }
.zn-svc .zn-btn--navy:hover { color: var(--primary); }
.zn-svc__shape { position: absolute; right: -70px; bottom: 0; width: 100%; height: 30px; background-color: rgba(var(--navy-rgb), 0.05); transform: rotate(-45deg); transition: all 400ms ease; }
.zn-svc__shape::after { content: ''; position: absolute; right: 0; bottom: -20px; width: 100%; height: 30px; background-color: rgba(var(--navy-rgb), 0.05); transition: all 400ms ease; }
.zn-svc:hover .zn-svc__shape, .zn-svc:hover .zn-svc__shape::after { background-color: rgba(255, 255, 255, 0.12); }

/* Counter card: blue disc icon off the left edge, orange fill rising on hover. */
.zn-counters { position: relative; z-index: 3; margin-top: -92px; }
.zn-counter { position: relative; margin: 0 0 0 32px; padding: 29px 20px 29px 65px; background: var(--white); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08); }
.zn-counter__icon {
    position: absolute; z-index: 2; left: -32px; top: 0; bottom: 0; margin: auto;
    width: 64px; height: 64px; overflow: hidden;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background-color: var(--secondary);
    color: var(--white);
    font-size: 30px;
}
.zn-counter__icon::after { content: ''; position: absolute; left: 0; bottom: 0; z-index: -1; width: 101%; height: 0; border-radius: 50%; background-color: var(--primary); transition: all 0.3s ease-out; }
.zn-counter:hover .zn-counter__icon::after { height: 101%; }
.zn-counter__icon .zn-icon, .zn-counter__icon i { position: relative; z-index: 1; }
.zn-counter__num { display: block; margin: 0 0 -1px; color: var(--primary); font-size: 40px; font-weight: 700; line-height: 1.1; }
.zn-counter__label { margin: 0; color: var(--secondary); }

/* News card (news-four). */
.zn-post { position: relative; height: 100%; display: flex; flex-direction: column; background-color: var(--surface); }
.zn-post__img { position: relative; overflow: hidden; }
.zn-post__img img { display: block; width: 100%; height: auto; aspect-ratio: 370 / 222; object-fit: cover; }
.zn-post__img a {
    position: absolute; inset: 0; z-index: 1;
    display: flex; align-items: center; justify-content: center;
    color: var(--white); font-size: 28px;
    transform: scale(0, 1); transform-origin: right center;
    transition: transform 0.5s ease;
}
.zn-post__img a::before { content: ''; position: absolute; inset: 0; z-index: -1; background-color: rgba(var(--navy-rgb), 0.5); }
.zn-post:hover .zn-post__img a { transform: scale(1, 1); transform-origin: left center; }
.zn-post__img--empty { aspect-ratio: 370 / 222; display: flex; align-items: center; justify-content: center; background: var(--secondary); color: rgba(255, 255, 255, 0.25); font-size: 54px; }
.zn-post__content { display: flex; flex-direction: column; flex: 1; padding: 23px 30px 30px; }
.zn-post__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0 20px; margin: 0 0 9px; padding: 0; list-style: none; }
.zn-post__meta li { color: var(--text); font-size: 14px; font-weight: 500; line-height: 26px; }
.zn-post__meta .zn-icon { margin-right: 7px; color: var(--primary); font-size: 15px; }
.zn-post__title { margin: 0 0 7px; font-size: 20px; font-weight: 700; text-transform: capitalize; }
.zn-post__title a { color: inherit; background: linear-gradient(currentColor, currentColor) 0 95% / 0 1px no-repeat; transition: all 500ms ease; }
.zn-post__title a:hover { color: var(--primary); background-size: 100% 1px; }
.zn-post__text { flex: 1; margin: 0 0 23px; font-size: 14.2px; line-height: 25px; }
.zn-post .zn-btn { align-self: flex-start; }