/*
Module Name= Accordion
Updated= 24.11.27 */

/*
=Project Description 
============================================= */
.pro-des {
	position: relative;
}

/*
=Accordion 
============================================= */
/*
=style the accordion */
.accordion {
    /* background:linear-gradient(rgb(242 242 242),rgb(248,248,248)); */
	/* background-color; */
    color:transparent;
    max-height:0;
    overflow-y:hidden;
    padding-right:10px;
    transition: 2s ease-in-out;
}


/*
=transition the accordion's text color + max height */
.chv_checkbox:checked ~ .accordion {
    max-height:1500px;
}

/* style the span-element */

.accordion span.red {
    color:transparent;
    transition:2s ease-in-out;
}

/*
=transition the span element's text color from transparent to red */
.chv_checkbox:checked ~ .accordion span.red{
    /* color:rgb(255 239 214/0.9); */
	color:#58595b;
}

/*
=ensure a smooth transition of the span element's text color */


/*
=Checkbox
============================================= */
.chv_checkbox {
	position: absolute;
	top: -10px; right: -10px;
	width: 100%; height: 25px;
	opacity: 0%;
	cursor: url("../assets/cursor.hover.png"), pointer;
	z-index: 5;
}

/*
=Chevron + Rotate Wrappers
============================================= */
/*
=style the chevron wrapper */
.chv_wrapper {
	width: 35px; height: 35px;
	position: absolute;
	top: 0; right: 0;
	padding: 5px;
    transform:translate(8.5px, -7px);
}

/*
=style the rotate wrapper */
.chv_rotate-wrapper {
	height: 100%;
	display: flex;
	align-items: center;
    transition: 0.35s ease-in-out;
	/* background-color:blue; */
}

/*
=rotate the rotate wrapper 180° when the checkbox is checked */
.chv_checkbox:checked+.chv_wrapper .chv_rotate-wrapper {
    transform: rotate(180deg);
}


/*
=Chevron Lines
============================================= */
/*
=style the chevron lines */
.chv_rotate-wrapper::before, 
.chv_rotate-wrapper::after {
	content: "";
	background-color: #58595b;
	width: 50%; 
	height: 1.8px;
} 

/*
=rotate the left chevron line 45° clockwise + fine-tune its alignment */
.chv_rotate-wrapper::before {
	background-color: #58595b;
	transform: rotate(45deg);
    transform:rotate(45deg) translate(3.5px, -3.5px);
}

/*
=rotate the right chevron line 45° anticlockwise + fine-tune its alignment */
.chv_rotate-wrapper::after {

	transform: rotate(-45deg);
}

/* ========================================== */

p {
	color:#58595b;
}

li {
	color:#58595b;
}