.faq-container { display: flex; max-width: 1200px; margin: 50px auto; background: #fff; padding: 40px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); border-radius: 10px; } .faq-left { width: 40%; padding-right: 40px; border-right: 1px solid #e0e0e0; } .faq-left h1 { font-size: 28px; margin-bottom: 20px; } .faq-left p { font-size: 16px; color: #555; } .faq-left button { margin-top: 20px; padding: 10px 20px; font-size: 14px; border: 1px solid #007bff; background-color: #fff; color: #007bff; cursor: pointer; border-radius: 5px; } .faq-right { width: 100%; //padding-left: 40px; } .faq-item { //border-bottom: 1px solid #e0e0e0; padding: 0 0 15px 0; } .faq-question { font-size: 16px; font-weight: 500; padding: 15px; cursor: pointer; display: flex; justify-content: space-between; align-items: center; border: 1px solid #e8e8e8; border-radius: 10px; } .faq-answer { display: none; padding: 10px 0 0 30px; font-size: 14px; color: #333; } .plus-icon { //font-size: 24px; transition: transform 0.3s ease; } .faq-item.active .faq-answer { display: block; //background-color: #dd3d42; } .faq-item.active .faq-question { background-color: #dd3d42; color: #fff; } .faq-item.active .plus-icon { transform: rotate(90deg); } button { border-radius: 5px !important; background-color: #dd3d42; padding: 1px 8px 1px 10px; border: 0; color: white; }