/* FAQ's page style */

.qodef-tabs-navigation {
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
}

.qodef-tabs-navigation li.ui-tabs-tab {
    margin-right: 20px !important;
}

#faq_tab_content{
    max-height: 500px;   /* or height: 500px */
    overflow-y: auto;
}

ul.qodef-tabs-navigation li.ui-tabs-tab {
    margin-right: 0 !important;
    width: calc(25% - 20px);
    background-color: #ededed;
}

ul.qodef-tabs-navigation li.ui-tabs-tab .ui-tabs-anchor {
    padding: 10px;
    text-align: center;
    color: var(--e-global-color-primary);
    font-weight: 400;
    font-family: 'Raleway' !important;
    text-transform: none;
    line-height: 1.2em;
}

ul.qodef-tabs-navigation li.ui-tabs-tab.ui-tabs-active.ui-state-active {
    background-color: var(--e-global-color-primary);
}

ul.qodef-tabs-navigation li.ui-tabs-tab.ui-tabs-active.ui-state-active a {
    color: #fff;
}

.qodef-tabs.qodef-layout--simple .qodef-tabs-navigation li a:after {
    opacity: 0;
}

@media (max-width: 767px) {
	.qodef-tabs-navigation {
		flex-wrap: nowrap;
		overflow-x: auto;
		overflow-y: hidden;
		white-space: nowrap;
		-webkit-overflow-scrolling: touch; /* smooth mobile scrolling */
		scrollbar-width: thin; /* Firefox */
		flex-direction: row !important;
		justify-content: flex-start;
	}

	.qodef-tabs-navigation li {
		flex: 0 0 auto;
	}
	
	ul.qodef-tabs-navigation li.ui-tabs-tab {
        width: auto;
    }
    
    ul.qodef-tabs-navigation li.ui-tabs-tab .ui-tabs-anchor {
        padding: 10px 20px 12px;
    }

	/* Optional – style scrollbar (Chrome / Edge / Safari) */
	.qodef-tabs-navigation::-webkit-scrollbar {
		height: 4px;
	}

	.qodef-tabs-navigation::-webkit-scrollbar-thumb {
		background: #25606b;
		border-radius: 10px;
	}

	.qodef-tabs-navigation::-webkit-scrollbar-track {
		background: transparent;
	}
}