.horizontal-icon-box-list {
	display: flex;
	flex-flow: column wrap;
}

.horizontal-icon-box-wrapper {
	position: relative;
	display: flex;
	flex-flow: column wrap;
	gap: 0px;
	overflow: hidden;
	cursor: pointer;
	transition: all 0.5s ease-out;
}

.horizontal-icon-box-wrapper.active {
	gap: 12px;
}

.horizontal-icon-box-wrapper  .lead-section {
	display: flex;
	flex-flow: row nowrap;
	gap: 20px;
	align-items: center;
}

.horizontal-icon-box-wrapper  .top-line {
	display: flex;
	flex-flow: row nowrap;
	gap: 12px;
	justify-content: space-between;
	align-items: center;
	z-index: 1;
}

.horizontal-icon-box-wrapper .leading-icon {
	display: flex;
}

.horizontal-icon-box-wrapper p {
	max-width: 40%;
	max-height: 0px;
	overflow: hidden;
	transition: all 0.5s ease-out;
	z-index: 1;
}

.horizontal-icon-box-wrapper .horizontal-icon-box-overlay {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	transition: all 0.5s ease-out;
}


.horizontal-icon-box-wrapper.active p {
	max-height: 500px;
}

.horizontal-icon-box-wrapper.active .icon-box {
	transition: all 0.5s ease-out;
}

.horizontal-icon-box-wrapper.active .icon-box {
	transform: rotate(180deg);
}

@media only screen and (max-width: 768px) {
.horizontal-icon-box-wrapper p {
	max-width: 100%;
}
	
	
.horizontal-icon-box-wrapper  .lead-section {
	gap: 8px;
}
}