/* Why Us Page Specific Styles */

/* Why Us Section */
.why-us-section {
padding: 6vw 6vw 8vw 6vw;
background-color: #f8fafc; /* Soft background to let white cards pop */
}

.wu-container {
display: flex;
justify-content: center;
align-items: flex-start;
}

/* Accordion Styling */
.wu-accordion {
width: 90%;
max-width: 1400px;
display: flex;
flex-direction: column;
gap: 1.5vw; /* More breathing room */
}

.wu-accordion-item {
border: none; /* Removed hard border */
border-radius: 0.8vw;
overflow: hidden;
background-color: #ffffff;
box-shadow: 0 0.5vw 1.5vw rgba(0, 58, 93, 0.06); /* Premium soft shadow */
transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.wu-accordion-item:hover {
transform: translateY(-0.2vw);
box-shadow: 0 0.8vw 2vw rgba(0, 58, 93, 0.1);
}

.wu-accordion-header {
width: 100%;
text-align: left;
background-color: #ffffff;
border: none;
padding: 1.5vw 2vw;
display: flex;
justify-content: space-between;
align-items: center;
cursor: pointer;
font-family: inherit;
font-size: 1.1vw;
font-weight: 800;
color: #334155;
text-transform: uppercase;
letter-spacing: 0.05vw;
transition: all 0.3s ease;
}

.wu-accordion-item.active .wu-accordion-header {
color: var(--brand-blue);
background-color: rgba(0, 58, 93, 0.03); /* Subtle active background */
border-bottom: 2px solid rgba(0, 58, 93, 0.1);
}

/* Accordion Icon (+ / -) */
.wu-icon {
font-size: 1.5vw;
font-weight: 400;
color: var(--brand-blue);
width: 2vw;
height: 2vw;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
border-radius: 50%;
background-color: rgba(0, 58, 93, 0.05);
}

.wu-accordion-item.active .wu-icon {
background-color: var(--brand-blue);
color: #ffffff;
transform: rotate(180deg); /* Cool spin effect */
}

/* Accordion Content */
.wu-accordion-content {
max-height: 0;
overflow: hidden;
transition: max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1);
background-color: #ffffff;
}

.wu-list {
padding: 2vw 2.5vw;
margin: 0;
list-style: none;
}

.wu-list li {
position: relative;
font-size: 1.05vw;
color: #475569;
line-height: 1.8;
margin-bottom: 1.2vw;
padding-left: 2vw;
}

.wu-list li:last-child {
margin-bottom: 0;
}

.wu-list li::before {
content: '';
position: absolute;
left: 0;
top: 0.6vw;
width: 0.6vw;
height: 0.6vw;
background-color: var(--brand-green);
border-radius: 50%; /* Rounded bullets look softer */
box-shadow: 0 0 0.4vw rgba(132, 194, 37, 0.4); /* Glow effect on bullets */
}

/* Responsive Design */
@media (max-width: 1020px) {
.wu-accordion { max-width: 80vw; }
.wu-accordion-header { font-size: 1.6vw; padding: 2vw 2.5vw; }
.wu-icon { font-size: 2vw; width: 3vw; height: 3vw; }
.wu-list li { font-size: 1.6vw; padding-left: 3vw; }
.wu-list li::before { width: 1vw; height: 1vw; top: 0.6vw; }
}

@media (max-width: 720px) {
.why-us-section { padding: 8vw 6vw 12vw 6vw; }
.wu-container { flex-direction: column; gap: 8vw; }
.wu-accordion { width: 100%; max-width: 100%; }

.wu-accordion-item { border-radius: 2vw; }
.wu-accordion-header { font-size: 3.5vw; padding: 4vw 4vw; }
.wu-icon { font-size: 4vw; width: 6vw; height: 6vw; }

.wu-list { padding: 4vw 4vw; }
.wu-list li { font-size: 3.5vw; padding-left: 5vw; margin-bottom: 2.5vw; line-height: 1.6; }
.wu-list li::before { width: 1.5vw; height: 1.5vw; top: 1.2vw; }
}