.catagory-area{
    box-shadow: inset 0px -1px 0px #E4E5E8;
}
.popular-category{
    &-item{
        display: flex;
        gap: 12px;
        padding: 16px;
        border-radius: 12px;
        align-items: center;
        transition: all 0.4s;
        border: 1px solid var(--gray-100);
        &:hover{
            background: #FFFFFF;
            box-shadow: 0px 12px 24px 0px rgba(0, 44, 109, 0.10);
        }
        &:hover .popular-category-data{
            h4{
                color: var(--primary-500);
            }
        }
    }
    &-icon{
        width: 32px;
        height: 32px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        transition: all 0.4s;
        i{
            font-size: 24px;
            color: var(--primary-500);
        }
    }
    &-data{
        h4{
            font-size: 16px;
            font-weight: 500;
            line-height: 24px;
            color: var(--gray-900);
            margin-bottom: 4px;
            transition: all 0.4s;
        }
        p{
            margin: 0;
            font-size: 14px;
            font-weight: 400;
            line-height: 20px;
            color: var(--gray-600);
        }
    }
}


// icon animation
.card-icon-animation{
    .icon-thumb{
        overflow: hidden;
    }
    &:hover{
        .icon-thumb{
            i, img{
                animation: iconamimation2 0.5s forwards;
            }
        }
    }
}
.card-icon-animation2{
    .icon-thumb{
        overflow: hidden;
    }
    &:hover{
        .icon-thumb{
            i, img{
                animation: iconamimation 0.5s forwards;
            }
        }
    }
}

@keyframes iconamimation {
	49% {
		transform: translate(100%);
	}
	50% {
		opacity: 0;
		transform: translate(-100%);
	}
	51% {
		opacity: 1;
	}
}

@keyframes iconamimation2 {
	49% {
		transform: translateY(100%);
	}
	50% {
		opacity: 0;
		transform: translateY(-100%);
	}
	51% {
		opacity: 1;
	}
}

// most popular vacancies

.most-popular{
    &-item{
        margin-bottom: 30px;
        &:last-child{
            margin-bottom: 0;
        }
        h3{
            font-weight: 500;
            font-size: 18px;
            line-height: 28px;
            margin-bottom: 8px;
            a{
                color: var(--gray-900);
                transition: all 0.4s;
                &:hover{
                    color: var(--primary-500);
                    text-decoration: underline;
                }
            }
        }
        p{
            font-size: 14px;
            color: var(--gray-500);
        }
    }
}

// employe slider css
.top-company-slider{
  .prev-arrow,
  .next-arrow {
    width: 48px;
    height: 48px;
    background-image: url(../images/svg/arrow-left.svg);
    background-color: var(--primary-50);
    background-size: 24px;
    background-repeat: no-repeat;
    background-position: center center;
    border-radius: 5px;
    position: absolute;
    top: -90px;
    right: 82px;
    z-index: 99;
    border: none;
    @media (max-width: 575px) {
      display: none!important;
    }
  }
  .next-arrow{
    right: 16px;
    background-image: url(../images/svg/arrow-right.svg);
  }

}