:root {
    /* ماسک حالت عادی */
    --mask-normal: url("data:image/svg+xml,%3Csvg width='629' height='214' viewBox='0 0 629 214' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M629 26C629 34.2843 622.284 41 614 41H606C597.716 41 591 47.7157 591 56V159C591 167.284 597.716 174 606 174H614C622.284 174 629 180.716 629 189V199C629 207.284 622.284 214 614 214H15C6.71574 214 0 207.284 0 199V15C0 6.71573 6.71573 0 15 0H614C622.284 0 629 6.71573 629 15V26Z' fill='black'/%3E%3C/svg%3E");

    /* ماسک حالت هاور */
    --mask-hover: url("data:image/svg+xml,%3Csvg%20width%3D%22629%22%20height%3D%22214%22%20viewBox%3D%220%200%20629%20214%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20d%3D%22M629%2026C629%2034.2843%20622.284%2041%20614%2041H606C597.716%2041%20591%2047.7157%20591%2056V159C591%20167.284%20597.716%20174%20606%20174H614C622.284%20174%20629%20180.716%20629%20189V199C629%20207.284%20622.284%20214%20614%20214H15C6.71574%20214%200%20207.284%200%20199V189C0%20180.716%206.71573%20174%2015%20174H23C31.2843%20174%2038%20167.284%2038%20159V56C38%2047.7157%2031.2843%2041%2023%2041H15C6.71573%2041%200%2034.2843%200%2026V15C0%206.71573%206.71573%200%2015%200H614C622.284%200%20629%206.71573%20629%2015V26Z%22%20fill%3D%22black%22%2F%3E%3C/svg%3E");
    ;
    --gradient-normal: linear-gradient(180deg, rgba(255, 79, 111, 0.27) 0%, #FF4F6F 81.25%);
    --gradient-hover: linear-gradient(180deg, rgba(255, 79, 111, 0.27) 0%, #FF4F6F 81.25%);

    --mask-normal-other-side: url("data:image/svg+xml,%3Csvg width='629' height='214' viewBox='0 0 629 214' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M629 199C629 207.28 622.28 214 614 214H15C6.71 214 0 207.28 0 199V189C0 180.71 6.71 174 15 174H23C31.28 174 38 167.28 38 159V56C38 47.71 31.28 41 23 41H15C6.71 41 0 34.28 0 26V15C0 6.71 6.71 0 15 0H614C622.28 0 629 6.71 629 15V199Z' fill='black'/%3E%3C/svg%3E");
}

.khat-tolid {
    isolation: isolate;
}

.fancy-card {
    position: relative;
    inset: 0;
    z-index: 1;
    -webkit-mask-image: var(--mask-normal);
    mask-image: var(--mask-normal);
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    transition: none;
}

.fancy-card-other-side::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 2;
    background: var(--gradient-normal);
    -webkit-mask-image: var(--mask-normal-other-side);
    mask-image: var(--mask-normal-other-side);
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-position: center;
    opacity: 1;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.fancy-card-other-side::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 3;
    background: var(--gradient-hover);
    -webkit-mask-image: var(--mask-hover);
    mask-image: var(--mask-hover);
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-position: center;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.fancy-card img,
.fancy-card-other-side img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.fancy-card::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 2;
    background: var(--gradient-normal);
    -webkit-mask-image: var(--mask-normal);
    mask-image: var(--mask-normal);
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-position: center;
    opacity: 1;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.fancy-card::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 3;
    background: var(--gradient-hover);
    -webkit-mask-image: var(--mask-hover);
    mask-image: var(--mask-hover);
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-position: center;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.khat-tolid:has(.fancy-card-text-section:hover) .fancy-card::before,
.khat-tolid:hover .fancy-card::before {
    opacity: 0;
}

.khat-tolid:has(.fancy-card-text-section:hover) .fancy-card-other-side::before,
.khat-tolid:hover .fancy-card-other-side::before {
    opacity: 0;
}

.khat-tolid:has(.fancy-card-text-section:hover) .fancy-card::after,
.khat-tolid:hover .fancy-card::after {
    opacity: 1;
}

.khat-tolid:has(.fancy-card-text-section:hover) .fancy-card-other-side::after,
.khat-tolid:hover .fancy-card-other-side::after {
    opacity: 1;
}

.khat-tolid:has(.fancy-card-text-section:hover) .fancy-card,
.khat-tolid:hover .fancy-card {
    -webkit-mask-image: var(--mask-hover);
    mask-image: var(--mask-hover);
}

.khat-tolid:has(.fancy-card-text-section:hover) .fancy-card-other-side,
.khat-tolid:hover .fancy-card-other-side {
    -webkit-mask-image: var(--mask-hover);
    mask-image: var(--mask-hover);
}

.logo-type-consultant {
    opacity: 0;
    transition: 0.4s all;
    position: absolute;
    transform: translateY(50%) scale(1.2);
}

.fancy-card-en-text {
    opacity: 0.7;
    visibility: visible;
    transition: 0.5s all;
}

.khat-tolid:has(.fancy-card-text-section:hover) .fancy-card-en-text,
.khat-tolid:hover .fancy-card-en-text {
    opacity: 1;
    color: #FF4F6F;
}

.khat-tolid:has(.fancy-card-text-section:hover) .logo-type-consultant,
.khat-tolid:hover .logo-type-consultant {
    opacity: 1;
    transform: translateY(50%) translateX(0);
}

.en-right-txt {
    position: absolute;
    transform: rotate(90deg) translateY(50%) scale(1);
    transition: transform .5s cubic-bezier(.4, 0, .2, 1);
}

.fancy-card-en-text {
    opacity: 1;
    transform: translate(50%, 3.5rem);
    transition: opacity .4s ease,
        transform .4s ease;
}

.khat-tolid:hover .fancy-card-text-section .fancy-card-en-text {
    opacity: 1;
    transform: translate(50%, 0);
}

.khat-tolid:hover .fancy-card-text-section .push-up-forse {
    transform: translate(0, -2.25rem);
}

.khat-tolid:hover .en-right-txt {
    transform: scale(0.9) translateX(-1rem) rotate(90deg);
}

.khat-tolid {
    overflow: hidden;
}

.khat-tolid .fancy-card img,
.khat-tolid .fancy-card-other-side img {
    transition: 0.3s all;
}

.khat-tolid:hover .fancy-card img,
.khat-tolid:hover .fancy-card-other-side img {
    transform: translateY(-0.625rem);
}

/* ۱. شکل‌دهی به کانتینر اصلی و سفید کردن پس‌زمینه آن */
.fancy-card-other-side {
    background-color: #ffffff !important;
    /* رنگ اصلی زبانه */
    -webkit-mask-image: var(--mask-normal-other-side);
    mask-image: var(--mask-normal-other-side);
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    transition: mask-image 0.3s ease;
    position: relative;
    overflow: hidden;
}

/* ۲. لایه رنگی قرمز (فقط روی بدنه کارت، نه روی زبانه) */
.fancy-card-other-side::before {
    content: '';
    position: absolute;
    inset: 0;
    left: 6.1%;
    /* شروع گرادینت بعد از زبانه سمت چپ */
    background: var(--gradient-normal);
    z-index: 1;
    opacity: 1;
    transition: opacity 0.3s ease;
}

/* ۳. لایه هاور (در حالت هاور زبانه راست هم اضافه می‌شود) */
.fancy-card-other-side::after {
    content: '';
    position: absolute;
    inset: 0;
    /*left: 6.1%;
    right: 6.1%;*/
    /* چون ماسک هاور دو زبانه دارد، لایه قرمز را از دو طرف محدود می‌کنیم */
    background: var(--gradient-hover);
    z-index: 2;
    opacity: 0;
    transition: opacity 0.3s ease;
}

/* ۴. تغییر ماسک و نمایش لایه هاور */
.khat-tolid:hover .fancy-card-other-side {
    -webkit-mask-image: var(--mask-hover);
    mask-image: var(--mask-hover);
}

.khat-tolid:hover .fancy-card-other-side::before {
    opacity: 0;
}

.khat-tolid:hover .fancy-card-other-side::after {
    opacity: 1;
}

/* اطمینان از قرارگیری متن‌ها روی لایه‌های رنگی */
.fancy-card-text-section,
.en-right-txt,
.logo-type-consultant {
    z-index: 5;
}