.post-item {
    position: relative;
    .post-image {
        display: flex;
        overflow: hidden;
        z-index: 1;
        width: 100%;
        height: 100%;
        img {
            width: 100%;
            /*height: 100%;*/
            transition: 0.8s;
            object-fit: cover;
        }
    }
    .post-title {
        transition: 0.8s;
        a {
            transition: 0.8s;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            overflow: hidden;
            -webkit-line-clamp: 1;
            font-family: var(--Medium);
        }
    }
}
.post-hover {
    position: relative;
    .post-image {
        display: flex;
        overflow: hidden;
        z-index: 1;
        width: 100%;
        img {
            width: 100%;
            /*height: auto;*/
            transition: 0.8s;
        }
        &:after {
            content: "";
            position: absolute;
            bottom: auto;
            border-radius: 0 0 75% 75% / 0 0 50% 50%;
            background: rgb(22 9 89 / 30%);
            width: 100%;
            left: 0;
            height: 0;
            transition: 0.5s;
            z-index: 0;
            top: 0;
            opacity: 1;
            backdrop-filter: blur(8px);
        }
    }
    &:hover .post-image:after {
        transition: height 0.5s ease-in-out;
        height: 150%;
    }
}
.project-item {
    position: relative;
    .post-image {
        border-radius: 24px;
        min-height: clamp(360px, 29vw, 502px);
        img {
            height: auto;
        }
    }
    .post-title {
        position: absolute;
        bottom: clamp(16px, 2vw, 24px);
        width: calc(100% - clamp(32px, 4vw, 48px));
        z-index: 1;
        right: 50%;
        transform: translateX(50%);
        background-color: rgb(255 255 255 / 10%);
        backdrop-filter: blur(20px);
        border-radius: 16px;
        display: flex;
        align-items: center;
        padding: clamp(12px, 2vw, 16px);
        justify-content: space-between;
        a {
            font-size: clamp(16px, 2vw, 18px);
            color: var(--white);
            transition: 0.8s;
        }
        i {
            color: white;
            width: 48px;
            flex: 0 0 48px;
            height: 32px;
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: rgb(255 255 255 / 10%);
            border-radius: 32px;
            font-size: 20px;
            transition: 0.8s;
        }
    }
    &:hover .post-title {
        i,
        a {
            color: var(--color2);
        }
    }
}
.product-item {
    background: white;
    box-shadow: 0px 6px 20px -4px #0000001A;
    border-radius: 20px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: center;
    text-align: center;
    transition: 0.8s;
    img {
        border-radius: 16px;
    }
    .post-title {
        width: -webkit-fill-available;
        background: var(--accent);
        padding: 12px;
        border-radius: 12px;
        a {
            font-size: 16px;
            color: var(--black);
        }
    }
    &:hover {
        box-shadow: 0px 6px 14px 8px #16095933;
        .post-title {
            background: var(--color1);
            a {
                color: var(--white);
            }
        }
    }
}
.blog-item {
    .post-image {
        box-shadow: 0px 6px 20px -4px #0000001A;
        border-radius: 20px;
        margin-bottom: 16px;
        height: auto;
        &:before {
            content: "";
            background-image: url(../../img/logo.svg);
            background-repeat: no-repeat;
            background-size: contain;
            width: clamp(64px, 6vw, 96px);
            height: clamp(64px, 6vw, 96px);
            position: absolute;
            top: -96px;
            right: 50%;
            transform: translateX(50%);
            display: flex;
            align-items: center;
            justify-content: center;
            transition: 0.8s;
            z-index: 1;
        }
    }
    .post-date {
        padding-inline: clamp(12px, 2vw, 16px);
        display: flex;
        align-items: center;
        gap: 4px;
        color: var(--color2);
        i {
            width: 24px;
            height: 24px;
            font-size: 18px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
    }
    .post-title {
        padding-inline: clamp(12px, 2vw, 16px);
        line-height: 32px;
        a {
            font-size: clamp(14px, 2vw, 18px);
            color: var(--black);
            -webkit-line-clamp: 2;
            height: 64px;
        }
    }
    &:hover .post-title a {
        color: var(--color1);
    }
    &:hover .post-image:before {
        top: 50%;
        transform: translate(50%, -50%);
    }
}
.hr .post-image:before {
    width: 40px;
    height: 40px;
}
.unit-item {
    .post-image {
        border-radius: 20px;
    }
    .post-title {
        position: absolute;
        background: white;
        bottom: 0;
        z-index: 1;
        width: max-content;
        padding-inline: clamp(12px, 2vw, 16px);
        border-radius: 20px 0 0 0;
        &:before {
            content: "\e923";
            font-family: 'icomoon';
            position: absolute;
            right: calc(100% - 1px);
            font-size: clamp(14px, 2vw, 18px);
            bottom: -1px;
            line-height: 1;
            color: white;
        }
        &:after {
            content: "\e923";
            font-family: 'icomoon';
            position: absolute;
            bottom: calc(100% - 1px);
            font-size: 18px;
            right: -1px;
            line-height: 1;
            color: white;
        }
        a {
            font-size: clamp(14px, 2vw, 18px);
            color: var(--black);
            display: flex;
            align-items: center;
            gap: 12px;
            i {
                width: 0;
                font-size: 0;
                height: 20px;
                display: flex;
                align-items: center;
                justify-content: center;
                transition: 0.8s;
                padding-top: 4px;
            }
        }
    }
    &:hover .post-title a {
        color: var(--color2);
        i {
            width: 20px;
            font-size: 18px;
        }
    }
}
.testimonials-item {
    box-shadow: 0px 6px 30px -4px #16095933;
    background: white;
    border-radius: clamp(24px, 3vw, 40px);
    padding: clamp(20px, 2vw, 32px);
    .testimonials-head {
        display: flex;
        align-items: center;
        gap: 16px;
        margin-bottom: 16px;
        .post-image {
            width: clamp(70px, 6vw, 92px);
            height: clamp(70px, 6vw, 92px);
            flex: 0 0 clamp(70px, 6vw, 92px);
            border-radius: 20px;
            overflow: hidden;
        }
        .testimonials-body {
            display: flex;
            flex-direction: column;
            gap: 8px;
            .post-title {
                font-size: clamp(14px, 2vw, 16px);
                font-family: var(--SemiBold);
                color: #111111;
                line-height: 28px;
            }
            span {
                font-size: clamp(12px, 1vw, 14px);
                color: rgb(17 17 17 / 80%);
                line-height: 24px;
                font-family: var(--Medium);
            }
        }
    }
    p {
        font-size: clamp(12px, 1vw, 14px);
        color: rgb(17 17 17 / 80%);
        font-family: var(--Regular);
    }
}