/* General Accordion Styling */
.card-accordion {
	position:relative;
}
.info-card-accordion {
    width: 100%;
}
.accordion-item {
    overflow: hidden;
}
.accordion-header {
    cursor: pointer;
    width: 100%;
    border: none;
    outline: none;
    transition: background-color 0.3s ease;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.accordion-header:not(.active) ~ .accordion-content {
    max-height:0;
    transition-property: all;
    transition-duration: 0.3s;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
.accordion-header:hover {
   color:inherith;
}
.accordion-header::after {
    content: '\002B';
    font-weight: 400;
    font-size: 1.2em;
    margin-left: 10px;
}
.accordion-header.active::after {
    content: '\2212';
}
.accordion-content {
    max-height: 0;
    overflow: hidden;
    /* transition: max-height 0.3s ease-out, padding 0.3s ease-out; */
    transition-property: all;
    transition-duration: 0.3s;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
/* INFO CARD - KEY FEATURES */
.info-card__key_features .card-content ul:not(li ul) {
	display:grid;
	grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
	gap: 1rem;
	padding-inline-start:0!important;
	margin-block-start: .5em;
	margin-block-end: 1em;
    margin-left:0!important;
}
.info-card__key_features .card-content ul li:not(li ul li) {
	background-color:#fff;
	display:flex;
	border:1px solid var(--border-color, #e2e2e2);
	border-radius:var(--rounded, 12px);
	padding:1rem;
	list-style:none;
	font-weight:600;
	flex-flow:column wrap;
	gap:.55rem;
	position: relative;
	margin-block-end: 0!important;
    margin-block-start: 0!important;
	min-height:100px;
    box-shadow: 0 0 #0000, 0 0 #0000, 0 1px 2px 0 rgba(0, 0, 0, .05);
}
.info-card__key_features .card-content ul>li>ul {
	font-weight:400;
	flex:1;
	width:100%;
    padding-right:1rem;
}
/* INFO CARD - USE CASES */
.info-card__common_use_cases .card-content ul li:not(li ul li) {
	font-weight:600;
}
.info-card__common_use_cases .card-content ul li ul {
	list-style:none;
	margin-left:0;
	margin-bottom:1em;
	margin-top:.25em;
	font-weight:400;
}
/* INFO CARD - HOW TO USE */
.info-card__how_to_use .card-content {
    background-color:rgb(111 0 254 / .125);
    border-radius: var(--rounded, 12px);
    padding:1rem;
    margin-bottom:1.5rem;
}
.info-card__how_to_use .card-content ul:not(li ul) {
	display:grid;
	grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
	gap: 1rem;
	padding-inline-start:0!important;
	margin-block-start: .5em;
	margin-block-end: 1em;
    margin-left:0!important;
}
.info-card__how_to_use .card-content ul li:not(li ul li) {
	display:flex;
	border:1px solid var(--border-color, #e2e2e2);
	border-radius:var(--rounded, 12px);
	padding:1rem;
	list-style:none;
	font-weight:600;
	flex-flow:column wrap;
	gap:.55rem;
	position: relative;
	margin-block-end: 0!important;
    margin-block-start: 0!important;
	min-height:100px;
    box-shadow: 0 0 #0000, 0 0 #0000, 0 1px 2px 0 rgba(0, 0, 0, .05);
    border:1px solid var(--accent, rgb(111 0 254 / 1));
}
.info-card__how_to_use .card-content ul li:not(li ul li):before {
	content:'👉 ';
	font-size:1.65rem;
	height:55px;
	width:55px;
	display:flex;
	justify-content: center;
	align-items: center;
    font-weight:700;
	border-radius:var(--rounded, 12px);
	color:rgb(255 255 255 / .85);
	box-shadow:0 0 #0000, 0 0 #0000, 0 1px 2px 0 rgba(0, 0, 0, .05);
	background-color:var(--accent, rgb(111 0 254 / 1));
}
.info-card__how_to_use .card-content ul li:not(li ul li):nth-child(1):before {
	content:'1';
}
.info-card__how_to_use .card-content ul li:not(li ul li):nth-child(2):before {
	content:'2';
}
.info-card__how_to_use .card-content ul li:not(li ul li):nth-child(3):before {
	content:'3';
}
.info-card__how_to_use .card-content ul li:not(li ul li):nth-child(4):before {
	content:'4';
}
.info-card__how_to_use .card-content ul li:not(li ul li):nth-child(5):before {
	content:'5';
}
.info-card__how_to_use .card-content ul li:not(li ul li):nth-child(6):before {
	content:'6';
}
.info-card__how_to_use .card-content ul>li>ul {
	font-size:16px;
	font-weight:400;
	flex:1;
	width:100%;
    padding-right:1rem;
}
/* INFO CARD ACCRORDION STYLES - COMMON USE CASE */
.accordion-style__outline .accordion-item{
	position: relative;
    background-color: rgb(111 0 254 / .15);
    transition: transform 0.3s ease-in-out;
    border-radius: var(--rounded, 12px);
}
.accordion-style__outline .accordion-item .accordion-header {
    position: relative;
    padding: 1rem 1.25rem;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    transition: background-color 0.2s ease;
    line-height: 1.45;
    border-radius: var(--rounded, 12px);
	text-align:left;
}
.accordion-style__outline .accordion-item .accordion-header:hover {
    background-color: rgb(111 0 254 / .15);
}
.accordion-style__outline .accordion-content {
	background-color: var(--accent, rgb(111 0 254 / 1));
    border-radius: var(--rounded, 12px);
}
.accordion-style__outline .accordion-content p{
	padding-block: 1.25rem;
	padding-inline: 1.25rem;
}
.accordion-style__border .accordion-item .accordion-header {
    padding-block: .75rem;
	font-weight: 600;
	text-align:left;
    background-color:var(--accent, rgb(111 0 254 / 1));
}
.accordion-style__border .accordion-item{
	background-color: rgb(111 0 254 / .125);
	margin-block-start:1rem;
    border-radius: var(--rounded, 12px);
}
.accordion-style__border .accordion-item .accordion-content p{
	padding:1rem .75rem .75rem;
}
.accordion-header::after{
	display:flex;
	justify-content:center;
	align-items:center;
	border:1px solid var(--border-color, #e2e2e2);
    height:45px;
    aspect-ratio: 1;
    border-radius: var(--rounded, 12px);
}
.accordion-header.active::after {
    background-color: var(--accent, rgb(111 0 254 / 1));
}