/* ===== FAQ ITEM ===== */ .faq-item { border-radius: 10px; border: 1px solid #93FFDE; opacity: 0.7 !important; background: linear-gradient(90deg, rgba(26, 27, 28, 0.70) 14.42%, rgba(55, 55, 55, 0.70) 100%); overflow: hidden; transition: all 0.3s ease; margin-bottom: 12px; } .faq-item:hover { border-color: rgba(16, 255, 190, 0.2); background: linear-gradient(90deg, rgba(26, 27, 28, 0.70) 14.42%, rgba(55, 55, 55, 0.70) 100%); } .faq-item.active { border-color: rgba(16, 255, 190, 0.25); background: rgba(16, 255, 190, 0.03); } /* ===== FAQ HEADER ===== */ .faq-header { display: flex; align-items: center; justify-content: space-between; padding: 20px 24px; cursor: pointer; user-select: none; gap: 16px; height: 81px; } .faq-question { color: #FFF; font-family: Poppins; font-size: 24px; font-style: normal; font-weight: 400; line-height: 82%; /* 19.68px */ flex: 1; } /* ===== PLUS / MINUS ICON ===== */ .faq-icon { width: 28px; height: 28px; position: relative; flex-shrink: 0; display: flex; align-items: center; justify-content: center; } .faq-icon::before, .faq-icon::after { content: ''; position: absolute; background: #10FFBE; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); border-radius: 1px; } .faq-icon::before { width: 16px; height: 2px; } .faq-icon::after { width: 2px; height: 16px; } .faq-item.active .faq-icon::after { transform: rotate(90deg); opacity: 0; } /* ===== FAQ CONTENT ===== */ .faq-content { max-height: 0; overflow: hidden; transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1), padding 0.3s ease; padding: 0 24px; } .faq-item.active .faq-content { max-height: 300px; padding: 0 24px 20px 24px; } .faq-answer { font-size: 16px; color: #fff; line-height: 1.7; } /* ===== ANIMATIONS ===== */ @keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .animate-in { animation: fadeInUp 0.6s ease forwards; opacity: 0; } .delay-1 { animation-delay: 0.1s; } .delay-2 { animation-delay: 0.2s; } .delay-3 { animation-delay: 0.3s; } .delay-4 { animation-delay: 0.4s; } .delay-5 { animation-delay: 0.5s; } .delay-6 { animation-delay: 0.6s; } /* ===== RESPONSIVE ===== */ @media (max-width: 640px) { .faq-header { padding: 16px 20px; } .faq-question { font-size: 14px; line-height: 111%; /* 15.54px */ } .faq-answer { font-size: 12px; } .faq-item.active .faq-content { padding: 0 20px 16px 20px; } }