.faq {
margin: 30px 0;
}
.faq-item {
margin-bottom: 12px;
overflow: hidden;
border: 1px solid #cfe2f3;
border-radius: 10px;
background: #ffffff;
box-shadow: 0 5px 18px rgba(7, 93, 155, 0.09);
transition: box-shadow 0.25s ease, transform 0.25s ease;
}
.faq-item:hover {
box-shadow: 0 8px 24px rgba(7, 93, 155, 0.15);
transform: translateY(-1px);
}
.faq-item summary {
position: relative;
display: flex;
align-items: center;
min-height: 62px;
padding: 16px 58px 16px 20px;
background: linear-gradient(135deg, #075d9b 0%, #0d86d7 100%);
color: #ffffff;
font-size: 17px;
font-weight: 700;
line-height: 1.4;
cursor: pointer;
list-style: none;
transition: background 0.25s ease;
}
.faq-item summary::-webkit-details-marker {
display: none;
}
.faq-item summary::after {
position: absolute;
top: 50%;
right: 20px;
display: flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
border: 1px solid rgba(255, 255, 255, 0.45);
border-radius: 50%;
background: rgba(255, 255, 255, 0.14);
color: #ffffff;
font-size: 22px;
font-weight: 400;
line-height: 1;
content: "+";
transform: translateY(-50%);
transition: transform 0.25s ease, background 0.25s ease;
}
.faq-item[open] summary {
background: linear-gradient(135deg, #064f86 0%, #0876bd 100%);
}
.faq-item[open] summary::after {
content: "−";
background: rgba(255, 255, 255, 0.24);
transform: translateY(-50%) rotate(180deg);
}
.faq-answer {
padding: 20px 22px;
border-top: 1px solid #dcebf7;
background: #f7fbff;
color: #334155;
font-size: 15px;
line-height: 1.7;
}
.faq-answer p {
margin: 0;
}
@media (max-width: 767px) {
.faq-item summary {
min-height: 58px;
padding: 14px 52px 14px 16px;
font-size: 15px;
}
.faq-item summary::after {
right: 14px;
width: 28px;
height: 28px;
font-size: 20px;
}
.faq-answer {
padding: 16px;
font-size: 14px;
}
}