:root { --font: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; --secondary-color: #367FEE; } /* FAQ Container */ .faq-container { width: 100%; overflow: hidden; font-family: var(--font); } /* Header Section */ .faq-header { text-align: center; padding: 40px 20px; color: #000000; } /* Search Bar */ .search-container { margin: 30px auto; max-width: 600px; } .search-box { position: relative; display: flex; align-items: center; background: #fff; border-radius: 50px; padding: 10px 20px; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); } .search-box i { color: #353535; margin-right: 10px; font-size: 1.2rem; margin-left: 6px; } .search-box input { flex: 1; outline: none; font-size: 1rem; color: #353535; background: transparent; border-radius: 50px; padding: 12px 24px; border: 0px solid #575756; } .search-box input::placeholder { color: var(--light-text); } .clear-search { background: none; border: none; color: #353535; cursor: pointer; padding: 5px; display: none; } .clear-search.visible { display: block; } /* Category Filter */ .category-filter { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; margin-top: 20px; } .category-btn { padding: 8px 20px; border: 1px solid #575756; border-radius: 25px; background: #fff; color: #000000; cursor: pointer; transition: all 0.3s ease; font-size: 0.9rem; } .category-btn:hover { transform: scale(1.1); } .category-btn.active { background: #0D6EFD; color: #fff; border-color: #fff } /* FAQ Content */ .faq-content { padding: 40px; } .faq-category { margin-bottom: 40px; } .faq-item { color: #000; border-radius: 20px; margin-bottom: 20px; overflow: hidden; background-color: #CCCCCC30; } .guide-type { color: #00000000; } .guide-item { color: #000; } .guide-card { border: 1px solid #dee2e6; border-radius: 10px; } .guides-content { padding-top: 20px; padding-bottom: 60px; } .guides-title { font-size: 1.25rem; font-weight: 300; } .guide-card-top { background-color: #e9ecef70; display: flex; justify-content: center; align-items: center; text-align: center; overflow: hidden; height: 124px; border-top-left-radius: 10px !important; border-top-right-radius: 10px !important; } .guide-card-top img { display: block; margin: auto; padding: 0.25rem; max-width: 100%; width: 226px; height: 79px; } .col-1-guide { flex: 1; display: flex; flex-direction: column; /* stack rows vertically */ } .col-2-guide { display: flex; flex: 0.1; /* takes available space */ height: 72px; align-items: center; justify-content: center; text-align: center; } .giude-icon { color: #c4c4c4; font-size: 1.2rem; } .guide-child { cursor: pointer; } .faq-question { padding: 2px; cursor: pointer; } .faq-question:hover { background: rgba(74, 144, 226, 0.05); /*transform: scale(1.02) translateX(2px);*/ transition: all 0.3s ease; } .faq-icon { color: #77787a; transition: all 0.3s ease; font-size: 1rem; } .faq-item.active .faq-icon { transform: rotate(90deg); } .faq-answer { padding: 0 20px; max-height: 0; overflow: hidden; transition: all 0.3s ease; font-weight: 300; } .faq-item.active .faq-answer { padding: 0 20px 20px 20px; max-height: 1000px; background-color: #fff; } /* Responsive Design */ @media (max-width: 768px) { .faq-content { padding: 10px 20px 20px 20px; } .faq-header h1 { font-size: 24px; } .faq-header h2 { font-size: 14px; } .category-filter { gap: 5px; } .category-btn { padding: 6px 15px; font-size: 0.8rem; } .search-container { margin: 0px auto; max-width: 600px; } .search-box i { color: #353535; margin-right: 0px; margin-left: 10px; font-size: 1.2rem; } .search-box input { padding: 12px 18px; } .faq-category h2 { font-size: 1.25rem; text-align: center; } .row-faq p { font-size: 12px; } .faq-icon { transition: all 0.3s ease; font-size: 1rem; margin-left: -6px !important; margin-right: 10px !important; } .guides-title { font-size: 1rem; font-weight: 300; } .guide-card-top { height: 70px; } .guide-card-top img { margin: auto; padding: 0.25rem; max-width: 70%; height: 65px; } } @media (max-width: 1200px) { .faq-icon { font-size: 1rem; margin-right: 5px; margin-left: -5px; } .table-faq { justify-content: center; /* centers horizontally */ } } @media (max-width: 480px) { .faq-header { padding: 2px 15px 26px 15px; } .search-box { padding: 8px 15px; } } .table-faq { display: flex; border: 0px solid #ccc; overflow: hidden; } .col-1-faq { flex: 0.1; /* takes available space */ padding-left: 20px; margin-top: 20px; } .col-2-faq { margin-top: 20px; flex: 4; display: flex; flex-direction: column; /* stack rows vertically */ margin-right: 20px; } .col-2-faq .row-faq { flex: 1; /* equal height rows */ } .teaser-row-faq { font-size: 0.9rem; color: #77787a; } .article-item { opacity: 0; transition: 0.5s ease-in; display: none; } .article-item.active { display: block; opacity: 100%; transition: 0.5s ease-in; } .markdown-content { font-size: 1rem; font-weight: 300 !important; } .markdown-content strong { font-size: 1rem; font-weight: 700 !important; } .markdown-content blockquote { border-left: 4px solid var(--secondary-color); padding-left: 12px; padding-right: 4px; margin: 1em 0; font-style: italic; background: #f9f9f9; } .markdown-content table { width: 100%; border-collapse: collapse; margin: 1.5em 0; font-size: 14px; } .markdown-content th, .markdown-content td { border: 1px solid #ddd; padding: 8px 12px; text-align: left; } .markdown-content code { background: #f4f4f4; padding: 2px 5px; border-radius: 4px; font-family: monospace; color: #101010; }