.ns-icons-container {
display: block;
}
.ns-mobile-accordion {
display: none;
.ns-accordion-item {
overflow: hidden;
border-radius: var(--radius-xl);
.ns-accordion-header {
display: flex;
align-items: center;
padding: 15px;
cursor: pointer;
transition: background-color 0.3s ease;
.ns-accordion-icon {
width: 40px;
height: 40px;
margin-right: 15px;
display: flex;
align-items: center;
justify-content: center;
background: var(--secondary-color);
border-radius: 50%;
flex-shrink: 0;
svg {
width: 2rem;
height: 2rem;
}
@media (width<=420px) {
display: none;
}
}
.ns-accordion-title {
flex: 1;
margin: 0;
font-size: var(--text-lg);
font-weight: 600;
color: var(--primary-color);
line-height: 1.2em;
}
.ns-accordion-toggle {
width: 2.5rem;
height: 2.5rem;
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
font-weight: bold;
color: #000;
flex-shrink: 0;
}
}
.ns-accordion-content {
display: none;
padding: 0 15px 15px 15px;
@media (width>420px) {
padding-left: 70px;
}
background: #fff;
p {
margin: 0;
display: block;
}
* {
line-height: 1.2em;
color: var(--text-color);
font-size: var(--text-size);
}
}
&.active {
.ns-accordion-header,
.ns-accordion-content {
background-color: var(--gray-lighter);
}
.ns-accordion-header .ns-accordion-title {
color: var(--primary-color);
}
}
}
}
@media (width<= 768px) {
.ns-icons-container {
display: none !important;
}
.ns-mobile-accordion {
display: block;
}
}