/*------------------------------------*\
  # TREATMENT METHODS
\*------------------------------------*/

.treatment-category-carousel{
    padding-top: 20px;
}
.treatment-category{
    display: block;
    position: relative;
    padding: 20px;
    width: 100%;
    color: var(--denipol-darkblue);
    font-size: 1.25rem;
    transition: 250ms background-color;
    font-weight: bold;
}
.treatment-category:hover{
    background-color: var(--denipol-darkblue);
    color: #fff;
}
.treatment-category:before{
	content: "";
	position: absolute;
	display: block;
	top: 50%;
	right: 100px;
	width: 20px;
	height: 20px;
	background-image: url('../../img/icon/arrow-right.svg');
	background-position: center;
	background-size: contain;
	background-repeat: no-repeat;
	transform-origin: center;
    pointer-events: none;
    opacity: 0;
	transform: translateY(-50%);
    transition: 500ms right, opacity;
	transition-timing-function: var(--ease-elastic);
}
.treatment-category:hover:before{
    opacity: 1;
    right: 20px;
}
.treatment-category span{
    transition: 250ms color;
}
.section-treatment-methods:has(.text-title span) .treatment-category:hover{
    background-color: var(--denipol-red);
}
.treatment-category:not(:last-child){
    border-bottom: 1px solid var(--denipol-darkblue);
}
.section-treatment-methods .text-title span{
    cursor: pointer;
}
.section-treatment-methods .text-title:hover span:before{
    width: 30px !important;
    height: 30px !important;
    left: -30px !important;
    filter: brightness(0) saturate(100%) invert(14%) sepia(51%) saturate(7130%) hue-rotate(341deg) brightness(97%) contrast(100%);
    transform: translateY(-50%) rotate(-270deg) !important
}
.section-treatment-methods .text-title:hover span{
    transform: translateX(30px) !important;
}