CTM Bundle

.faq-container { width: 90%; background-color: #fff; border-radius: 10px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); margin: 20px auto; padding: 10px; } .faq-header { text-align: center; padding: 10px 0; } .faq-header h2 { font-size: 24px; font-weight: bold; } .faq-item { padding: 15px 20px; border-top: 1px solid #e0e0e0; cursor: pointer; display: flex; justify-content: space-between; align-items: center; transition: background-color 0.3s ease-in-out; } .faq-item:first-child { border-top: none; } .faq-item:hover { background-color: #f9f9f9; } .faq-question { font-size: 18px; font-weight: 700; display: flex; align-items: center; } .faq-question img { margin-right: 8px; height: 24px; width: 24px; } .faq-answer { font-size: 16px; line-height: 1.6; max-height: 0; overflow: hidden; transition: max-height 0.3s ease-in-out; padding: 0 20px; } .faq-answer p { margin: 10px 0; } .faq-answer.active { padding: 10px 20px; } .icon-container i { font-size: 16px; transition: transform 0.3s ease-in-out; } .icon-container i.active { transform: rotate(90deg); } Frequently Asked Questions Is the Milagro CTM Bundle suitable for combination skin? Yes! The CTM Bundle is specially designed for all skin types, especially Combination Skin, as it effectively balances oily and dry areas. Can I use the products daily? Absolutely! For best results, use the bundle in your morning and evening skincare routine. Does the Honey Yogurt Moisturizer feel sticky? No, the Honey Yogurt Moisturizer is lightweight and oil-free, providing intense hydration without feeling sticky. What makes this bundle special compared to other skincare sets? Milagro Beauty uses natural ingredients like pineapple, green tea, and honey, which are known for their hydrating, soothing, and oil-control properties, making this bundle perfect for combination skin. Is the CTM bundle travel-friendly? Yes! The CTM bundle comes with a convenient makeup travel bag so you can easily carry your skincare essentials wherever you go. document.querySelectorAll('.faq-item').forEach((item) => { item.addEventListener('click', () => { const answer = item.nextElementSibling; const icon = item.querySelector('.icon-container i'); if (answer.classList.contains('active')) { answer.classList.remove('active'); answer.style.maxHeight = null; icon.classList.remove('active'); } else { document.querySelectorAll('.faq-answer.active').forEach((activeAnswer) => { activeAnswer.classList.remove('active'); activeAnswer.style.maxHeight = null; activeAnswer.previousElementSibling.querySelector('.icon-container i').classList.remove('active'); }); answer.classList.add('active'); answer.style.maxHeight = answer.scrollHeight + 'px'; icon.classList.add('active'); } }); });