/************************************/
/***   11. Company Benefits css   ***/
/************************************/

.company-benefits{
	padding: 80px 0;
}

.company-benefits.about-company-benefits{
	position: relative;
}

.company-benefits.about-company-benefits::before{
	content: '';
    display: block;
    position: absolute;
    left: -50px;
    top: 100px;
    background: url(../images/section-bg-shape-4.png) no-repeat;
    background-position: left top;
    background-size: contain;
    width: 267px;
    height: 267px;
	opacity: 50%;
    animation: ringrotate 15s infinite linear;
	animation-direction: alternate;
    z-index: -1;
}

.company-benefit-box{
	position: relative;
	display: flex;
	flex-wrap: wrap;
	gap: 30px;
}

.company-benefit-images,
.company-benefit-content{
	width: calc(50% - 15px);
}

.company-benefit-body{
	margin-bottom: 40px;
}

.company-benefit-body ul{
	display: flex;
	flex-wrap: wrap;
	gap: 20px 30px;
	list-style: none;
	padding: 0;
	margin: 0;
}

.company-benefit-body ul li{
	position: relative;
	width: calc(50% - 15px);
	line-height: normal;
	padding-left: 34px;
}

.company-benefit-body ul li::before{
	content: '○';
    font-family: 'FontAwesome';
    position: absolute;
    left: 0;
    top: 50%;
	transform: translateY(-50%);
    font-size: 20px;
    color: #bc32c3;
    transition: all 0.3s ease-in-out;
}

.company-benefit-list{
	position: absolute;
	bottom: 0;
	left: 0;
	max-width: 1000px;
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 30px;
	padding: 50px;
	border-radius: 30px;
	background: linear-gradient(90deg, #BFF747 0%, #000000 72.78%);
	z-index: 1;
}

.company-benefit-list::before{
	content: "";
    position: absolute;
	left: 10px;
	top: 10px;
	border-radius: 20px;
	background: linear-gradient(90deg, #000000 75%, rgba(0, 0, 0, 0) 99.04%);
	width: calc(100% - 20px);
	height: calc(100% - 20px);
}

.company-benefit-item{
	position: relative;
	width: calc(33.33% - 20px);
	display: flex;
	align-items: center;
	z-index: 1;
}

.company-benefit-item .icon-box{
	position: relative;
    background: linear-gradient(95deg, var(--color-primary) 15%, var(--color-tertiary) 45%, var(--color-pink) 75%, var(--color-secondary) 100%) 95% / 200% 100%;
    border-radius: 50%;
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    margin-right: 20px;
    transition: all 0.5s ease-in-out;
}

.company-benefit-item .icon-box::before{
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    background: var(--primary-color);
    border-radius: 50%;
    width: 100%;
    height: 100%;
    transform: scale(0);
    transition: all 0.4s ease-in-out;
    z-index: 0;
}

.company-benefit-item:hover .icon-box::before{
	transform: scale(1);
}

.company-benefit-item .icon-box img{
	position: relative;
	max-width: 40px;
	z-index: 1;
}

.company-benefit-item-content{
	width: calc(100% - 100px);
}

.company-benefit-item-content h3{
	font-size: 22px;
	text-transform: capitalize;
}

.company-benefit-images{
	position: relative;
	padding: 50px 0 50px 70px;
}

.company-benefit-img figure{
	display: block;
	border-radius: 30px;
}

.company-benefit-img img{
	width: 100%;
	aspect-ratio: 1 / 0.84;
	object-fit: cover;
	border-radius: 30px;
}

.company-since-circle{
	position: absolute;
	top: 0;
	left: 0;
	animation: agencycirclerotate 25s infinite linear;
	z-index: 1;
}

.company-since-circle img{
	max-width: 170px;
}